Open Closed

Setting Definitions UI #30


User avatar
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

Markdown supported.
Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

5 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Are you using razor page or angular?

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

    Angular

    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 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:

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    yuhang.ji@yftech-dl.com created

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

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

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
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.