mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04: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
5.9 KiB
5.9 KiB
Title, Added
| Title | Added |
|---|---|
| Form extensibility and customization | 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 - Replacing default form widgets with custom components
- Replacing custom stencils with custom components
Contents
How components and widgets are rendered on a Form
All form field editors (aka widgets) on a Form are rendered by means of FormFieldComponent
that takes an instance of a FormFieldModel:
<form-field [field]="field"></form-field>
This component depends on FormRenderingService service to map FormFieldModel to UI component
based on field type or metadata information.
Component type resolvers
FormRenderingService maps field types to corresponding instances exposing ComponentTypeResolver interface:
export interface ComponentTypeResolver {
(field: FormFieldModel): Type<{}>;
}
Typically a ComponentTypeResolver is a function that takes FormFieldModel 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:
let customResolver: ComponentTypeResolver = () => CustomWidgetComponent;
formRenderingService.setComponentTypeResolver('text', customResolver, true);
or simply:
formRenderingService.setComponentTypeResolver('text', () => CustomWidgetComponent, true);
Dynamic component mapping
Alternatively your resolver may return different component types based on FormFieldModel state and condition:
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 |
| Number | integer | NumberWidgetComponent |
| Multi-line text | multi-line-text | MultilineTextWidgetComponentComponent |
| Checkbox | boolean | CheckboxWidgetComponent |
| Dropdown | dropdown | DropdownWidgetComponent |
| Date | date | DateWidgetComponent |
| Amount | amount | AmountWidgetComponent |
| Radio buttons | radio-buttons | RadioButtonsWidgetComponent |
| Hyperlink | hyperlink | HyperlinkWidgetComponent |
| Display value | readonly | DisplayValueWidgetComponent |
| Display text | readonly-text | DisplayTextWidgetComponentComponent |
| Display Rich text | display-rich-text | DisplayRichTextWidgetComponent |
| Typeahead | typeahead | TypeaheadWidgetComponent |
| People | people | PeopleWidgetComponent |
| Group of people | functional-group | FunctionalGroupWidgetComponent |
| Dynamic table | dynamic-table | DynamicTableWidgetComponent |
| N/A | container | ContainerWidgetComponent (layout component) |
| Header | group | ContainerWidgetComponent |
| Attach | upload | AttachWidgetComponent or UploadWidgetComponent (based on metadata) |
| N/A | N/A | UnknownWidgetComponent |