alfresco-ng2-components/docs/form-rendering.service.md

Form Rendering service

Maps an APS form field type string onto the corresponding form widget component type.

Methods

getComponentTypeResolver(fieldType: string, defaultValue: Type<{}> = UnknownWidgetComponent): ComponentTypeResolver
Gets the currently active ComponentTypeResolver function for a field type.

setComponentTypeResolver(fieldType: string, resolver: ComponentTypeResolver, override: boolean = false)
Sets or optionally replaces a ComponentTypeResolver function for a field type.

resolveComponentType(field: FormFieldModel, defaultValue: Type<{}> = UnknownWidgetComponent): Type<{}>
Finds the component type that is needed to render a form field.

Details

The Form Field component uses this service to choose which widget to use to render an instance of a form field. The Form Field model stores the field type name as a string (see the table below). The Form Rendering service maintains a mapping between each type name and a corresponding ComponentTypeResolver function. The function takes a FormFieldModel object as its argument and uses the data from the object to determine which widget should be used to render the field.

In some cases, the field type string alone is enough to determine the widget type and so the function just returns the type directly:

let customResolver: ComponentTypeResolver = () => CustomWidgetComponent;
formRenderingService.setComponentTypeResolver('text', customResolver, true);

In other cases, the function may need to choose the widget dynamically based on specific values in the form data:

let customResolver: ComponentTypeResolver = (field: FormFieldModel): Type<{}> => {
    if (field) {
        let params = field.params;
    }
    return UnknownWidgetComponent;
};
formRenderingService.setComponentTypeResolver('text', customResolver, true);

Default type mapping

The Form Rendering service is initialized with the mapping shown in the table below:

Stencil name	Field type string	Component type
Amount	"amount"	AmountWidgetComponent
Attach	"upload"	AttachWidgetComponent or UploadWidgetComponent (based on metadata)
Checkbox	"boolean"	CheckboxWidgetComponent
Date	"date"	DateWidgetComponent
Display text	"readonly-text"	DisplayTextWidgetComponentComponent
Display value	"readonly"	DisplayValueWidgetComponent
Dropdown	"dropdown"	DropdownWidgetComponent
Dynamic table	"dynamic-table"	DynamicTableWidgetComponent
Group of people	"functional-group"	FunctionalGroupWidgetComponent
Header	"group"	ContainerWidgetComponent
Hyperlink	"hyperlink"	HyperlinkWidgetComponent
Multi-line text	"multi-line-text"	MultilineTextWidgetComponentComponent
Number	"integer"	NumberWidgetComponent
People	"people"	PeopleWidgetComponent
Radio buttons	"radio-buttons"	RadioButtonsWidgetComponent
Text	"text"	TextWidgetComponent
Typeahead	"typeahead"	TypeaheadWidgetComponent

You can add new items to the mapping or replace existing items in order to customize the way fields are rendered.

Adding new or replacement items to the mapping

You can use the setComponentTypeResolver method to add a new ComponentTypeResolver function for a particular type string. You can also replace the resolver for a type that already exists in the mapping if you set the override parameter to 'true':

formRenderingService.setComponentTypeResolver('text', newResolver, true);

You would typically use this to replace an existing widget with your own custom version that implements a modified layout or responds differently when the data is entered. See the Form Extensibility and Customisation guide for further details and examples of this technique.

See also

• Extensibility
• Form field model
• Form component