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 Rich text | display-rich-text | DisplayRichTextWidgetComponent |
| Display text | readonly-text | DisplayTextWidgetComponentComponent |
| 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 |