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.

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

  • 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

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

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

  • User Avatar
    0
    alper created
    Support Team Director

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

  • 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

  • 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

  • User Avatar
    0
    vishalnikam created

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

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

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

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

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

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

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

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

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

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

  • 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));
  • User Avatar
    0
    vishalnikam created

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

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

  • 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

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

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

Assignee
User avatar Mehmet
Labels
None yet
Made with ❤️ on ABP v9.1.0-preview. Updated on December 12, 2024, 07:15