Open Closed

Tenant-Settings #83

User avatar
0
vishalnikam created

Hi There,

How can i achive functionlity like Tenant custom setting like logo and all. please refer below like.

[https://docs.aspnetzero.com/en/aspnet-core-angular/latest/Features-Angular-Tenant-Settings]

Kinldy let me know.

Markdown supported.
Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
Go to accepted answer
25 Answer(s)
  • User Avatar
    0
    alper created
    Support Team Director

    you can customize the user interface per your tenants / users / or any other conditions. See https://docs.abp.io/en/abp/latest/Customizing-Application-Modules-Overriding-User-Interface

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    vishalnikam created

    Hi Alper,

    I just wanted to change ABP logo on login and other Anguler pages. Is ther any way to customise or configure it with minumum efforts.

    This link you shared, talkes about Replacing a Angular bulid in component. Please suggest.

    Thanks, Vishal Nikam

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    alper created
    Support Team Director

    for MVC you can override Application name and logo

        public class AbpIoDocsBrandingProvider : DefaultBrandingProvider
    {
        public override string AppName => "Acme - MyBookStore";
        public override string LogoUrl => "/images/myLogo.png";
    }
    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    vishalnikam created

    this is fine with MVC. anything on Angualr side insted of Component Replacement? just to change logo.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    alper created
    Support Team Director

    just to change logo, delete the existing logo file and copy your own logo file.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    vishalnikam created

    i could find theme logo file in assets\images but wher i can get the logo file for login page

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    Mehmet created

    Hi

    Lepton theme uses two logos for each style. You can change these logos with your own logos without changing the filenames in the angular/src/assets/images/logo folder. Login page uses theme{x}-reverse.png

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    vishalnikam created

    Which Angular component should be replaced to change the application Logo .

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    Mehmet created

    This logo is in the ApplicationLayoutComponent. You can replace this component with the Theme.ApplicationLayoutComponent key. See the layout replacement documentation. But I wouldn't recommend it for changing the logo.

    The logo takes the url from a CSS property which is --logo or --logo-reverse. --logo and --logo-reverse properties are set when theme changed in the Lepton settings.

    So, there are two ways for changing the logo: 1- Replacing the logos in the angular/src/assets/images/logo folder without changing the filenames. 2- Changing the CSS properties value as described below:

    Open the app.component.ts and edit the content as shown below:

    import { Actions, ofActionSuccessful } from '@ngxs/store'; // added this line
import { SetStyle } from '@volo/abp.ng.theme.lepton'; // added this line
// ...
export class AppComponent implements OnInit {
  constructor(private lazyLoadService: LazyLoadService, private actions: Actions) {} // injected the actions

  ngOnInit() {
    //...

    // Added the below  content
    this.actions.pipe(ofActionSuccessful(SetStyle)).subscribe(() => {
      document.documentElement.style.setProperty(
        '--logo',
        `url('logo url here')`,
      );

      document.documentElement.style.setProperty(
        '--logo-reverse',
        `url('reverse logo url here')`,
      );
    });
  }
}

    I replaced the --logo property with http://abp.io/assets/abp-logo-light.svg and then UI looks like this:

    We'll create a component that contains logo in v2.5. The component will be easily replaced.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    vishalnikam created

    Thanks. 2nd approch looks good for me but it applies to all theme. How to set Logo css propetry for specifc Theme and specifc Tenant.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    Mehmet created

    You can listen SetTenant action that dispatches when tenant change. The current tenant can be getted via Store

    import { ... SetTenant, SessionState } from '@abp/ng.core'; // imported SetTenant and SessionState
import { ... Store } from '@ngxs/store'; // imported Store
//...

constructor( ... private store: Store) // injected Store

ngOnInit() {
    this.actions.pipe(ofActionSuccessful(SetStyle, SetTenant)).subscribe(res => { // added SetTenant
      console.log(this.store.selectSnapshot(SessionState.getTenant)) // logs current tenant

      if (res instanceof SetStyle) {
        console.log(res.payload) // logs style number e.g. 1
        // your logic here
      } else if (res instanceof SetTenant) {
        console.log(res.payload) // logs new tenant e.g. {id: '6391bd36-d4b1-8a22-5fd6-39f461b01b37', name: 'Amazon'}
        // your logic here
      }
    });
}
    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    vishalnikam created

    Hi In my case, SetTenant instance event not occurring after tenant switch hence below code is out of reach.

    else if (res instanceof SetTenant) { console.log(res.payload) // logs new tenant e.g. {id: '6391bd36-d4b1-8a22-5fd6-39f461b01b37', name: 'Amazon'} // your logic here }

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    Mehmet created

    How do you change tenant?

    Did you add SetTenant action into the pipe like below:

    this.actions.pipe(ofActionSuccessful(SetStyle, SetTenant))

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    vishalnikam created

    Yes. here is the sample code.

    this.actions.pipe(ofActionSuccessful(SetStyle, SetTenant)).subscribe((res) => {

        console.log(this.store.selectSnapshot(SessionState.getTenant)) // logs current tenant

    if (res instanceof SetStyle) {
      console.log(res.payload) // logs style number e.g. 1
      
      document.documentElement.style.setProperty(
        '--logo',
        `url('http://abp.io/assets/abp-logo-light.svg')`,
      );

      document.documentElement.style.setProperty(
        '--logo-reverse',
        `url('http://abp.io/assets/abp-logo-light.svg')`,
      );

    } 
    else if (res instanceof SetTenant) {
      console.log(res.payload) // logs new tenant e.g. {id: '6391bd36-d4b1-8a22-5fd6-39f461b01b37', name: 'Amazon'}
      
      document.documentElement.style.setProperty(
        '--logo',
        `url('../assets/images/logo/tenant.png')`,
      );

      document.documentElement.style.setProperty(
        '--logo-reverse',
        `url('../assets/images/logo/tenant.png')`,
      );
    }

  });
}
    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    Mehmet created

    How do you change tenant? Did you use above tenant changing component in account module?

    By the way url('../assets/images/logo/tenant.png') should be url('assets/images/logo/tenant.png')

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    vishalnikam created

    Yes. I dont see below console log.

    console.log(res.payload) // logs new tenant e.g. {id: '6391bd36-d4b1-8a22-5fd6-39f461b01b37', name: 'Amazon'}

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    Mehmet created

    Can you share your project with us? You can upload to the google drive and send an email to support@abp.io.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    vishalnikam created

    Yes, it is working now for me. can you tell me how to set the theme for tenant dynamically just the same way logo setting here.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    Mehmet created

    You can set the style number as shown below:

    // There are 5 styles for Lepton theme.
this.store.dispatch(new SetStyle(3));
    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    vishalnikam created

    How i can call any tenant specific app service (setting) on app.component.ts while tenant switch.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    Mehmet created

    You can listen SetTenant action like below:

     this.actions.pipe(ofActionSuccessful(SetTenant)).subscribe(res => {
    // this block executes when tenant changed
    // you can call any service here
    });
    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    vishalnikam created

    I imported Service and Model in app.component.ts

    this.brandSettingsService.getById(this.id).toPromise().then((data : any) => { this.brandSetting = data; });

      if (res instanceof SetTenant) {
    //console.log(res.payload) // logs new tenant e.g. {id: '6391bd36-d4b1-8a22-5fd6-39f461b01b37', name: 'Amazon'}
    
    document.documentElement.style.setProperty(
      '--logo',
      `url('`+ this.brandSetting.brandLogoPath + `')`,
    );

    document.documentElement.style.setProperty(
      '--logo-reverse',
      `url('`+ this.brandSetting.brandLogoPath + `')`,
    );
  }

    got unauthorized error. how can i call the service without login to system.

    core.js:6185 ERROR Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":401,"statusText":"Unauthorized","url":"https://localhost:44369/api/app/brandSetting/B612C372-953D-107B-DCA5-39F468142176","ok":false,"name":"HttpErrorResponse","message":"Http failure response for https://localhost:44369/api/app/brandSetting/B612C372-953D-107B-DCA5-39F468142176: 401 Unauthorized","error":null}

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    how can i call the service without login to system.

    AllowAnonymous suppresses the authentication. So, GetAsync method is available to everyone including unauthorized users.

    https://docs.abp.io/en/abp/latest/Authorization#authorize-attribute

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    vishalnikam created

    my bad. to change theme dynamically Mehant suppgest below code line. this.store.dispatch(new SetStyle(3)); but i didn't work for me. Also is there any way to change Button css for particular theme and it applies for all the button.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    Mehmet created

    You can add your custom style to angular/src/styles.css file. For now, you must add !important to all overriding styles. We'll work to avoid !important.

    Here is an example:

    .btn.btn-primary {
  background-color: yellow !important;
  color: black !important;
}

    this.store.dispatch(new SetStyle(<style number here>)); this code should be worked, I don't understand why it didn't work for you. Please describe in detail.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
Assignee
User avatar Mehmet
Labels
None yet
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.8.0-preview. Updated on September 28, 2026, 11:44
1
ABP Assistant
🔐 You need to be logged in to use the chatbot. Please log in first.