Open Closed

Setting Definitions UI #30


0
bhyatz created

I have added new setting definitions to my module public override void Define(ISettingDefinitionContext context) { /* Define module settings here. * Use names from AumSettings class. */ context.Add( new SettingDefinition(name : AumSettings.EmailRequired, defaultValue : "true", displayName : new LocalizableString( typeof(AumResource),"Setting:EmailRequired" ), description : new LocalizableString(typeof(AumResource), "Setting:EmailRequiredDescription"), isVisibleToClients : true ), new SettingDefinition(name: AumSettings.PhoneRequired, defaultValue: "false", displayName: new LocalizableString(typeof(AumResource), "Setting:PhoneRequired"), description: new LocalizableString(typeof(AumResource), "Setting:PhoneRequiredDescription"), isVisibleToClients: true ) );

    }
    

However these settings do not appear on the settings managment UI. What do I have to do to get these settings to be configurable on the settings page. the only settings visible are for the built in modules Identity management Lepton theme settings and Account


5 Answer(s)
  • 0
    maliming created

    hi

    Are you using razor page or angular?

  • 0
    bhyatz created

    Angular

  • 0
    Mehmet created

    You should create your own settings component. It doesn't appear automatically.

    Steps to add a setting tab:

    1. Crete a component. Example:
    import { Select } from '@ngxs/store';
    import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-your-custom-settings',
      template: `
        your-custom-settings works! mySetting: {{ mySetting$ | async }}
      `,
    })
    export class YourCustomSettingsComponent {
      @Select(ConfigState.getSetting('MyProjectName.MySetting1')) // Gets a setting. MyProjectName.MySetting1 is a setting key.
      mySetting$: Observable<string>; // The selected setting is set to the mySetting variable as Observable.
    }
    
    1. Add the YourCustomSettingsComponent to declarations and the entryComponents arrays in the AppModule.
    2. Open the app.component.ts and add the below content to the ngOnInit:
    import { addSettingTab } from '@abp/ng.theme.shared';
    // ...
    
    ngOnInit() {
      addSettingTab({
        component: YourCustomSettingsComponent,
        name: 'Type here the setting tab title (you can type a localization key, e.g: AbpAccount::Login',
        order: 4,
        requiredPolicy: 'type here a policy key'
      });
    }
    

    Open the setting-management page to see the changes:

  • 0
    [email protected] created

    What about RazorPages? Is there any auto way to let Setting-Management to list my settings?

  • 0
    alper created

    For the Razor Pages, you need to create your own setting management page and you can use ISettingProvider to retrieve your settings & values. See https://docs.abp.io/en/abp/latest/Settings