tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

update: extension pages

pull/23285/head
sumeyye 9 months ago
parent
440e04a8a7
commit
1a77b3e980
5 changed files with 83 additions and 80 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      docs/en/framework/ui/angular/data-table-column-extensions.md
  2. 18
      docs/en/framework/ui/angular/dynamic-form-extensions.md
  3. 93
      docs/en/framework/ui/angular/entity-action-extensions.md
  4. 4
      docs/en/framework/ui/angular/extensions-overall.md
  5. 32
      docs/en/framework/ui/angular/page-toolbar-extensions.md

16
docs/en/framework/ui/angular/data-table-column-extensions.md
View File

@ -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 ### 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 ```js
// src/app/entity-prop-contributors.ts // 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 ### 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 ```js
// src/app/app-routing.module.ts // src/app/app.routes.ts
// other imports // other imports
import { identityEntityPropContributors } from './entity-prop-contributors'; import { identityEntityPropContributors } from './entity-prop-contributors';
const routes: Routes = [ export const APP_ROUTES: Routes = [
// other routes // other routes
{ {
path: 'identity', path: 'identity',
loadChildren: () => loadChildren: () =>
import('@abp/ng.identity').then(m => import('@abp/ng.identity').then(c =>
m.IdentityModule.forLazy({ c.createRoutes({
entityPropContributors: identityEntityPropContributors, 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 ## How to Render Custom HTML in Cells
@ -318,7 +318,7 @@ export function reorderUserContributors(
### EntityPropContributorCallback\<R = any\> ### EntityPropContributorCallback\<R = any\>
`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 ```js
export function isLockedOutPropContributor( export function isLockedOutPropContributor(

18
docs/en/framework/ui/angular/dynamic-form-extensions.md
View File

@ -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 ### 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 ```js
// src/app/form-prop-contributors.ts // 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 ### 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 ```js
// src/app/app-routing.module.ts // src/app/app.routes.ts
// other imports // other imports
import { import {
@ -68,14 +68,14 @@ import {
identityEditFormPropContributors, identityEditFormPropContributors,
} from './form-prop-contributors'; } from './form-prop-contributors';
const routes: Routes = [ export const APP_ROUTES: Routes = [
// other routes // other routes
{ {
path: 'identity', path: 'identity',
loadChildren: () => loadChildren: () =>
import('@abp/ng.identity').then(m => import('@abp/ng.identity').then(c =>
m.IdentityModule.forLazy({ c.createRoutes({
createFormPropContributors: identityCreateFormPropContributors, createFormPropContributors: identityCreateFormPropContributors,
editFormPropContributors: identityEditFormPropContributors, 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 ## Object Extensions
@ -309,7 +309,7 @@ export function reorderUserContributors(
### CreateFormPropContributorCallback\<R = any\> ### CreateFormPropContributorCallback\<R = any\>
`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 ```js
export function myPropCreateContributor( export function myPropCreateContributor(
@ -326,7 +326,7 @@ export const identityCreateFormPropContributors = {
### EditFormPropContributorCallback\<R = any\> ### EditFormPropContributorCallback\<R = any\>
`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 ```js
export function myPropEditContributor( export function myPropEditContributor(

93
docs/en/framework/ui/angular/entity-action-extensions.md
View File

@ -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 ### 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 ```ts
// src/app/entity-action-contributors.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 ### 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 ```js
// src/app/app-routing.module.ts // src/app/app.routes.ts
// other imports // other imports
import { identityEntityActionContributors } from './entity-action-contributors'; import { identityEntityActionContributors } from './entity-action-contributors';
const routes: Routes = [ export const APP_ROUTES: Routes = [
// other routes // other routes
{ {
path: 'identity', path: 'identity',
loadChildren: () => loadChildren: () =>
import('@abp/ng.identity').then(m => import('@abp/ng.identity').then(c =>
m.IdentityModule.forLazy({ c.createRoutes({
entityActionContributors: identityEntityActionContributors, 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 ## 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.
<img alt="Entity Action Extension Example: Custom Modal" src="./images/entity-action-extensions---custom-modal.gif" width="800px" style="max-width:100%"> <img alt="Entity Action Extension Example: Custom Modal" src="./images/entity-action-extensions---custom-modal.gif" width="800px" style="max-width:100%">
@ -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 ```js
// src/app/identity-extended/identity-extended.component.ts // 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 { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({ @Component({
selector: 'app-identity-extended', selector: 'app-identity-extended',
templateUrl: './identity-extended.component.html', templateUrl: './identity-extended.component.html',
imports: [
CommonModule,
ModalComponent,
RouterOutlet,
LocalizationPipe,
ModalCloseDirective
]
}) })
export class IdentityExtendedComponent { export class IdentityExtendedComponent {
isUserQuickViewVisible: boolean; isUserQuickViewVisible: boolean;
@ -184,55 +195,47 @@ Let's employ dependency injection to extend the functionality of `IdentityModule
</abp-modal> </abp-modal>
``` ```
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 ```js
// src/app/identity-extended/identity-extended.module.ts // src/app/identity-extended/identity-extended.routes.ts
import { CoreModule } from '@abp/ng.core'; import { Routes } from '@angular/router';
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 { IdentityExtendedComponent } from './identity-extended.component'; import { IdentityExtendedComponent } from './identity-extended.component';
import { identityEntityActionContributors } from './entity-action-contributors';
@NgModule({ export const createExtendedIdentityRoutes = (): Routes => [
imports: [ {
CoreModule, path: '',
ThemeSharedModule, component: IdentityExtendedComponent,
RouterModule.forChild([ children: [
{ {
path: '', path: '',
component: IdentityExtendedComponent, loadChildren: () =>
children: [ import('@abp/ng.identity').then(c =>
{ c.createRoutes({
path: '', entityActionContributors: identityEntityActionContributors,
loadChildren: () => }),
IdentityModule.forLazy({ ),
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 ```js
// src/app/app-routing.module.ts // src/app/app.routes.ts
const routes: Routes = [ export const APP_ROUTES: Routes = [
// other routes // other routes
{ {
path: 'identity', path: 'identity',
loadChildren: () => children: [
import('./identity-extended/identity-extended.module') ...createExtendedIdentityRoutes()
.then(m => m.IdentityExtendedModule), ],
}, },
// other routes // other routes
@ -387,7 +390,7 @@ export function reorderUserContributors(
### EntityActionContributorCallback\<R = any\> ### EntityActionContributorCallback\<R = any\>
`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 ```js
// lockUserContributor should have EntityActionContributorCallback<IdentityUserDto> type // lockUserContributor should have EntityActionContributorCallback<IdentityUserDto> type

4
docs/en/framework/ui/angular/extensions-overall.md
View File

@ -21,8 +21,8 @@ Using [ngx-datatable](https://github.com/swimlane/ngx-datatable) in extensible t
[actionsColumnWidth]="38" [actionsColumnWidth]="38"
[actionsTemplate]="customAction" [actionsTemplate]="customAction"
[list]="list" [list]="list"
(tableActivate)="onTableSelect($event)" > (tableActivate)="onTableSelect($event)"
</abp-extensible-table> />
```` ````
* ` actionsText : ` ** Column name of action column. **Type** : string * ` actionsText : ` ** Column name of action column. **Type** : string

32
docs/en/framework/ui/angular/page-toolbar-extensions.md
View File

@ -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 ### 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 ```js
// src/app/toolbar-action-contributors.ts // 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 ### 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 ```js
// src/app/app-routing.module.ts // src/app/app.routes.ts
// other imports // other imports
import { identityToolbarActionContributors } from './toolbar-action-contributors'; import { identityToolbarActionContributors } from './toolbar-action-contributors';
const routes: Routes = [ export const APP_ROUTES: Routes = [
// other routes // other routes
{ {
path: 'identity', path: 'identity',
loadChildren: () => loadChildren: () =>
import('@abp/ng.identity').then(m => import('@abp/ng.identity').then(c =>
m.IdentityModule.forLazy({ c.createRoutes({
toolbarActionContributors: identityToolbarActionContributors, 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 ## 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 ```js
// src/app/click-me-button.component.ts // src/app/click-me-button.component.ts
import { Component, Inject } from '@angular/core';
import { IdentityUserDto } from '@abp/ng.identity/proxy'; import { IdentityUserDto } from '@abp/ng.identity/proxy';
import { ActionData, EXTENSIONS_ACTION_DATA } from '@abp/ng.components/extensible'; import { ActionData, EXTENSIONS_ACTION_DATA } from '@abp/ng.components/extensible';
import { Component, Inject } from '@angular/core';
@Component({ @Component({
selector: 'app-click-me-button', 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 ### 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 ```js
// src/app/toolbar-action-contributors.ts // 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 ### 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 ```js
// src/app/app-routing.module.ts // src/app/app.routes.ts
// other imports // other imports
import { identityToolbarActionContributors } from './toolbar-action-contributors'; import { identityToolbarActionContributors } from './toolbar-action-contributors';
const routes: Routes = [ export const APP_ROUTES: Routes = [
// other routes // other routes
{ {
path: 'identity', path: 'identity',
loadChildren: () => loadChildren: () =>
import('@abp/ng.identity').then(m => import('@abp/ng.identity').then(c =>
m.IdentityModule.forLazy({ c.createRoutes({
toolbarActionContributors: identityToolbarActionContributors, 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 ## How to Place a Custom Modal and Trigger It by Toolbar Actions
@ -380,7 +380,7 @@ export const identityEntityActionContributors = {
### ToolbarActionContributorCallback\<R = any\> ### ToolbarActionContributorCallback\<R = any\>
`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 ```js
// exportUsersContributor should have ToolbarActionContributorCallback<IdentityUserDto[]> type // exportUsersContributor should have ToolbarActionContributorCallback<IdentityUserDto[]> type

Write Preview
Loading…
Cancel
Save