Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Setting management Blazor UI #5541

Closed
hikalkan opened this issue Sep 21, 2020 · 5 comments
Closed

Setting management Blazor UI #5541

hikalkan opened this issue Sep 21, 2020 · 5 comments

Comments

@hikalkan
Copy link
Member

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

@Stirda
Copy link

Stirda commented Oct 5, 2020

@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
Copy link
Contributor

cotur commented Oct 5, 2020

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.

  1. 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;
        }
    }
  1. 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
Copy link

Stirda commented Oct 7, 2020

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

@274188A
Copy link
Contributor

274188A commented Dec 16, 2020

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

@cotur
Copy link
Contributor

cotur commented Dec 16, 2020

@274188A yes :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants