alfresco-ng2-components/docs/user-guide/extensibility.md

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
  • Component type resolvers
  • Default component mappings
• Form Extensibility for APS/AAE
• See Also

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

• Form Extensibility for APS Stencil
• Form Extensibility for AAE Form Widget

See Also

• Form field model
• Form rendering service
• Form component
• Widget component