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

---
Title: Form Rendering service
Added: v2.0.0
Status: Active
Last reviewed: 2018-11-20
---

# [Form Rendering service](../../lib/core/form/services/form-rendering.service.ts "Defined in form-rendering.service.ts")

Maps a form field type string onto the corresponding form [widget component](../insights/widget.component.md) type.

## Class members

### Methods

-   **getComponentTypeResolver**(type: `string`, defaultValue: `Type<__type>` = `this.defaultValue`): `DynamicComponentResolveFunction`<br/>
    Gets the currently active DynamicComponentResolveFunction for a field type.
    -   _type:_ `string`  - The type whose resolver you want
    -   _defaultValue:_ `Type<__type>`  - Default type returned for types that are not yet mapped
    -   **Returns** `DynamicComponentResolveFunction` - Resolver function
-   **resolveComponentType**(model: [`DynamicComponentModel`](../../lib/core/services/dynamic-component-mapper.service.ts), defaultValue: `Type<__type>` = `this.defaultValue`): `Type<__type>`<br/>
    Finds the component type that is needed to render a form field.
    -   _model:_ [`DynamicComponentModel`](../../lib/core/services/dynamic-component-mapper.service.ts)  - [Form](../../lib/process-services/task-list/models/form.model.ts) field model for the field to render
    -   _defaultValue:_ `Type<__type>`  - Default type returned for field types that are not yet mapped.
    -   **Returns** `Type<__type>` - Component type
-   **setComponentTypeResolver**(type: `string`, resolver: `DynamicComponentResolveFunction`, override: `boolean` = `true`)<br/>
    Sets or optionally replaces a DynamicComponentResolveFunction for a field type.
    -   _type:_ `string`  - The type whose resolver you want to set
    -   _resolver:_ `DynamicComponentResolveFunction`  - The new resolver function
    -   _override:_ `boolean`  - The new resolver will only replace an existing one if this parameter is true

## Details

The [`Form`](../../lib/process-services/task-list/models/form.model.ts) Field component uses this service to choose which [widget](../../e2e/pages/adf/process_services/widgets/widget.ts) to use to render an instance of a
form field. The [`Form`](../../lib/process-services/task-list/models/form.model.ts) Field model stores the field type name as a string (see the table below).
The [`Form`](../../lib/process-services/task-list/models/form.model.ts) Rendering service maintains a mapping between each type name and
a corresponding `DynamicComponentResolveFunction`. The function takes a [`FormFieldModel`](../core/form-field.model.md) object as its argument and
uses the data from the object to determine which [widget](../../e2e/pages/adf/process_services/widgets/widget.ts) should be used to render the field.

In some cases, the field type string alone is enough to determine the [widget](../../e2e/pages/adf/process_services/widgets/widget.ts) type and so the function
just returns the type directly:

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

In other cases, the function may need to choose the [widget](../../e2e/pages/adf/process_services/widgets/widget.ts) dynamically based on
specific values in the form data:

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

### Default type mapping

The [`Form`](../../lib/process-services/task-list/models/form.model.ts) Rendering service is initialized with the mapping shown in the table below:

| Stencil name | Field type string | Component type |
| ------------ | ----------------- | -------------- |
| Amount | "amount" | [`AmountWidgetComponent`](../../lib/core/form/components/widgets/amount/amount.widget.ts) |
| Attach | "upload" | AttachWidgetComponent or [`UploadWidgetComponent`](../../lib/core/form/components/widgets/upload/upload.widget.ts) (based on metadata) |
| Checkbox | "boolean" | [`CheckboxWidgetComponent`](../../lib/core/form/components/widgets/checkbox/checkbox.widget.ts) |
| Date | "date" | [`DateWidgetComponent`](../../lib/core/form/components/widgets/date/date.widget.ts) |
| Display text | "readonly-text" | [`DisplayTextWidgetComponentComponent`](../../lib/core/form/components/widgets/display-text/display-text.widget.ts) |
| Display value | "readonly" | DisplayValueWidgetComponent |
| Dropdown | "dropdown" | [`DropdownWidgetComponent`](../../lib/core/form/components/widgets/dropdown/dropdown.widget.ts) |
| Dynamic table | "dynamic-table" | [`DynamicTableWidgetComponent`](../../lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.ts) |
| Group of people | "functional-group" | [`FunctionalGroupWidgetComponent`](../../lib/core/form/components/widgets/functional-group/functional-group.widget.ts) |
| Header | "group" | [`ContainerWidgetComponent`](../../lib/core/form/components/widgets/container/container.widget.ts) |
| Hyperlink | "hyperlink" | [`HyperlinkWidgetComponent`](../../lib/core/form/components/widgets/hyperlink/hyperlink.widget.ts) |
| Multi-line text | "multi-line-text" | [`MultilineTextWidgetComponentComponent`](../../lib/core/form/components/widgets/multiline-text/multiline-text.widget.ts) |
| Number | "integer" | [`NumberWidgetComponent`](../../lib/core/form/components/widgets/number/number.widget.ts) |
| People | "people" | [`PeopleWidgetComponent`](../../lib/core/form/components/widgets/people/people.widget.ts) |
| Radio buttons | "radio-buttons" | [`RadioButtonsWidgetComponent`](../../lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.ts) |
| Text | "text" | [`TextWidgetComponent`](../../lib/core/form/components/widgets/text/text.widget.ts) |
| Typeahead | "typeahead" | [`TypeaheadWidgetComponent`](../../lib/core/form/components/widgets/typeahead/typeahead.widget.ts) |

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':

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

You would typically use this to replace an existing [widget](../../e2e/pages/adf/process_services/widgets/widget.ts) with your own custom version that
implements a modified layout or responds differently when the data is entered. See the
[Form Extensibility and Customisation](../user-guide/extensibility.md) guide for further details and examples
of this technique.

## See also

-   [Extensibility](../user-guide/extensibility.md)
-   [Form field model](form-field.model.md)
-   [Form component](form.component.md)