Short Guide: How to add Setting Pages for modules

[cotur]

While developing reusable modules with ABP Framework, we might need create settings page to change module's behavior in different cases.

ABP Framework has predefined Setting Management module and you can create your setting pages and bring it to setting management module for rendering.

Let me give you step-by-step guide to show "How to add setting page for your module".

Behind the logic

Modules must be seperated and each module may have different scenarios for themselves. So we think, each module should manage their setting pages also, not only declaring.
When a module needs a setting page, developer should create a Component (for blazor) and add the setting page component to ISettingComponentContributor. So setting management page may see that and render it.

This guide is prepared for Blazur UI, but it is generally same for other UI types

To create a setting page.

1. Create razor component MyModuleSettingManagementComponent.razor in your module.

This contains a setting form for your module.

2. Create MyModuleSettingManagementComponentContributor in your module.

public class MyModuleSettingManagementComponentContributor : ISettingComponentContributor
    {
        public virtual async Task ConfigureAsync(SettingComponentCreationContext context)
        {
            if (!await CheckPermissionsInternalAsync(context))
            {
                return;
            }

            var l = context.ServiceProvider.GetRequiredService<IStringLocalizer<MyModuleResource>>();
            context.Groups.Add(
                new SettingComponentGroup(
                    "MyCompany.MyModule", // It is a unique setting component id
                    l["Menu:MyModule"],
                    typeof(MyModuleSettingManagementComponent)
                )
            );
        }

        public virtual async Task<bool> CheckPermissionsAsync(SettingComponentCreationContext context)
        {
            // check permission for settings page 
            return true;
        }
    }

3. And finally, configure SettingManagementComponentOptions in your module class.

[DependsOn(
       ...
        typeof(AbpSettingManagementBlazorModule)
        )]
public class MyBlazorModule : AbpModule
    {
        public override void ConfigureServices(ServiceConfigurationContext context)
        {
            ....
            Configure<SettingManagementComponentOptions>(options =>
            {
                options.Contributors.Add(new MyModuleSettingManagementComponentContributor());
            });
        }
    }

Now you can see your setting page in Settings item at the Administration Menu. 🙂

[274188A]

Thanks - this is a great start. I'm looking forward to hopefully seeing something like (link below) this in the start-up templates in the future:

#2283