mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-3323] Fixed broken links in doc files (#3662)
* [ADF-3323] Fixed URL path to Typescript source files * [ADF-3323] Fixed and checked broken links caused by previous bug
This commit is contained in:
Andy Stark
committed by
Eugenio Romano
Eugenio Romano
parent
fd5978e81b
commit
e03f3a1a6b
@@ -1,29 +1,41 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
---
|
||||
|
||||
# Form Extensibility and Customisation
|
||||
|
||||
_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
|
||||
- How components and widgets are rendered on a [`Form`](../../lib/process-services/task-list/models/form.model.ts)
|
||||
- Replacing default form widgets with custom components
|
||||
- Replacing custom stencils with custom components
|
||||
|
||||
## Contents
|
||||
|
||||
- [How components and widgets are rendered on a Form](#how-components-and-widgets-are-rendered-on-a-form)
|
||||
- [Component type resolvers](#component-type-resolvers)
|
||||
- [Default component mappings](#default-component-mappings)
|
||||
- [Replacing default form widgets with custom components](#replacing-default-form-widgets-with-custom-components)
|
||||
- [Replacing custom stencils with custom components](#replacing-custom-stencils-with-custom-components)
|
||||
- [Creating custom stencil](#creating-custom-stencil)
|
||||
- [Creating custom widget](#creating-custom-widget)
|
||||
- [See Also](#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`:
|
||||
All form field editors (aka widgets) on a [`Form`](../../lib/process-services/task-list/models/form.model.ts) are rendered by means of [`FormFieldComponent`](../core/form-field.component.md)
|
||||
that takes an instance of a [`FormFieldModel`](../core/form-field.model.md):
|
||||
|
||||
```html
|
||||
<form-field [field]="field"></form-field>
|
||||
```
|
||||
|
||||
This component depends on `FormRenderingService` service to map `FormFieldModel` to UI component
|
||||
This component depends on [`FormRenderingService`](../core/form-rendering.service.md) service to map [`FormFieldModel`](../core/form-field.model.md) to UI component
|
||||
based on field type or metadata information.
|
||||
|
||||
### Component type resolvers
|
||||
|
||||
`FormRenderingService` maps field types to corresponding instances exposing `ComponentTypeResolver` interface:
|
||||
[`FormRenderingService`](../core/form-rendering.service.md) maps field types to corresponding instances exposing `ComponentTypeResolver` interface:
|
||||
|
||||
```ts
|
||||
export interface ComponentTypeResolver {
|
||||
@@ -31,7 +43,7 @@ export interface ComponentTypeResolver {
|
||||
}
|
||||
```
|
||||
|
||||
Typically a `ComponentTypeResolver` is a function that takes `FormFieldModel` and returns corresponding component type.
|
||||
Typically a `ComponentTypeResolver` is a function that takes [`FormFieldModel`](../core/form-field.model.md) and returns corresponding component type.
|
||||
It can be either a predefined component type or a dynamically evaluated based on field properties and metadata.
|
||||
|
||||
#### Static component mapping
|
||||
@@ -51,7 +63,7 @@ formRenderingService.setComponentTypeResolver('text', () => CustomWidgetComponen
|
||||
|
||||
#### Dynamic component mapping
|
||||
|
||||
Alternatively your resolver may return different component types based on `FormFieldModel` state and condition:
|
||||
Alternatively your resolver may return different component types based on [`FormFieldModel`](../core/form-field.model.md) state and condition:
|
||||
|
||||
```ts
|
||||
let customResolver: ComponentTypeResolver = (field: FormFieldModel): Type<{}> => {
|
||||
@@ -67,25 +79,25 @@ 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 |
|
||||
| Text | text | [`TextWidgetComponent`](../../lib/core/form/components/widgets/text/text.widget.ts) |
|
||||
| Number | integer | [`NumberWidgetComponent`](../../lib/core/form/components/widgets/number/number.widget.ts) |
|
||||
| Multi-line text | multi-line-text | [`MultilineTextWidgetComponentComponent`](../../lib/core/form/components/widgets/multiline-text/multiline-text.widget.ts) |
|
||||
| Checkbox | boolean | [`CheckboxWidgetComponent`](../../lib/core/form/components/widgets/checkbox/checkbox.widget.ts) |
|
||||
| Dropdown | dropdown | [`DropdownWidgetComponent`](../../lib/core/form/components/widgets/dropdown/dropdown.widget.ts) |
|
||||
| Date | date | [`DateWidgetComponent`](../../lib/core/form/components/widgets/date/date.widget.ts) |
|
||||
| Amount | amount | [`AmountWidgetComponent`](../../lib/core/form/components/widgets/amount/amount.widget.ts) |
|
||||
| Radio buttons | radio-buttons | [`RadioButtonsWidgetComponent`](../../lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.ts) |
|
||||
| Hyperlink | hyperlink | [`HyperlinkWidgetComponent`](../../lib/core/form/components/widgets/hyperlink/hyperlink.widget.ts) |
|
||||
| Display value | readonly | DisplayValueWidgetComponent |
|
||||
| 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 |
|
||||
| Display text | readonly-text | [`DisplayTextWidgetComponentComponent`](../../lib/core/form/components/widgets/display-text/display-text.widget.ts) |
|
||||
| Typeahead | typeahead | [`TypeaheadWidgetComponent`](../../lib/core/form/components/widgets/typeahead/typeahead.widget.ts) |
|
||||
| People | people | [`PeopleWidgetComponent`](../../lib/core/form/components/widgets/people/people.widget.ts) |
|
||||
| Group of people | functional-group | [`FunctionalGroupWidgetComponent`](../../lib/core/form/components/widgets/functional-group/functional-group.widget.ts) |
|
||||
| Dynamic table | dynamic-table | [`DynamicTableWidgetComponent`](../../lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.ts) |
|
||||
| N/A | container | [`ContainerWidgetComponent`](../../lib/core/form/components/widgets/container/container.widget.ts) (layout component) |
|
||||
| Header | group | [`ContainerWidgetComponent`](../../lib/core/form/components/widgets/container/container.widget.ts) |
|
||||
| Attach | upload | AttachWidgetComponent or [`UploadWidgetComponent`](../../lib/core/form/components/widgets/upload/upload.widget.ts) (based on metadata) |
|
||||
| N/A | N/A | [`UnknownWidgetComponent`](../../lib/core/form/components/widgets/unknown/unknown.widget.ts) |
|
||||
|
||||
## Replacing default form widgets with custom components
|
||||
|
||||
@@ -96,7 +108,7 @@ First let's create a simple APS form with `Text` widgets:
|
||||
|
||||
|
||||
|
||||
Every custom widget must inherit `WidgetComponent` class in order to function properly:
|
||||
Every custom widget must inherit [`WidgetComponent`](../insights/widget.component.md) class in order to function properly:
|
||||
|
||||
```ts
|
||||
import { Component } from '@angular/core';
|
||||
@@ -143,7 +155,7 @@ don't forget to import it into your main application one:
|
||||
export class AppModule {}
|
||||
```
|
||||
|
||||
Now you can import `FormRenderingService` in any of your Views and override default mapping similar to the following:
|
||||
Now you can import [`FormRenderingService`](../core/form-rendering.service.md) in any of your Views and override default mapping similar to the following:
|
||||
|
||||
```ts
|
||||
import { Component } from '@angular/core';
|
||||
@@ -175,7 +187,7 @@ First let's create a basic stencil and call it `Custom Stencil 01`:
|
||||
|
||||
_Note the `internal identifier` value as it will become a `field type` value when corresponding form is rendered._
|
||||
|
||||
Next put some simple html layout for `Form runtime template` and `Form editor template` fields:
|
||||
Next put some simple html layout for [`Form`](../../lib/process-services/task-list/models/form.model.ts)`runtime template` and [`Form`](../../lib/process-services/task-list/models/form.model.ts)`editor template` fields:
|
||||
|
||||
```html
|
||||
<div style="color: blue">Custom activiti stencil</div>
|
||||
@@ -237,7 +249,7 @@ And import into your Application Module
|
||||
export class AppModule {}
|
||||
```
|
||||
|
||||
Now you can import `FormRenderingService` in any of your Views and provide new mapping:
|
||||
Now you can import [`FormRenderingService`](../core/form-rendering.service.md) in any of your Views and provide new mapping:
|
||||
|
||||
```ts
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
Reference in New Issue
Block a user