mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[AAE-3493] Update the documentation to provide the proper guidance on custom forms widgets for APA and APS developers (#6158)
* * improve docs * * assets fixed * * links fixed * * versions fixed * * assets added * * fix links * Update docs/user-guide/aae-extensions.md Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com> * Update docs/user-guide/aae-extensions.md Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com> * Update docs/user-guide/aae-extensions.md Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com> * Update docs/user-guide/aae-extensions.md Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com> * Update docs/user-guide/aae-extensions.md Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com> * Update docs/user-guide/aae-extensions.md Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com> * Update docs/user-guide/aae-extensions.md Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com> * Update docs/user-guide/aae-extensions.md Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com> * Update docs/user-guide/aae-extensions.md Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com> * Update docs/user-guide/aae-extensions.md Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com> * Update docs/user-guide/aae-extensions.md Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com> * Update docs/user-guide/aae-extensions.md Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com> * Apply suggestions from code review Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com> * * example fixed * * minor changes * Make stencils document step-based Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com> Co-authored-by: Mark Hulbert <mark.hulbert@alfresco.com>
This commit is contained in:
dhrn
GitHub
@@ -18,10 +18,7 @@ _Note: it is assumed you are familiar with Alfresco Process Services (powered by
|
||||
- [How components and widgets are rendered on a Form](#how-components-and-widgets-are-rendered-on-a-form)
|
||||
- [Component type resolvers](#component-type-resolvers)
|
||||
- [Default component mappings](#default-component-mappings)
|
||||
- [Replacing default form widgets with custom components](#replacing-default-form-widgets-with-custom-components)
|
||||
- [Replacing custom stencils with custom components](#replacing-custom-stencils-with-custom-components)
|
||||
- [Creating custom stencil](#creating-custom-stencil)
|
||||
- [Creating custom widget](#creating-custom-widget)
|
||||
- [Form Extensibility for APS/AAE](#form-extensibility-for-apsaae)
|
||||
- [See Also](#see-also)
|
||||
|
||||
## How components and widgets are rendered on a Form
|
||||
@@ -102,173 +99,9 @@ formRenderingService.setComponentTypeResolver('text', customResolver, true);
|
||||
| Attach | upload | AttachWidgetComponent or [`UploadWidgetComponent`](../../lib/core/form/components/widgets/upload/upload.widget.ts) (based on metadata) |
|
||||
| N/A | N/A | [`UnknownWidgetComponent`](../../lib/core/form/components/widgets/unknown/unknown.widget.ts) |
|
||||
|
||||
## Replacing default form widgets with custom components
|
||||
|
||||
This is a short walkthrough on replacing a standard `Text` [widget](../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) with a custom component for all APS forms
|
||||
rendered within `<adf-form>` component.
|
||||
|
||||
First let's create a simple APS form with `Text` widgets:
|
||||
|
||||
|
||||
|
||||
Every custom [widget](../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) must inherit [`WidgetComponent`](../insights/components/widget.component.md) class in order to function properly:
|
||||
|
||||
```ts
|
||||
import { Component } from '@angular/core';
|
||||
import { WidgetComponent } from '@alfresco/adf-core';
|
||||
|
||||
@Component({
|
||||
selector: 'custom-editor',
|
||||
template: `
|
||||
<div style="color: red">Look, I'm a custom editor!</div>
|
||||
`
|
||||
})
|
||||
export class CustomEditorComponent extends WidgetComponent {}
|
||||
```
|
||||
|
||||
Now you will need to add it to the application module or any custom module that is imported into the application one:
|
||||
|
||||
```ts
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CustomEditorComponent } from './custom-editor.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [ CustomEditorComponent ],
|
||||
exports: [ CustomEditorComponent ]
|
||||
})
|
||||
export class CustomEditorsModule {}
|
||||
```
|
||||
|
||||
Every custom [widget](../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) should be added into the following collections: `declarations`, `exports`.
|
||||
|
||||
If you decided to store custom widgets in a separate dedicated module (and optionally as separate redistributable library)
|
||||
don't forget to import it into your main application one:
|
||||
|
||||
```ts
|
||||
@NgModule({
|
||||
imports: [
|
||||
// ...
|
||||
CustomEditorsModule
|
||||
// ...
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
export class AppModule {}
|
||||
```
|
||||
|
||||
Now you can import [`FormRenderingService`](../core/services/form-rendering.service.md) in any of your Views and override default mapping similar to the following:
|
||||
|
||||
```ts
|
||||
import { Component } from '@angular/core';
|
||||
import { CustomEditorComponent } from './custom-editor.component';
|
||||
|
||||
@Component({...})
|
||||
export class MyView {
|
||||
|
||||
constructor(formRenderingService: FormRenderingService) {
|
||||
formRenderingService.setComponentTypeResolver('text', () => CustomEditorComponent, true);
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
At runtime it should look similar to the following:
|
||||
|
||||
|
||||
|
||||
## Replacing custom stencils with custom components
|
||||
|
||||
This is a short walkthrough on rendering custom APS stencils by means of custom Angular components.
|
||||
|
||||
### Creating custom stencil
|
||||
|
||||
First let's create a basic stencil and call it `Custom Stencil 01`:
|
||||
|
||||
|
||||
|
||||
_Note the `internal identifier` value as it will become a `field type` value when corresponding form is rendered._
|
||||
|
||||
Next put some simple html layout for [`Form`](../../lib/process-services/src/lib/task-list/models/form.model.ts)`runtime template` and [`Form`](../../lib/process-services/src/lib/task-list/models/form.model.ts)`editor template` fields:
|
||||
|
||||
```html
|
||||
<div style="color: blue">Custom activiti stencil</div>
|
||||
```
|
||||
|
||||
Now you are ready to design a test form based on your custom stencil:
|
||||
|
||||
|
||||
|
||||
Once wired with a new task it should look like the following within APS web application:
|
||||
|
||||
|
||||
|
||||
### Creating custom widget
|
||||
|
||||
If you load previously created task into ADF `<adf-form>` component you will see something like the following:
|
||||
|
||||
|
||||
|
||||
Let's create an Angular component to render missing content:
|
||||
|
||||
```ts
|
||||
import { Component } from '@angular/core';
|
||||
import { WidgetComponent } from '@alfresco/adf-core';
|
||||
|
||||
@Component({
|
||||
selector: 'custom-stencil-01',
|
||||
template: `<div style="color: green">ADF version of custom Activiti stencil</div>`
|
||||
})
|
||||
export class CustomStencil01 extends WidgetComponent {}
|
||||
```
|
||||
|
||||
Put it inside custom module:
|
||||
|
||||
```ts
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CustomStencil01 } from './custom-stencil-01.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [ CustomStencil01 ],
|
||||
exports: [ CustomStencil01 ]
|
||||
})
|
||||
export class CustomEditorsModule {}
|
||||
```
|
||||
|
||||
And import into your Application Module
|
||||
|
||||
```ts
|
||||
@NgModule({
|
||||
imports: [
|
||||
// ...
|
||||
CustomEditorsModule
|
||||
// ...
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
export class AppModule {}
|
||||
```
|
||||
|
||||
Now you can import [`FormRenderingService`](../core/services/form-rendering.service.md) in any of your Views and provide new mapping:
|
||||
|
||||
```ts
|
||||
import { Component } from '@angular/core';
|
||||
import { CustomStencil01 } from './custom-stencil-01.component';
|
||||
|
||||
@Component({...})
|
||||
export class MyView {
|
||||
|
||||
constructor(formRenderingService: FormRenderingService) {
|
||||
formRenderingService.setComponentTypeResolver('custom_stencil_01', () => CustomStencil01, true);
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
At runtime you should now see your custom Angular component rendered in place of the stencils:
|
||||
|
||||
|
||||
## Form Extensibility for APS/AAE
|
||||
- [Form Extensibility for APS Stencil](./aps-extensions.md)
|
||||
- [Form Extensibility for AAE Form Widget](./aae-extensions.md)
|
||||
|
||||
## See Also
|
||||
|
||||
|
||||
Reference in New Issue
Block a user