How to customize the user management UI #10100

2 Answer(s)

• 

  0

  AI-Bot created 4 hours ago

  Support Team ABP Agent

  1. Solution Below are the verified, standard ways to customize the User Management UI in ABP. Choose the section that matches your UI stack.

  A) MVC / Razor Pages (ABP Identity module) Goal examples:

  • Add fields (tabs/columns) to Users page and modals.
  • Fully replace a Razor Page (Index/Edit) of the Identity module.

  1. Extend the IdentityUser entity and surface properties in UI automatically

  • Define extra properties on the IdentityUser via module/entity extensions (Domain.Shared).
  • Map EF Core properties (EntityFrameworkCore layer) and run migrations.
  • Apply DTO extension to the Identity module’s DTOs so the UI receives/sends your properties.

  Code outline:

  • Domain.Shared: Configure extra user properties.

  ObjectExtensionManager.Instance.Modules().ConfigureIdentity(identity =>
    {
        identity.ConfigureUser(user =>
        {
            user.AddOrUpdateProperty<string>("Code");
            user.AddOrUpdateProperty<string>("Address");
            user.AddOrUpdateProperty<string>("Manager");
        });
    });
  

  • EFCore: Map properties for DB fields and migrate.

  ObjectExtensionManager.Instance
        .MapEfCoreProperty<IdentityUser, string>("Code")
        .MapEfCoreProperty<IdentityUser, string>("Address")
        .MapEfCoreProperty<IdentityUser, string>("Manager");
  

  • Application.Contracts: Expose properties on Identity DTOs used by UI (Users CRUD and Profile if needed).

  public class YourAppContractsModule : AbpModule
    {
        public override void PostConfigureServices(ServiceConfigurationContext context)
        {
            ModuleExtensionConfigurationHelper.ApplyEntityConfigurationToApi(
                IdentityModuleExtensionConsts.ModuleName,
                IdentityModuleExtensionConsts.EntityNames.User,
                getApiTypes: new[] { typeof(IdentityUserDto) },
                createApiTypes: new[] { typeof(IdentityUserCreateDto) },
                updateApiTypes: new[] { typeof(IdentityUserUpdateDto) }
            );
        }
    }
  

  This makes the Identity Users CRUD automatically show your new properties on the list and modal when possible.

  2. Replace/override a specific Razor Page (full UI control)

  • Copy the embedded Razor page you want to customize from Volo.Abp.Identity.Web into your web project under the same path, then modify.
    • Example (Users list): copy pages/Identity/Users/Index.cshtml and related PageModel to your Web project (under Pages/Identity/Users/).
  • You can then:
    • Add new tabs/fields in the Create/Edit modal.
    • Convert modal workflows to a full-page Edit form by building a dedicated Edit page and changing the action links to navigate there (instead of opening modal).

  Note:

  • The embedded original Users Index file (for reference) resides here: https://github.com/abpframework/abp/blob/dev/modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Users/Index.cshtml

  B) Blazor (Blazor Server/WebAssembly) Goal examples:

  • Add a new action to Users grid to navigate to your custom “Advanced Edit” page.
  • Replace the default modal editing with a custom page.

  Approach: Extend entity actions and navigate to your page

  [ExposeServices(typeof(UserManagement))]
  [Dependency(ReplaceServices = true)]
  public class CustomizedUserManagement : UserManagement
  {
      protected override async ValueTask SetEntityActionsAsync()
      {
          await base.SetEntityActionsAsync();
  
          var advancedEdit = new EntityAction
          {
              Text = "Advanced edit",
              Clicked = data =>
              {
                  // Navigate to your custom component/page with user Id in route/query.
                  NavigationManager.NavigateTo($"/users/advanced-edit/{data.Id}");
                  return Task.CompletedTask;
              }
          };
  
          EntityActions.Get<UserManagement>().Add(advancedEdit);
      }
  }
  

  • Build your own AdvancedEdit.razor page using an EditForm with your custom fields (Code, Address, Manager, …), load/save via IIdentityUserAppService.
  • This avoids copying large internal UI code and gives a clean, maintainable customization.

  C) Angular (Manage Profile or Users UI customization)

  • Replace specific components or tabs with your own using the public replacement APIs.
  • For Manage Profile page, you can patch a tab’s component:

  import { eAccountManageProfileTabNames, ManageProfileTabsService } from '@volo/abp.ng.account/public/config';
  
    export class AppComponent implements OnInit {
      constructor(private manageProfileTabs: ManageProfileTabsService) {}
      ngOnInit() {
        this.manageProfileTabs.patch(eAccountManageProfileTabNames.PersonalInfo, {
          component: CustomPersonalSettingsComponent,
        });
      }
    }
  

  • To send/receive extended properties, ensure you:
    • Add extra properties to IdentityUser (Domain.Shared + EFCore).
    • Apply DTO extensions on both IdentityUser DTOs and UpdateProfileDto if you want them on profile:

  ModuleExtensionConfigurationHelper.ApplyEntityConfigurationToApi(
        IdentityModuleExtensionConsts.ModuleName,
        IdentityModuleExtensionConsts.EntityNames.User,
        getApiTypes: new[] { typeof(IdentityUserDto), typeof(ProfileDto) },
        createApiTypes: new[] { typeof(IdentityUserCreateDto) },
        updateApiTypes: new[] { typeof(IdentityUserUpdateDto), typeof(UpdateProfileDto) }
      );
  

  • In your Angular component, include the extra properties in the update payload (ExtraProperties or mapped fields, depending on your extension configuration).

  D) Profile Management page (MVC) contributions instead of replacing everything

  • You can add/remove tabs via ProfileManagementPageOptions:
    • Add a new tab:

  public class MyProfileManagementPageContributor : IProfileManagementPageContributor
      {
          public Task ConfigureAsync(ProfileManagementPageCreationContext context)
          {
              context.Groups.Add(new ProfileManagementPageGroup(
                  "my-account-profile",
                  "My account profile",
                  typeof(MyPictureManagementGroupViewComponent)
              ));
              return Task.CompletedTask;
          }
      }
  
      public class MyModule : AbpModule
      {
         public override void ConfigureServices(ServiceConfigurationContext context)
         {
             Configure<ProfileManagementPageOptions>(options =>
             {
                 options.Contributors.Add(new MyProfileManagementPageContributor());
             });
         }
      }
  

  • You can also remove an existing group (tab) by id, then add your replacement tab.

  E) When moving from modal to page-based editing (MVC)

  • Create a dedicated Edit.cshtml Razor Page for Users and its PageModel to show an EditForm with your custom fields.
  • Update actions in Index.cshtml to navigate to your Edit page instead of opening ABP modals (change JavaScript/modal triggers to an anchor link or button targeting your new page).
  • Keep using IIdentityUserAppService to load/save user data, including ExtraProperties.

  Key reminders

  • Always register DTO extension mappings for any API DTO you use for UI operations (IdentityUserDto, IdentityUserCreateDto, IdentityUserUpdateDto, ProfileDto, UpdateProfileDto).
  • For MVC Razor replacement, ensure file paths match the original embedded resource path so your file overrides the embedded one.
  • For Blazor, prefer extending entity actions and custom pages over copying internal components to reduce maintenance effort.

  2. Sources

  • Identity module Users page (reference for overriding embedded Razor Page): https://github.com/abpframework/abp/blob/dev/modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Users/Index.cshtml

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  maliming created 4 hours ago

  Support Team Fullstack Developer

  hi

  You can reply here: https://abp.io/support/questions/10098/How-to-change-the-UI-for-user-management

  Current question credit refunded.

  Thanks.

  Save Cancel