mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-19 17:14:57 +00:00
d8f1eda132
* [AAE-9373] Create adf-rich-text-editor into core library, install editorjs and import it into the component, add a basic editorjs configuration * [AAE-9374] create a rich text editor demo page * [AAE-9376] Install header to provide headings blocks * [AAE-9376] Install editorjs List plugin to add ordered and unordered list * [AAE-9376] Install text color plugin to change text color and highlight text * [AAE-9376] Install paragraph plugin to set text alignment to right, left, center and justify * [AAE-9376] Install font size plugin to increase/decrease font size * [AAE-9376] Install @editorjs/underline plugin to underline text * [AAE-9376] Install @editorjs/inline-code to marking code-fragments * [AAE-9376] Set shortcut to underline text * [AAE-9376] Install @editorjs/code to add code examples * [AAE-9376] Enable custom picker to color text changer, add colors codes * [AAE-9376] Add input to fill rich text editor data * [AAE-9376] Demo rich text editor, add sample data to display editor content * [AAE-9376] Demo rich text editor, add sample data to display editor content * [AAE-9376] Install @editorjs/marker plugin to highlight the text, because color plugin doesn't save marker style * [AAE-9373] Send editor text output data onReady and onChange * [AAE-9374] Update editor demo page to show the output on the right side of the page * [AAE-9373] Allow to enable editorjs readOnly mode * [AAE-9373] Return rich text editor save data as promise * [AAE-9480] Add new display-rich-text widget to allow the user add Rich Text into a form * [AAE-9371] Add readonly class if readOnly property is true to remove the editor 300px padding bottom in readonly mode, set a dynamic id to editorjs * [AAE-9371] Destroy editorInstance on component destroy to FIX an error faced when there are multiple editorjs instance in the same page --> Uncaught TypeError: Cannot read property 'updateCurrentInput' of undefined * [AAE-9480] Install editorjs-html utility to parse editorjs clean data to HTML * [AAE-9480] parse editorjs data to HTML to avoid to create a new EditorJS instance for every single widget and improve performance * [AAE-9480] Set pre styles to show show Code block styles correctly * [AAE-9480] Remove space between rules * [AAE-9480] Set editorjs and plugins fixed versions * [AAE-9480] Removed unused editorjs dependency * [AAE-9371] Set is ready property when editor instance is ready, check if is ready to destroy the instance on component destroy * [AAE-9480] Add parse editorjs data to html Test * [AAE-9371] Send rich-text-editor component data only if readOnly mode is false * [AAE-9480] Test if display-rich-text widget is resolved * [AAE-9480] Rename DisplayRichTextComponent into DisplayRichTextWidgetComponent to be compliant with other widget component names * [AAE-9480] update Readme files with DisplayRichTextWidgetComponent * [AAE-9371] Update header text * [AAE-9371] Add Rich text editor component usage documentation * [AAE-9480] Add padding to the widget container * [AAE-9371] Remove plugin that align pragraph text since editorjs-html parser doesn't handle paragraph alignment * [AAE-9371] Set editor autofocus to true * [AAE-9480] Add a display-rich-text widget example to demo cloud form * [AAE-9371] Fix lint issue * [AAE-9371] Remove duplicated import to fix import module issue in a lib build job
113 lines
5.9 KiB
Markdown
113 lines
5.9 KiB
Markdown
---
|
|
Title: Form extensibility and customization
|
|
Added: v2.0.0
|
|
---
|
|
|
|
# Form Extensibility and Customization
|
|
|
|
This page describes how you can customize ADF forms to your own specification.
|
|
|
|
_Note: it is assumed you are familiar with Alfresco Process Services (powered by Activiti) form definition structure._
|
|
|
|
- How components and widgets are rendered on a [`Form`](../../lib/process-services/src/lib/task-list/models/form.model.ts)
|
|
- Replacing default form widgets with custom components
|
|
- Replacing custom stencils with custom components
|
|
|
|
## Contents
|
|
|
|
- [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)
|
|
- [Form Extensibility for APS/AAE](#form-extensibility-for-apsaae)
|
|
- [See Also](#see-also)
|
|
|
|
## How components and widgets are rendered on a Form
|
|
|
|
All form field editors (aka widgets) on a [`Form`](../../lib/process-services/src/lib/task-list/models/form.model.ts) are rendered by means of [`FormFieldComponent`](../core/components/form-field.component.md)
|
|
that takes an instance of a [`FormFieldModel`](../core/models/form-field.model.md):
|
|
|
|
```html
|
|
<form-field [field]="field"></form-field>
|
|
```
|
|
|
|
This component depends on [`FormRenderingService`](../core/services/form-rendering.service.md) service to map [`FormFieldModel`](../core/models/form-field.model.md) to UI component
|
|
based on field type or metadata information.
|
|
|
|
### Component type resolvers
|
|
|
|
[`FormRenderingService`](../core/services/form-rendering.service.md) maps field types to corresponding instances exposing `ComponentTypeResolver` interface:
|
|
|
|
```ts
|
|
export interface ComponentTypeResolver {
|
|
(field: FormFieldModel): Type<{}>;
|
|
}
|
|
```
|
|
|
|
Typically a `ComponentTypeResolver` is a function that takes [`FormFieldModel`](../core/models/form-field.model.md) and returns corresponding component type.
|
|
This can either be a predefined component type or dynamically evaluated based on the field properties and metadata.
|
|
|
|
#### Static component mapping
|
|
|
|
You can (re)map fields like in the following:
|
|
|
|
```ts
|
|
let customResolver: ComponentTypeResolver = () => CustomWidgetComponent;
|
|
formRenderingService.setComponentTypeResolver('text', customResolver, true);
|
|
```
|
|
|
|
or simply:
|
|
|
|
```ts
|
|
formRenderingService.setComponentTypeResolver('text', () => CustomWidgetComponent, true);
|
|
```
|
|
|
|
#### Dynamic component mapping
|
|
|
|
Alternatively your resolver may return different component types based on [`FormFieldModel`](../core/models/form-field.model.md) state and condition:
|
|
|
|
```ts
|
|
let customResolver: ComponentTypeResolver = (field: FormFieldModel): Type<{}> => {
|
|
if (field) {
|
|
let params = field.params;
|
|
}
|
|
return UnknownWidgetComponent;
|
|
};
|
|
formRenderingService.setComponentTypeResolver('text', customResolver, true);
|
|
```
|
|
|
|
### Default component mappings
|
|
|
|
| Stencil Name | Field Type | Component Type |
|
|
| ------------ | ---------- | -------------- |
|
|
| Text | text | [`TextWidgetComponent`](../../lib/core/form/components/widgets/text/text.widget.ts) |
|
|
| Number | integer | [`NumberWidgetComponent`](../../lib/core/form/components/widgets/number/number.widget.ts) |
|
|
| Multi-line text | multi-line-text | [`MultilineTextWidgetComponentComponent`](../../lib/core/form/components/widgets/multiline-text/multiline-text.widget.ts) |
|
|
| Checkbox | boolean | [`CheckboxWidgetComponent`](../../lib/core/form/components/widgets/checkbox/checkbox.widget.ts) |
|
|
| Dropdown | dropdown | [`DropdownWidgetComponent`](../../lib/core/form/components/widgets/dropdown/dropdown.widget.ts) |
|
|
| Date | date | [`DateWidgetComponent`](../../lib/core/form/components/widgets/date/date.widget.ts) |
|
|
| Amount | amount | [`AmountWidgetComponent`](../../lib/core/form/components/widgets/amount/amount.widget.ts) |
|
|
| Radio buttons | radio-buttons | [`RadioButtonsWidgetComponent`](../../lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.ts) |
|
|
| Hyperlink | hyperlink | [`HyperlinkWidgetComponent`](../../lib/core/form/components/widgets/hyperlink/hyperlink.widget.ts) |
|
|
| Display value | readonly | DisplayValueWidgetComponent |
|
|
| Display text | readonly-text | [`DisplayTextWidgetComponentComponent`](../../lib/core/form/components/widgets/display-text/display-text.widget.ts) |
|
|
| Display Rich text | display-rich-text | [`DisplayRichTextWidgetComponent`](../../lib/core/form/components/widgets/display-rich-text/display-rich-text.widget.ts) |
|
|
| Typeahead | typeahead | [`TypeaheadWidgetComponent`](../../lib/core/form/components/widgets/typeahead/typeahead.widget.ts) |
|
|
| People | people | [`PeopleWidgetComponent`](../../lib/core/form/components/widgets/people/people.widget.ts) |
|
|
| Group of people | functional-group | [`FunctionalGroupWidgetComponent`](../../lib/core/form/components/widgets/functional-group/functional-group.widget.ts) |
|
|
| Dynamic table | dynamic-table | [`DynamicTableWidgetComponent`](../../lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.ts) |
|
|
| N/A | container | [`ContainerWidgetComponent`](../../lib/core/form/components/widgets/container/container.widget.ts) (layout component) |
|
|
| Header | group | [`ContainerWidgetComponent`](../../lib/core/form/components/widgets/container/container.widget.ts) |
|
|
| 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) |
|
|
|
|
## Form Extensibility for APS/AAE
|
|
- [Form Extensibility for APS Stencil](./aps-extensions.md)
|
|
- [Form Extensibility for AAE Form Widget](./extensibility.md)
|
|
|
|
## See Also
|
|
|
|
- [Form field model](../core/models/form-field.model.md)
|
|
- [Form rendering service](../core/services/form-rendering.service.md)
|
|
- [Form component](../core/components/form.component.md)
|
|
- [Widget component](../insights/components/widget.component.md)
|