Skip to content

Latest commit

 

History

History
112 lines (85 loc) · 5.91 KB

extensibility.md

File metadata and controls

112 lines (85 loc) · 5.91 KB
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

Form Extensibility for APS/AAE

See Also