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.
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.
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.
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);
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);
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 |
© 2023 Alfresco Software, Inc. All Rights Reserved.
By using this site, you are agreeing to allow us to collect and use cookies as outlined in Alfresco’s Cookie Statement and Terms of Use (and you have a legitimate interest in Alfresco and our products, authorizing us to contact you in such methods). If you are not ok with these terms, please do not use this website.