Customize the 'Add New User' form #7071

4 Answer(s)

• 

  1

  yusuf.cirak created 2 years ago

  Angular Developer

  Hi,

  We haven't implemented the functionality for replacing for the forms and modals.

  I can suggest two solutions.

  1 - Don't use the modal, implement page solution for your add/edit operations. We have a tutorial here. 2 - Replace the component entirely with your additional implementations. I think you can add some code to our users component. You can check our component here.

  I hope these possible solutions solves your issues.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  dev@veek.vn created 2 years ago

  Hi Yusuf,

  Thanks for your help! However, I can't find IdentityRoleDto and GetIdentityUsersInput from @abp/ng.identity/proxy, nor EXTENSIONS_IDENTIFIER and FormPropData from @abp/ng.components/extensible.

  What should I do to import these into our project?

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  yusuf.cirak created 2 years ago

  Angular Developer

  Hi,

  Don't worry about those imports in case you're not changing any fuctionality of retrieving datas from services.

  I got some errors while trying to extend UsersComponent so i leave you a code example below.

  First, you need to add your component to be replaced at initial time, via ReplaceableCompnonentsService:

  const REPLACED_COMPONENTS_PROVIDER = [
    {
      provide: APP_INITIALIZER,
      useFactory: () => {
        const service = inject(ReplaceableComponentsService);
        return () => {
          service.add({ component: ExtendedUsersComponent, key: eIdentityComponents.Users });
        };
      },
      multi: true,
    },
  ];
  

  Your component can look like this:

  import {
    CoreModule,
    ListService,
    LocalizationModule,
    ReplaceableTemplateDirective,
  } from '@abp/ng.core';
  import { PermissionManagementModule } from '@abp/ng.permission-management';
  import { ThemeSharedModule } from '@abp/ng.theme.shared';
  import { ExtensibleModule, EXTENSIONS_IDENTIFIER } from '@abp/ng.components/extensible';
  import { Component } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { eIdentityComponents, UsersComponent } from '@abp/ng.identity';
  import { PageModule } from '@abp/ng.components/page';
  import { CommonModule } from '@angular/common';
  import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
  
  @Component({
    selector: 'app-users',
    templateUrl: './users.component.html',
    standalone: true,
    imports: [
      ExtensibleModule,
      PageModule,
      LocalizationModule,
      ThemeSharedModule,
      CommonModule,
      FormsModule,
      PermissionManagementModule,
      ReplaceableTemplateDirective,
      CoreModule,
      NgbNavModule,
    ],
    providers: [
      ListService,
      {
        provide: UsersComponent,
        useExisting: ExtendedUsersComponent,
      },
      {
        provide: EXTENSIONS_IDENTIFIER,
        useValue: eIdentityComponents.Users,
      },
    ],
  })
  export class ExtendedUsersComponent extends UsersComponent {}
  
  

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  dev@veek.vn created 2 years ago

  Thanks for your support i will try this

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel