Open Closed

Customize the interface and add a new field. #7027


User avatar
0
thanhlg created
  • ABP Framework version: v8.0.2
  • UI Type: Blazor WASM
  • Database System: EF Core (PostgreSQL)
  • Exception message and full stack trace:
  • Steps to reproduce the issue:

Hi Support Teams,

I want to customize the user interface of the User screen as follows:

  1. Add a new tab when creating or editing a User. How can I add new fields for the User in the new tab? For example, in the new tab, I want to include additional information for the User such as Code, Address, Manager...
  2. Change the interface to be in the form of an EditForm like this image instead of opening a Popup.

10 Answer(s)
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    I suggest you create a new entity action with a component instead of extending the Edit UI.

    Because you need to copy a lot of code to extend the Edit UI.

    To a new entity action:

    https://docs.abp.io/en/abp/latest/UI/Blazor/Entity-Action-Extensions

    [ExposeServices(typeof(UserManagement))]
    [Dependency(ReplaceServices = true)]
    public class CustomizedUserManagement : UserManagement
    {
        protected override async ValueTask SetEntityActionsAsync()
        {
            await base.SetEntityActionsAsync();
            var advancedEditAction = new EntityAction()
            {
                Text = "Advanced edit",
                Clicked = (data) =>
                {
                   
                    //TODO: you can navigate to a new component page here.
    
                }
            };
            EntityActions.Get<UserManagement>().Add(advancedEditAction);
        }
    }
    
  • User Avatar
    0
    thanhlg created

    Hi I've tried using an event bus to extend the Entity, but when running it, it doesn't receive my handlers.

    Where am I missing configuration? I'm working on Module Template.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    You need to configure the AutoEventSelectors:

    https://docs.abp.io/en/abp/latest/Distributed-Event-Bus#event-transfer-object

  • User Avatar
    0
    thanhlg created

    I have configured it within the Domain layer but it still isn't functioning.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Where am I missing configuration? I'm working on Module Template.

    Have you added the module dependencies?

    [Dependof(typeof(DMSDomainModule))]
    
  • User Avatar
    0
    thanhlg created

    I configured it in the DMSDomainModule.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Could you share a test project with me? I will check it. shiwei.liang@volosoft.com thanks.

  • User Avatar
    0
    thanhlg created

    Hi,

    Could you share a test project with me? I will check it. shiwei.liang@volosoft.com thanks.

    Hi,

    I have sent you an email, please check and assist me. Thanks.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    This is because the Identity service comes from AuthServer, and the AuthServer does not reference the Domain project.

  • User Avatar
    0
    thanhlg created

    It worked. Thank you very much for your help 🤗

Made with ❤️ on ABP v9.1.0-preview. Updated on November 11, 2024, 11:11