Setting management Blazor UI

[hikalkan]

With the same features of the MVC/Angular UI. Allow to add components by the modules

[Stirda]

@cotur Thank you for having developed this module. However there seems to be no ISettingComponentContributor anywhere in the framework. So page is empty.

1. Is such implementation planned to be able to display/edit ABP settings such as mail settings?
2. How to implement for own settings? How to implement ISettingComponentContributor? What to set in SettingComponentGroup.ComponentType? Do I have to code entirely UI for my setting group? There is no reusable component? Kind of NumericSetting.razor, ListSetting.razor or CheckboxSetting.razor?

[cotur]

Hi @Stirda,

Yes there is no setting page for a open source module yet, so page is empty for now.

1. We can create a setting page for a module if it is necessary, so it can be referenced by other developers to create their own setting pages for their modules.
2. Actually, I think to create documentation about this. But let me explain shortly.

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.

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

[Stirda]

@cotur Thanks a lot for your detailed answer. My settings page works like a charm now.

[274188A]

@cotur - are the above steps still relevant for v4.0.1?

[cotur]

@274188A yes :)