From 1a77b3e980669ba1eaabf024c8f7f2fbfcdb7076 Mon Sep 17 00:00:00 2001 From: sumeyye Date: Wed, 9 Jul 2025 17:10:35 +0300 Subject: [PATCH] update: extension pages --- .../angular/data-table-column-extensions.md | 16 ++-- .../ui/angular/dynamic-form-extensions.md | 18 ++-- .../ui/angular/entity-action-extensions.md | 93 ++++++++++--------- .../ui/angular/extensions-overall.md | 4 +- .../ui/angular/page-toolbar-extensions.md | 32 +++---- 5 files changed, 83 insertions(+), 80 deletions(-) diff --git a/docs/en/framework/ui/angular/data-table-column-extensions.md b/docs/en/framework/ui/angular/data-table-column-extensions.md index 89e9000119..cae4695e74 100644 --- a/docs/en/framework/ui/angular/data-table-column-extensions.md +++ b/docs/en/framework/ui/angular/data-table-column-extensions.md @@ -14,7 +14,7 @@ In this example, we will add a "Name" column and display the value of the `name` ### Step 1. Create Entity Prop Contributors -The following code prepares a constant named `identityEntityPropContributors`, ready to be imported and used in your root module: +The following code prepares a constant named `identityEntityPropContributors`, ready to be imported and used in your root app configuration: ```js // src/app/entity-prop-contributors.ts @@ -52,22 +52,22 @@ The list of props, conveniently named as `propList`, is a **doubly linked list** ### Step 2. Import and Use Entity Prop Contributors -Import `identityEntityPropContributors` in your routing module and pass it to the static `forLazy` method of `IdentityModule` as seen below: +Import `identityEntityPropContributors` in your routing configuration and pass it to the static `createRoutes` method of `identity` routes as seen below: ```js -// src/app/app-routing.module.ts +// src/app/app.routes.ts // other imports import { identityEntityPropContributors } from './entity-prop-contributors'; -const routes: Routes = [ +export const APP_ROUTES: Routes = [ // other routes { path: 'identity', loadChildren: () => - import('@abp/ng.identity').then(m => - m.IdentityModule.forLazy({ + import('@abp/ng.identity').then(c => + c.createRoutes({ entityPropContributors: identityEntityPropContributors, }) ), @@ -77,7 +77,7 @@ const routes: Routes = [ ]; ``` -That is it, `nameProp` entity prop will be added, and you will see the "Name" column next to the usernames on the grid in the users page (`UsersComponent`) of the `IdentityModule`. +That is it, `nameProp` entity prop will be added, and you will see the "Name" column next to the usernames on the grid in the users page (`UsersComponent`) of the `identity` package. ## How to Render Custom HTML in Cells @@ -318,7 +318,7 @@ export function reorderUserContributors( ### EntityPropContributorCallback\ -`EntityPropContributorCallback` is the type that you can pass as entity prop contributor callbacks to static `forLazy` methods of the modules. +`EntityPropContributorCallback` is the type that you can pass as entity prop contributor callbacks to static `createRoutes` methods of the packages. ```js export function isLockedOutPropContributor( diff --git a/docs/en/framework/ui/angular/dynamic-form-extensions.md b/docs/en/framework/ui/angular/dynamic-form-extensions.md index 0c7f5e41f7..d9616defca 100644 --- a/docs/en/framework/ui/angular/dynamic-form-extensions.md +++ b/docs/en/framework/ui/angular/dynamic-form-extensions.md @@ -15,7 +15,7 @@ In this example, we will add a "Date of Birth" field in the user management page ### Step 1. Create Form Prop Contributors -The following code prepares two constants named `identityCreateFormPropContributors` and `identityEditFormPropContributors`, ready to be imported and used in your root module: +The following code prepares two constants named `identityCreateFormPropContributors` and `identityEditFormPropContributors`, ready to be imported and used in your root app configuration: ```js // src/app/form-prop-contributors.ts @@ -57,10 +57,10 @@ The list of props, conveniently named as `propList`, is a **doubly linked list** ### Step 2. Import and Use Form Prop Contributors -Import `identityCreateFormPropContributors` and `identityEditFormPropContributors` in your routing module and pass it to the static `forLazy` method of `IdentityModule` as seen below: +Import `identityCreateFormPropContributors` and `identityEditFormPropContributors` in your routing configuration and pass it to the static `createRoutes` method of `identity` package as seen below: ```js -// src/app/app-routing.module.ts +// src/app/app.routes.ts // other imports import { @@ -68,14 +68,14 @@ import { identityEditFormPropContributors, } from './form-prop-contributors'; -const routes: Routes = [ +export const APP_ROUTES: Routes = [ // other routes { path: 'identity', loadChildren: () => - import('@abp/ng.identity').then(m => - m.IdentityModule.forLazy({ + import('@abp/ng.identity').then(c => + c.createRoutes({ createFormPropContributors: identityCreateFormPropContributors, editFormPropContributors: identityEditFormPropContributors, }) @@ -86,7 +86,7 @@ const routes: Routes = [ ]; ``` -That is it, `birthdayProp` form prop will be added, and you will see the datepicker for the "Date of Birth" field right before the "Email address" in the forms of the users page in the `IdentityModule`. +That is it, `birthdayProp` form prop will be added, and you will see the datepicker for the "Date of Birth" field right before the "Email address" in the forms of the users page in the `identity` package. ## Object Extensions @@ -309,7 +309,7 @@ export function reorderUserContributors( ### CreateFormPropContributorCallback\ -`CreateFormPropContributorCallback` is the type that you can pass as **create form** prop contributor callbacks to static `forLazy` methods of the modules. +`CreateFormPropContributorCallback` is the type that you can pass as **create form** prop contributor callbacks to static `createRoutes` methods of the packages. ```js export function myPropCreateContributor( @@ -326,7 +326,7 @@ export const identityCreateFormPropContributors = { ### EditFormPropContributorCallback\ -`EditFormPropContributorCallback` is the type that you can pass as **edit form** prop contributor callbacks to static `forLazy` methods of the modules. +`EditFormPropContributorCallback` is the type that you can pass as **edit form** prop contributor callbacks to static `createRoutes` methods of the packages. ```js export function myPropEditContributor( diff --git a/docs/en/framework/ui/angular/entity-action-extensions.md b/docs/en/framework/ui/angular/entity-action-extensions.md index b65e23d6b7..4bd11caad0 100644 --- a/docs/en/framework/ui/angular/entity-action-extensions.md +++ b/docs/en/framework/ui/angular/entity-action-extensions.md @@ -14,7 +14,7 @@ In this example, we will add a "Click Me!" action and alert the current row's `u ### Step 1. Create Entity Action Contributors -The following code prepares a constant named `identityEntityActionContributors`, ready to be imported and used in your root module: +The following code prepares a constant named `identityEntityActionContributors`, ready to be imported and used in your root app configuration: ```ts // src/app/entity-action-contributors.ts @@ -49,22 +49,22 @@ The list of actions, conveniently named as `actionList`, is a **doubly linked li ### Step 2. Import and Use Entity Action Contributors -Import `identityEntityActionContributors` in your routing module and pass it to the static `forLazy` method of `IdentityModule` as seen below: +Import `identityEntityActionContributors` in your routing configuration and pass it to the static `configureRoutes` of `identity` package as seen below: ```js -// src/app/app-routing.module.ts +// src/app/app.routes.ts // other imports import { identityEntityActionContributors } from './entity-action-contributors'; -const routes: Routes = [ +export const APP_ROUTES: Routes = [ // other routes { path: 'identity', loadChildren: () => - import('@abp/ng.identity').then(m => - m.IdentityModule.forLazy({ + import('@abp/ng.identity').then(c => + c.createRoutes({ entityActionContributors: identityEntityActionContributors, }) ), @@ -74,11 +74,11 @@ const routes: Routes = [ ]; ``` -That is it, `alertUserName` entity action will be added as the last action on the grid dropdown in the "Users" page (`UsersComponent`) of the `IdentityModule`. +That is it, `alertUserName` entity action will be added as the last action on the grid dropdown in the "Users" page (`UsersComponent`) of the `identity` package. ## How to Place a Custom Modal and Trigger It by Entity Actions -Let's employ dependency injection to extend the functionality of `IdentityModule` and add a quick view action for the User entity. We will take a lazy-loaded approach. +Let's employ dependency injection to extend the functionality of `identity` package and add a quick view action for the User entity. We will take a lazy-loaded approach. Entity Action Extension Example: Custom Modal @@ -117,16 +117,27 @@ Let's employ dependency injection to extend the functionality of `IdentityModule }; ``` -3. Create a parent component to the identity module. +3. Create a parent component to the identity package. ```js // src/app/identity-extended/identity-extended.component.ts - import { IdentityUserDto } from '@abp/ng.identity'; + import { LocalizationPipe } from '@abp/ng.core'; + import { IdentityUserDto } from '@abp/ng.identity/proxy'; + import { ModalCloseDirective, ModalComponent } from '@abp/ng.theme.shared'; + import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; + import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-identity-extended', templateUrl: './identity-extended.component.html', + imports: [ + CommonModule, + ModalComponent, + RouterOutlet, + LocalizationPipe, + ModalCloseDirective + ] }) export class IdentityExtendedComponent { isUserQuickViewVisible: boolean; @@ -184,55 +195,47 @@ Let's employ dependency injection to extend the functionality of `IdentityModule ``` -5. Add a module for the component and load `IdentityModule` as seen below: +5. Add a routing configuration for the component as seen below: ```js - // src/app/identity-extended/identity-extended.module.ts + // src/app/identity-extended/identity-extended.routes.ts - import { CoreModule } from '@abp/ng.core'; - import { IdentityModule } from '@abp/ng.identity'; - import { ThemeSharedModule } from '@abp/ng.theme.shared'; - import { NgModule } from '@angular/core'; - import { RouterModule } from '@angular/router'; - import { identityEntityActionContributors } from './entity-action-contributors'; + import { Routes } from '@angular/router'; import { IdentityExtendedComponent } from './identity-extended.component'; + import { identityEntityActionContributors } from './entity-action-contributors'; - @NgModule({ - imports: [ - CoreModule, - ThemeSharedModule, - RouterModule.forChild([ + export const createExtendedIdentityRoutes = (): Routes => [ + { + path: '', + component: IdentityExtendedComponent, + children: [ { path: '', - component: IdentityExtendedComponent, - children: [ - { - path: '', - loadChildren: () => - IdentityModule.forLazy({ - entityActionContributors: identityEntityActionContributors, - }), - }, - ], + loadChildren: () => + import('@abp/ng.identity').then(c => + c.createRoutes({ + entityActionContributors: identityEntityActionContributors, + }), + ), }, - ]), - ], - declarations: [IdentityExtendedComponent], - }) - export class IdentityExtendedModule {} + ], + }, + ]; ``` -6. Load `IdentityExtendedModule` instead of `IdentityModule` in your root routing module. +6. Use `createExtendedIdentityRoutes` instead of the `createRoutes` function in your root routing configuration. +Since the routes are already lazily loaded in the `createExtendedIdentityRoutes` function, you can directly use its children array to avoid an unnecessary additional lazy-loading call. + ```js - // src/app/app-routing.module.ts + // src/app/app.routes.ts - const routes: Routes = [ + export const APP_ROUTES: Routes = [ // other routes { path: 'identity', - loadChildren: () => - import('./identity-extended/identity-extended.module') - .then(m => m.IdentityExtendedModule), + children: [ + ...createExtendedIdentityRoutes() + ], }, // other routes @@ -387,7 +390,7 @@ export function reorderUserContributors( ### EntityActionContributorCallback\ -`EntityActionContributorCallback` is the type that you can pass as entity action contributor callbacks to static `forLazy` methods of the modules. +`EntityActionContributorCallback` is the type that you can pass as entity action contributor callbacks to static `createRoutes` methods of the packages. ```js // lockUserContributor should have EntityActionContributorCallback type diff --git a/docs/en/framework/ui/angular/extensions-overall.md b/docs/en/framework/ui/angular/extensions-overall.md index 4776198001..7fbf81126d 100644 --- a/docs/en/framework/ui/angular/extensions-overall.md +++ b/docs/en/framework/ui/angular/extensions-overall.md @@ -21,8 +21,8 @@ Using [ngx-datatable](https://github.com/swimlane/ngx-datatable) in extensible t [actionsColumnWidth]="38" [actionsTemplate]="customAction" [list]="list" - (tableActivate)="onTableSelect($event)" > - + (tableActivate)="onTableSelect($event)" + /> ```` * ` actionsText : ` ** Column name of action column. **Type** : string diff --git a/docs/en/framework/ui/angular/page-toolbar-extensions.md b/docs/en/framework/ui/angular/page-toolbar-extensions.md index 74f79178dd..63f1196459 100644 --- a/docs/en/framework/ui/angular/page-toolbar-extensions.md +++ b/docs/en/framework/ui/angular/page-toolbar-extensions.md @@ -14,7 +14,7 @@ In this example, we will add a "Click Me!" action and log `userName` of all user ### Step 1. Create Toolbar Action Contributors -The following code prepares a constant named `identityToolbarActionContributors`, ready to be imported and used in your root module: +The following code prepares a constant named `identityToolbarActionContributors`, ready to be imported and used in your root app configuration: ```js // src/app/toolbar-action-contributors.ts @@ -53,22 +53,22 @@ The list of actions, conveniently named as `actionList`, is a **doubly linked li ### Step 2. Import and Use Toolbar Action Contributors -Import `identityToolbarActionContributors` in your routing module and pass it to the static `forLazy` method of `IdentityModule` as seen below: +Import `identityToolbarActionContributors` in your routing module and pass it to the static `createRoutes` method of `identity` package as seen below: ```js -// src/app/app-routing.module.ts +// src/app/app.routes.ts // other imports import { identityToolbarActionContributors } from './toolbar-action-contributors'; -const routes: Routes = [ +export const APP_ROUTES: Routes = [ // other routes { path: 'identity', loadChildren: () => - import('@abp/ng.identity').then(m => - m.IdentityModule.forLazy({ + import('@abp/ng.identity').then(c => + c.createRoutes({ toolbarActionContributors: identityToolbarActionContributors, }) ), @@ -78,7 +78,7 @@ const routes: Routes = [ ]; ``` -That is it, `logUserNames` toolbar action will be added as the first action on the page toolbar in the users page (`UsersComponent`) of the `IdentityModule`. +That is it, `logUserNames` toolbar action will be added as the first action on the page toolbar in the users page (`UsersComponent`) of the `identity` package. ## How to Add a Custom Component to Page Toolbar @@ -93,9 +93,9 @@ We need to have a component before we can pass it to the toolbar action contribu ```js // src/app/click-me-button.component.ts +import { Component, Inject } from '@angular/core'; import { IdentityUserDto } from '@abp/ng.identity/proxy'; import { ActionData, EXTENSIONS_ACTION_DATA } from '@abp/ng.components/extensible'; -import { Component, Inject } from '@angular/core'; @Component({ selector: 'app-click-me-button', @@ -120,7 +120,7 @@ Here, `EXTENSIONS_ACTION_DATA` token provides us the context from the page toolb ### Step 2. Create Toolbar Action Contributors -The following code prepares a constant named `identityToolbarActionContributors`, ready to be imported and used in your root module. When `ToolbarComponent` is used instead of `ToolbarAction`, we can pass a component in: +The following code prepares a constant named `identityToolbarActionContributors`, ready to be imported and used in your root app configuration. When `ToolbarComponent` is used instead of `ToolbarAction`, we can pass a component in: ```js // src/app/toolbar-action-contributors.ts @@ -156,22 +156,22 @@ The list of actions, conveniently named as `actionList`, is a **doubly linked li ### Step 3. Import and Use Toolbar Action Contributors -Import `identityToolbarActionContributors` in your routing module and pass it to the static `forLazy` method of `IdentityModule` as seen below. +Import `identityToolbarActionContributors` in your routing configuration and pass it to the static `createRoutes` method of `identity` package as seen below. ```js -// src/app/app-routing.module.ts +// src/app/app.routes.ts // other imports import { identityToolbarActionContributors } from './toolbar-action-contributors'; -const routes: Routes = [ +export const APP_ROUTES: Routes = [ // other routes { path: 'identity', loadChildren: () => - import('@abp/ng.identity').then(m => - m.IdentityModule.forLazy({ + import('@abp/ng.identity').then(c => + c.createRoutes({ toolbarActionContributors: identityToolbarActionContributors, }) ), @@ -181,7 +181,7 @@ const routes: Routes = [ ]; ``` -That is it, `logUserNames` toolbar action will be added as the first action on the page toolbar in the users page (`UsersComponent`) of the `IdentityModule` and it will be triggered by a custom button, i.e. `ClickMeButtonComponent`. Please note that **component projection is not limited to buttons** and you may use other UI components. +That is it, `logUserNames` toolbar action will be added as the first action on the page toolbar in the users page (`UsersComponent`) of the `identity` package and it will be triggered by a custom button, i.e. `ClickMeButtonComponent`. Please note that **component projection is not limited to buttons** and you may use other UI components. ## How to Place a Custom Modal and Trigger It by Toolbar Actions @@ -380,7 +380,7 @@ export const identityEntityActionContributors = { ### ToolbarActionContributorCallback\ -`ToolbarActionContributorCallback` is the type that you can pass as toolbar action contributor callbacks to static `forLazy` methods of the modules. +`ToolbarActionContributorCallback` is the type that you can pass as toolbar action contributor callbacks to static `createRoutes` methods of the packages. ```js // exportUsersContributor should have ToolbarActionContributorCallback type