Customize page Users #126

10 Answer(s)

• 

  0

  ididsbury created 4 years ago

  See Entity Action doc.

  Save Cancel
• 

  0

  edelivery created 3 years ago

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

  Save Cancel
• 

  0

  alper created 4 years ago

  Support Team Director

  is it Angular?

  Save Cancel
• 

  0

  edelivery created 4 years ago

  i'm using angular

  Save Cancel
• 

  0

  alper created 4 years ago

  Support Team Director

  See Angular Entity Action Extensions

  Save Cancel
• 

  0

  edelivery created 4 years ago

  I have defined abp-modal html as below

  how to embed it into Usercomponent

  Thanks

  Save Cancel
• 

  0

  armanozak created 4 years ago

  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;
  }
  

  3. 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;
  }
  

  4. Create a file called identity-extended.module.ts in the same folder.
  5. 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 {}
  

  6. Change the identity path in your AppRoutingModule to this:

  {
    path: 'identity',
    loadChildren: () =>
      import('./identity-extended/identity-extended.module').then(m => m.IdentityExtendedModule),
  },
  

  7. 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.

  Save Cancel
• 

  0

  edelivery created 4 years ago

  that's perfect! Thank you so much

  Save Cancel
• 

  0

  edelivery created 3 years ago

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

  Save Cancel
• 

  0

  armanozak created 3 years ago

  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.

  Save Cancel