Open Closed

Customize page Users #126


0
edelivery created

Hi all! I want to add action to page Users please tell me how to made it?


10 Answer(s)
  • 0
    ididsbury created

    See Entity Action doc.

  • 0
    edelivery created

    thanks @ididsbury! I have created action. I want show modal when click User Salesforce Hierarchy as below. Please help me

  • 0
    alper created
    Support Team

    is it Angular?

  • 0
    edelivery created

    i'm using angular

  • 0
    alper created
    Support Team
  • 0
    edelivery created

    I have defined abp-modal html as below

    how to embed it into Usercomponent

    Thanks

  • 0
    armanozak created
    Support Team

    Hi,

    Before we begin, I would like point out that the openModal method of UsersComponent is only for the user form, so we cannot do what you want using that particular method. There are two ways to do it: A quick one and an elaborate one.

    The Quick Solution

    1. Place the new modal (for Salesforce) inside AppComponent template.
    2. Add the following inside your AppComponent class:
    isModalOpen: boolean;
    
    openModal() {
      this.isModalOpen = true;
    }
    
    1. Change the entity action contributor to this:
    const modal = new EntityAction<Identity.UserItem>({
      text: 'User Salesforce Hierarchy',
      action: data => {
        const component = data.getInjected(AppComponent);
        component.openModal();
      },
    });
    

    That should work. However, there is a longer but lazy-loading solution, and we are going to use NGXS for it.

    The Elaborate Solution

    1. Create a folder called identity-extended inside your app folder.
    2. Create a file called identity-popups.store.ts in it.
    3. Insert the following code in the new file:
    import { Action, Selector, State, StateContext } from '@ngxs/store';
    
    export class ShowUserSalesforceModal {
      static readonly type = '[IdentityPopups] ShowModal';
      constructor(public readonly payload: boolean) {}
    }
    
    @State<IdentityPopupsStateModel>({
      name: 'IdentityPopups',
      defaults: {
        showUserSalesforceModal: false,
      },
    })
    export class IdentityPopupsState {
      @Selector()
      static isUserSalesforceModalVisible(state: IdentityPopupsStateModel) {
        return state.showUserSalesforceModal;
      }
    
      @Action(ShowUserSalesforceModal)
      toggleModal(
        context: StateContext<IdentityPopupsStateModel>,
        { payload }: ShowUserSalesforceModal,
      ) {
        context.patchState({ showUserSalesforceModal: payload });
      }
    }
    
    interface IdentityPopupsStateModel {
      showUserSalesforceModal: boolean;
    }
    
    1. Create a file called identity-extended.module.ts in the same folder.
    2. Insert the following code in the new file:
    import { CoreModule } from '@abp/ng.core';
    import { ThemeSharedModule } from '@abp/ng.theme.shared';
    import { Component, NgModule } from '@angular/core';
    import { RouterModule } from '@angular/router';
    import { NgxsModule, Select, Store } from '@ngxs/store';
    import { Observable } from 'rxjs';
    import { IdentityPopupsState, ShowUserSalesforceModal } from './identity-popups.store';
    
    @Component({
      template: `
        <router-outlet></router-outlet>
        <router-outlet name="popup"></router-outlet>
      `,
    })
    export class IdentityOutletComponent {}
    
    @Component({
      template: `
        <abp-modal [visible]="isUserSalesforceModalVisible$ | async" (disappear)="onModalDisappear()">
    
          <!-- INSERT YOUR MODAL CONTENT HERE (starting from line 2) -->
    
        </abp-modal>
      `,
    })
    export class IdentityPopupsComponent {
      @Select(IdentityPopupsState.isUserSalesforceModalVisible)
      isUserSalesforceModalVisible$: Observable<boolean>;
    
      constructor(private store: Store) {}
    
      onModalDisappear() {
        this.store.dispatch(new ShowUserSalesforceModal(false));
      }
    }
    
    @NgModule({
      declarations: [IdentityPopupsComponent, IdentityOutletComponent],
      imports: [
        CoreModule,
        ThemeSharedModule,
        NgxsModule.forFeature([IdentityPopupsState]),
        RouterModule.forChild([
          {
            path: '',
            component: IdentityOutletComponent,
            children: [
              {
                path: '',
                outlet: 'popup',
                component: IdentityPopupsComponent,
              },
              {
                path: '',
                loadChildren: () => import('@volo/abp.ng.identity').then(m => m.IdentityModule),
              },
            ],
          },
        ]),
      ],
    })
    export class IdentityExtendedModule {}
    
    1. Change the identity path in your AppRoutingModule to this:
    {
      path: 'identity',
      loadChildren: () =>
        import('./identity-extended/identity-extended.module').then(m => m.IdentityExtendedModule),
    },
    
    1. Change the entity action contributor to this:
    const modal = new EntityAction<Identity.UserItem>({
      text: 'User Salesforce Hierarchy',
      action: data => {
        const store = data.getInjected(Store);
        store.dispatch(new ShowUserSalesforceModal(true));
      },
    });
    

    It should now be working well with lazy-loading.

    P.S. You may split the files as you wish. I have described them as one file just to make it quicker to explain.

  • 0
    edelivery created

    that's perfect! Thank you so much

  • 0
    edelivery created

    Hi armanozak! I upgraded to version 3.1.0 and import IdentityConfigModule like this but when run project I have error

  • 0
    armanozak created
    Support Team

    Hi edelivery,

    This is a completely different topic, so please open a new ticket next time.

    As of v3, lazy loading of built-in Angular modules have changed. Please refer to the migration guide for details.

    Have a nice week.