Open Closed

Tenant-Settings #83


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.


25 Answer(s)
  • 0
    alper created
    Support Team

    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

  • 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

  • 0
    alper created
    Support Team

    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";
        }
        
    
  • 0
    vishalnikam created

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

  • 0
    alper created
    Support Team

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

  • 0
    vishalnikam created

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

  • 0
    Mehmet created
    Support Team

    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

  • 0
    vishalnikam created

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

  • 0
    Mehmet created
    Support Team

    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.

  • 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.

  • 0
    Mehmet created
    Support Team

    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
          }
        });
    }
    
  • 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 }

  • 0
    Mehmet created
    Support Team

    How do you change tenant?

    Did you add SetTenant action into the pipe like below:

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

  • 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')`,
          );
        }
    
      });
    }
    
  • 0
    Mehmet created
    Support Team

    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')

  • 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'}

  • 0
    Mehmet created
    Support Team

    Can you share your project with us? You can upload to the google drive and send an email to [email protected]

  • 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.

  • 0
    Mehmet created
    Support Team

    You can set the style number as shown below:

    // There are 5 styles for Lepton theme.
    this.store.dispatch(new SetStyle(3));
    
  • 0
    vishalnikam created

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

  • 0
    Mehmet created
    Support Team

    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
        });
    
  • 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}

  • 0
    maliming created
    Support Team

    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

  • 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.

  • 0
    Mehmet created
    Support Team

    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.