Customize page Users #126

10 उत्तर (ओं)

• 

  0

  ididsbury बनाया था 4 years ago

  See Entity Action doc.

  बचाना रद्द करना
• 

  0

  edelivery बनाया था 4 years ago

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

  बचाना रद्द करना
• 

  0

  alper बनाया था 4 years ago

  सहायता दल Director

  is it Angular?

  बचाना रद्द करना
• 

  0

  edelivery बनाया था 4 years ago

  i'm using angular

  बचाना रद्द करना
• 

  0

  alper बनाया था 4 years ago

  सहायता दल Director

  See Angular Entity Action Extensions

  बचाना रद्द करना
• 

  0

  edelivery बनाया था 4 years ago

  I have defined abp-modal html as below

  how to embed it into Usercomponent

  Thanks

  बचाना रद्द करना
• 

  0

  armanozak बनाया था 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.

  बचाना रद्द करना
• 

  0

  edelivery बनाया था 4 years ago

  that's perfect! Thank you so much

  बचाना रद्द करना
• 

  0

  edelivery बनाया था 3 years ago

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

  बचाना रद्द करना
• 

  0

  armanozak बनाया था 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.

  बचाना रद्द करना