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';
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
Added: v2.2.0
|
||||
---
|
||||
|
||||
# Internationalization in ADF
|
||||
|
||||
Internationalization (abbreviated to i18n) is the process of providing UI messages
|
||||
@@ -67,7 +68,7 @@ below:
|
||||
```
|
||||
|
||||
The hierarchical structure is referred to in the UI using the familiar "dot"
|
||||
notation (so `FORM.START_FORM.TITLE` would be the key for the "Start Form"
|
||||
notation (so `FORM.START_FORM.TITLE` would be the key for the "Start [Form"](../../lib/process-services/task-list/models/form.model.ts)
|
||||
string here). This is useful for grouping related messages and providing
|
||||
singular and plural versions, among other things.
|
||||
|
||||
@@ -136,11 +137,11 @@ should check you are using the key correctly.
|
||||
|
||||
## Using the translate pipe
|
||||
|
||||
Using `TranslationService.get` is straightforward but it is often more
|
||||
Using [`TranslationService`](../core/translation.service.md)`.get` is straightforward but it is often more
|
||||
convenient to add translation keys directly into your page's HTML.
|
||||
Use the `translate` pipe to convert a key in the page directly to the
|
||||
corresponding text. For example, the following will display the
|
||||
"Start Form" text as above but without any code or variables in the
|
||||
"Start [Form"](../../lib/process-services/task-list/models/form.model.ts) text as above but without any code or variables in the
|
||||
component's `.ts` file:
|
||||
|
||||
<!-- {% raw %} -->
|
||||
@@ -203,7 +204,7 @@ messages whose content can change at runtime. For example, in the built-in
|
||||
|
||||
The sections in curly braces are _interpolation variables_ that you supply
|
||||
at runtime. You can specify them by passing an extra parameter to
|
||||
`TranslationService.get`; this is an object whose properties have the same
|
||||
[`TranslationService`](../core/translation.service.md)`.get`; this is an object whose properties have the same
|
||||
names as the interpolation variables in the string:
|
||||
|
||||
```ts
|
||||
@@ -236,7 +237,7 @@ Note that when the user selects an item from the menu, it simply changes the "lo
|
||||
preference (which you can get via the [User Preferences service](../core/user-preferences.service.md)).
|
||||
The `translate` pipe reacts automatically to this and changes the page text
|
||||
immediately to the new language. However, text added via a variable set using
|
||||
`TranslationService.get`, as in the example above, will not be updated like this;
|
||||
[`TranslationService`](../core/translation.service.md)`.get`, as in the example above, will not be updated like this;
|
||||
you will need to get a new translation and set the variable's value again explicitly
|
||||
from the code.
|
||||
|
||||
|
||||
@@ -1,6 +1,19 @@
|
||||
# Form Stencils
|
||||
|
||||
Form component provides basic support for custom stencils created with Activiti stencil editor.
|
||||
[`Form`](../../lib/process-services/task-list/models/form.model.ts) component provides basic support for custom stencils created with Activiti stencil editor.
|
||||
|
||||
## Contents
|
||||
|
||||
- [Installing](#installing)
|
||||
- [Creating new stencil](#creating-new-stencil)
|
||||
- [Form runtime template](#form-runtime-template)
|
||||
- [Form editor template](#form-editor-template)
|
||||
- [Custom component controller](#custom-component-controller)
|
||||
- [JavaScript code](#javascript-code)
|
||||
- [TypeScript code](#typescript-code)
|
||||
- [Mapping template with component class](#mapping-template-with-component-class)
|
||||
- [Final result](#final-result)
|
||||
- [Runtime result](#runtime-result)
|
||||
|
||||
## Installing
|
||||
|
||||
@@ -18,16 +31,17 @@ Where `<activiti-app-root>` should be replaced with a valid url pointing to your
|
||||
```html
|
||||
<script src="http://localhost:9999/activiti-app/app/rest/script-files/controllers"></script>
|
||||
```
|
||||
- `/app/rest/script-files/controllers`
|
||||
provides all stencil controllers stored within Activiti
|
||||
|
||||
- `runtime.ng1.js`
|
||||
provides a compatibility layer for controllers created with AngularJS (aka Angular 1x)
|
||||
(this is to avoid runtime errors when loading AngularJS code into `<activiti-form>` component)
|
||||
- `/app/rest/script-files/controllers`
|
||||
provides all stencil controllers stored within Activiti
|
||||
|
||||
- `runtime.adf.js`
|
||||
provides API for stencil management and registration,
|
||||
i.e. mapping html templates with corresponding controller classes
|
||||
- `runtime.ng1.js`
|
||||
provides a compatibility layer for controllers created with AngularJS (aka Angular 1x)
|
||||
(this is to avoid runtime errors when loading AngularJS code into `<activiti-form>` component)
|
||||
|
||||
- `runtime.adf.js`
|
||||
provides API for stencil management and registration,
|
||||
i.e. mapping html templates with corresponding controller classes
|
||||
|
||||
## Creating new stencil
|
||||
|
||||
@@ -53,7 +67,7 @@ This should be a valid Angular component template that you want to render in `<a
|
||||
|
||||
## Form editor template
|
||||
|
||||
This can be any html layout to be rendered as a component placeholder in Activiti Form Designer.
|
||||
This can be any html layout to be rendered as a component placeholder in Activiti [`Form`](../../lib/process-services/task-list/models/form.model.ts) Designer.
|
||||
|
||||
```html
|
||||
<div>
|
||||
@@ -145,4 +159,4 @@ Angular Component
|
||||
Created by: Denys
|
||||
```
|
||||
|
||||
ADF Form component will automatically assemble and compile a valid Angular component on the fly.
|
||||
ADF [`Form`](../../lib/process-services/task-list/models/form.model.ts) component will automatically assemble and compile a valid Angular component on the fly.
|
||||
|
||||
Reference in New Issue
Block a user