mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-3797] Task management view - Task with Form (#4534)
* [ADF-4248] Created form cloud service * [ADF-4248] Created form cloud model * [ADF-4248] Created new cloud form * [ADF-4248] Exported cloud from module * [ADF-4248] Added form saving feature * [ADF-4248] Added form to task details * [ADF-4248] Added services to save form * [ADF-4248] Added data support * [ADF-4248] Added outcome support in form model * [ADF-4248] Modified demo component to show form * [ADF-4248] Copied tests * [ADF-4248] Added form parsing service * [ADF-4248] Added form cloud demo * [ADF-4248] Added form input to fom-cloud * [ADF-4248] Added tests for form cloud model * [ADF-4248] Improved form model json parsing * [ADF-4248] Added test for form could * [ADF-4248] Refactored types in the form model * [ADF-4248] Improved tests * [ADF-4248] Added tests for form cloud service * [ADF-4248] Added tests for form services * [ADF-4248] Refactored form services * [ADF-4248] Handled form events in demo shell * [ADF-4248] Improved form value parsing * [ADF-4248] Added form-cloud demo to routing * [ADF-4248] Added field validation without handler * [ADF-4248] Added task variable model * [ADF-4248] Added adf-cloud prefix to css classes * [ADF-4248] Translated name of nameless task * [ADF-4248] Added docs for cloud form component * [ADF-4248] Added docs for cloud form service * create base component * [ADF-4248] Created formBase and formModelbase * [ADF-4248] Used base classes in cloud package * Update form-cloud.component.md * Update form-cloud.service.md * [ADF-4248] Created form cloud service * [ADF-4248] Created form cloud model * [ADF-4248] Created new cloud form * [ADF-4248] Exported cloud from module * [ADF-4248] Added form saving feature * [ADF-4248] Added form to task details * [ADF-4248] Added services to save form * [ADF-4248] Added data support * [ADF-4248] Added outcome support in form model * [ADF-4248] Modified demo component to show form * [ADF-4248] Copied tests * [ADF-4248] Added form parsing service * [ADF-4248] Added form cloud demo * [ADF-4248] Added form input to fom-cloud * [ADF-4248] Added tests for form cloud model * [ADF-4248] Improved form model json parsing * [ADF-4248] Added test for form could * [ADF-4248] Refactored types in the form model * [ADF-4248] Improved tests * [ADF-4248] Added tests for form cloud service * [ADF-4248] Added tests for form services * [ADF-4248] Refactored form services * [ADF-4248] Handled form events in demo shell * [ADF-4248] Improved form value parsing * [ADF-4248] Added form-cloud demo to routing * [ADF-4248] Added field validation without handler * [ADF-4248] Added task variable model * [ADF-4248] Added adf-cloud prefix to css classes * [ADF-4248] Translated name of nameless task * [ADF-4248] Added docs for cloud form component * [ADF-4248] Added docs for cloud form service * create base component * [ADF-4248] Created formBase and formModelbase * [ADF-4248] Used base classes in cloud package * [ADF-4248] Moved documentation to process services * [ADF-4248] Removed duplicate import * [ADF-4248] Fixed wrong imports * [ADF-4248] Renamed form renderer input * [ADF-4248] Show translated name for nameless form * Enable the uploadWidget * Make the form great again! * Move the class style on the parent * Fix the debugMode
This commit is contained in:
Deepak Paul
committed by
Eugenio Romano
Eugenio Romano
parent
61ee1f1d53
commit
558ee4c031
262
docs/process-services-cloud/components/form-cloud.component.md
Normal file
262
docs/process-services-cloud/components/form-cloud.component.md
Normal file
@@ -0,0 +1,262 @@
|
||||
---
|
||||
Title: Form component
|
||||
Added: v3.2.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-04-01
|
||||
---
|
||||
|
||||
# [Form cloud component](../../../lib/process-services-cloud/src/lib/form/components/form-cloud.component.ts "Defined in form-cloud.component.ts")
|
||||
|
||||
Shows a [`form`](../../../lib/process-services-cloud/src/lib/form/models/form-cloud.model.ts) from Process Services
|
||||
|
||||
## Contents
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
- [Empty form template](#empty-form-template)
|
||||
- [Class members](#class-members)
|
||||
- [Properties](#properties)
|
||||
- [Events](#events)
|
||||
- [Details](#details)
|
||||
- [Displaying a form](#displaying-a-form)
|
||||
- [Controlling outcome execution behaviour](#controlling-outcome-execution-behaviour)
|
||||
- [Field Validators](#field-validators)
|
||||
- [Common scenarios](#common-scenarios)
|
||||
- [See also](#see-also)
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-cloud-form
|
||||
[appName]="appName"
|
||||
[taskId]="taskId">
|
||||
</adf-cloud-form>
|
||||
```
|
||||
|
||||
### Empty form template
|
||||
|
||||
The template defined inside `empty-form` will be shown when no form definition is found:
|
||||
|
||||
```html
|
||||
<adf-cloud-form .... >
|
||||
|
||||
<div empty-form >
|
||||
<h2>Empty form</h2>
|
||||
</div>
|
||||
|
||||
</adf-cloud-form>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| appName | `string` | | App id to fetch corresponding form and values. |
|
||||
| taskId | `string` | | Task id to fetch corresponding form and values. |
|
||||
| form | [`FormCloudModel`](../../../lib/process-services-cloud/src/lib/form/models/form-cloud.model.ts) | | Underlying [form model](../../../lib/process-services-cloud/src/lib/form/models/form-cloud.model.ts) instance. |
|
||||
| formId | `string` | | The id of the form definition to load and display with custom values. |
|
||||
| data | [`TaskVariableCloud[]`](../../../lib/process-services-cloud/src/lib/form/models/task-variable.model.ts) | | Custom form values map to be used with the rendered form. |
|
||||
| disableCompleteButton | `boolean` | false | If true then the `Complete` outcome button is shown but it will be disabled. |
|
||||
| disableStartProcessButton | `boolean` | false | If true then the `Start Process` outcome button is shown but it will be disabled. |
|
||||
| fieldValidators | [`FormFieldValidator`](../../../lib/core/form/components/widgets/core/form-field-validator.ts)`[]` | \[] | Contains a list of form field validator instances. |
|
||||
| readOnly | `boolean` | false | Toggle readonly state of the form. Forces all form widgets to render as readonly if enabled. |
|
||||
| showCompleteButton | `boolean` | true | Toggle rendering of the `Complete` outcome button. |
|
||||
| showDebugButton | `boolean` | false | Toggle debug options. |
|
||||
| showRefreshButton | `boolean` | true | Toggle rendering of the `Refresh` button. |
|
||||
| showSaveButton | `boolean` | true | Toggle rendering of the `Save` outcome button. |
|
||||
| showTitle | `boolean` | true | Toggle rendering of the form title. |
|
||||
| showValidationIcon | `boolean` | true | Toggle rendering of the validation icon next to the form title. |
|
||||
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when any error occurs. |
|
||||
| executeOutcome | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormOutcomeEvent`](../../../lib/core/form/components/widgets/core/form-outcome-event.model.ts)`>` | Emitted when any outcome is executed. Default behaviour can be prevented via `event.preventDefault()`. |
|
||||
| formCompleted | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormCloudModel`](../../../lib/process-services-cloud/src/lib/form/models/form-cloud.model.ts)`>` | Emitted when the form is submitted with the `Complete` outcome. |
|
||||
| formDataRefreshed | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormCloudModel`](../../../lib/process-services-cloud/src/lib/form/models/form-cloud.model.ts)`>` | Emitted when form values are refreshed due to a data property change. |
|
||||
| formError | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormFieldModel`](../../core/models/form-field.model.md)`[]>` | Emitted when the supplied form values have a validation error. |
|
||||
| formLoaded | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormCloudModel`](../../../lib/process-services-cloud/src/lib/form/models/form-cloud.model.ts)`>` | Emitted when the form is loaded or reloaded. |
|
||||
| formSaved | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormCloudModel`](../../../lib/process-services-cloud/src/lib/form/models/form-cloud.model.ts)`>` | Emitted when the form is submitted with the `Save` or custom outcomes. |
|
||||
|
||||
## Details
|
||||
|
||||
All `formXXX` events receive a [`FormCloudModel`](../../../lib/process-services-cloud/src/lib/form/models/form-cloud.model.ts) instance as their argument:
|
||||
|
||||
**MyView.component.html**
|
||||
|
||||
```html
|
||||
<adf-cloud-form
|
||||
[appName]="appName"
|
||||
[taskId]="selectedTask?.id"
|
||||
(formSaved)="onFormSaved($event)">
|
||||
</adf-cloud-form>
|
||||
```
|
||||
|
||||
**MyView.component.ts**
|
||||
|
||||
```ts
|
||||
onFormSaved(form: FormCloudModel) {
|
||||
console.log(form);
|
||||
}
|
||||
```
|
||||
|
||||
### Displaying a form
|
||||
|
||||
There are various ways to display a form. The common scenarios are detailed below.
|
||||
|
||||
#### Displaying a form instance by task id
|
||||
|
||||
```html
|
||||
<adf-cloud-form
|
||||
[appName]="appName"
|
||||
[taskId]="selectedTask?.id">
|
||||
</adf-cloud-form>
|
||||
```
|
||||
|
||||
For an existing Task both the form and its values will be fetched and displayed.
|
||||
|
||||
#### Displaying a form definition by form id
|
||||
|
||||
```html
|
||||
<adf-cloud-form
|
||||
[appName]="appName"
|
||||
[formId]="selectedFormDefinition?.id"
|
||||
[data]="customData">
|
||||
</adf-cloud-form>
|
||||
```
|
||||
|
||||
In this case, only the form definition will be fetched.
|
||||
|
||||
|
||||
### Controlling outcome execution behaviour
|
||||
|
||||
In unusual circumstances, you may need to take complete control of form outcome execution.
|
||||
You can do this by implementing the `executeOutcome` event, which is emitted for both system
|
||||
outcomes and custom ones.
|
||||
|
||||
Note that by default, the code in your `executeOutcome` handler is executed _before_ the default
|
||||
behavior but you can switch the default behavior off using `event.preventDefault()`.
|
||||
You might want to do this, for example, to provide custom form validation or to show a summary
|
||||
of the form validation before it is submitted.
|
||||
|
||||
**MyView.component.html**
|
||||
|
||||
```html
|
||||
<adf-cloud-form
|
||||
[appName]="appName"
|
||||
[taskId]="selectedTask?.id"
|
||||
executeOutcome="validateForm($event)">
|
||||
</adf-cloud-form>
|
||||
```
|
||||
|
||||
**MyView.component.ts**
|
||||
|
||||
```ts
|
||||
import { FormOutcomeEvent } from '@alfresco/adf-core';
|
||||
|
||||
export class MyView {
|
||||
|
||||
validateForm(event: FormOutcomeEvent) {
|
||||
let outcome = event.outcome;
|
||||
|
||||
// you can also get additional properties of outcomes
|
||||
// if you defined them within outcome definition
|
||||
|
||||
if (outcome) {
|
||||
let form = outcome.form;
|
||||
if (form) {
|
||||
// check/update the form here
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
There are two other functions that can be very useful when you need to control form outcomes:
|
||||
|
||||
- `saveTaskForm()` - Saves the current form
|
||||
- `completeTaskForm(outcome?: string)` Saves and completes the form with a given outcome name
|
||||
|
||||
### Field Validators
|
||||
|
||||
You can supply a set of validator objects to the form using the `fieldValidators`
|
||||
property. Each validator implements a check for a particular type of data (eg, a
|
||||
date validator might check that the date in the field falls between 1980 and 2017).
|
||||
ADF supplies a standard set of validators that handle most common cases but you can
|
||||
also implement your own custom validators to replace or extend the set. See the
|
||||
[Form Field Validator](../../core/interfaces/form-field-validator.interface.md) interface for full details and examples.
|
||||
|
||||
### Common scenarios
|
||||
|
||||
#### Rendering a form using form definition JSON
|
||||
|
||||
See the [demo-form](../../docassets/demo-cloud.form.json) file for an example of form definition JSON.
|
||||
|
||||
The component below (with the JSON assigned to the `formDefinitionJSON` property), shows how a
|
||||
form definition is rendered:
|
||||
|
||||
```ts
|
||||
@Component({
|
||||
selector: 'sample-form',
|
||||
template: `<div class="form-container">
|
||||
<adf-cloud-form
|
||||
[form]="form">
|
||||
</adf-cloud-form>
|
||||
</div>`
|
||||
})
|
||||
export class SampleFormComponent implements OnInit {
|
||||
|
||||
form: FormCloudModel;
|
||||
formDefinitionJSON: any;
|
||||
|
||||
constructor(private formService: FormService) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.form = this.formService.parseForm(this.formDefinitionJSON);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Customizing the styles of form outcome buttons
|
||||
|
||||
You can use normal CSS selectors to style the outcome buttons of your form.
|
||||
Every outcome has an CSS id value following a simple pattern:
|
||||
|
||||
adf-cloud-form-OUTCOME_NAME
|
||||
|
||||
In the CSS, you can target any outcome ID and change the style as in this example:
|
||||
|
||||
```css
|
||||
#adf-cloud-form-complete {
|
||||
background-color: blue !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
#adf-cloud-form-save {
|
||||
background-color: green !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#adf-cloud-form-customoutcome {
|
||||
background-color: yellow !important;
|
||||
color: white;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
## See also
|
||||
|
||||
- [Form Field Validator interface](../../core/interfaces/form-field-validator.interface.md)
|
||||
- [Extensibility](../../user-guide/extensibility.md)
|
||||
- [Form rendering service](../../core/services/form-rendering.service.md)
|
||||
- [Form field model](../../core/models/form-field.model.md)
|
||||
- [Form service](../services/form-cloud.service.md)
|
||||
67
docs/process-services-cloud/services/form-cloud.service.md
Normal file
67
docs/process-services-cloud/services/form-cloud.service.md
Normal file
@@ -0,0 +1,67 @@
|
||||
---
|
||||
Title: Form service
|
||||
Title: Form cloud service
|
||||
Added: v3.2.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-04-02
|
||||
---
|
||||
|
||||
# [Form cloud service](../../../lib/process-services-cloud/src/lib/form/services/form-cloud.service.ts "Defined in form-cloud.service.ts")
|
||||
|
||||
Implements Process Services form methods
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```ts
|
||||
import { FormService } from '@alfresco/adf-core';
|
||||
|
||||
@Component(...)
|
||||
class MyComponent {
|
||||
|
||||
constructor(formService: FormService) {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
### Methods
|
||||
|
||||
- `parseForm(json: any, data?:`[`TaskVariableCloud,`](../../../lib/process-services-cloud/src/lib/form/models/task-variable-cloud.model.ts)`readOnly: boolean = false):`[`FormModel`](../../../lib/core/form/components/widgets/core/form.model.ts)
|
||||
Parses JSON data to create a corresponding [`Form`](../../../lib/process-services-cloud/src/lib/form/models/form-cloud.model.ts) model.
|
||||
- `json` - JSON to create the form
|
||||
- `data` - (Optional) [`Values`](../../../lib/process-services-cloud/src/lib/form/models/task-variable-cloud.model.ts) for the form fields
|
||||
- `readOnly` - Should the form fields be read-only?
|
||||
|
||||
- `saveTaskForm(appName: string, taskId: string, formId: string, formValues: FormValues):`[`Observable`](http://reactivex.io/documentation/observable.html)`<any>`
|
||||
Saves task [`form`](../../../lib/process-services-cloud/src/lib/form/models/form-cloud.model.ts).
|
||||
- `appName` - App Name
|
||||
- `taskId` - Task Id
|
||||
- `formId` - Form Id
|
||||
- `formValues` - [`Form Values`](../../../lib/core/form/components/widgets/core/form-values.ts)
|
||||
|
||||
- `completeTaskForm(appName: string, taskId: string, formId: string, formValues: FormValues, outcome: string):`[`Observable`](http://reactivex.io/documentation/observable.html)`<any>`
|
||||
Completes task [`form`](../../../lib/process-services-cloud/src/lib/form/models/form-cloud.model.ts)
|
||||
- `appName` - App Name
|
||||
- `taskId` - Task Id
|
||||
- `formId` - Form Id
|
||||
- `formValues` - [`Form Values`](../../../lib/core/form/components/widgets/core/form-values.ts)
|
||||
- `outcome` - (Optional) [`Form`](../../../lib/process-services-cloud/src/lib/form/models/form-cloud.model.ts) Outcome
|
||||
|
||||
- `getTaskForm(appName: string, taskId: string):`[`Observable`](http://reactivex.io/documentation/observable.html)`<any>`
|
||||
Get form defintion of a task
|
||||
- `appName` - App Name
|
||||
- `taskId` - Task Id
|
||||
|
||||
- `getForm(appName: string, formId: string):`[`Observable`](http://reactivex.io/documentation/observable.html)`<any>`
|
||||
Get a form definition
|
||||
- `appName` - App Name
|
||||
- `formId` - Form Id
|
||||
|
||||
- `getTask(appName: string, taskId: string):`[`Observable`](http://reactivex.io/documentation/observable.html)<[`TaskDetailsCloudModel`](../../../lib/process-services-cloud/src/lib/task/start-task/models/task-details-cloud.model.ts)>
|
||||
Gets details of a task.
|
||||
- `appName` - App Name
|
||||
- `taskId` - Task Id
|
||||
|
||||
- `getTaskVariables(appName: string, taskId: string):`[`Observable`](http://reactivex.io/documentation/observable.html)<[`TaskVariableCloud`](../../../lib/process-services-cloud/src/lib/form/models/task-variable-cloud.model.ts)[]>
|
||||
Gets variables of a task.
|
||||
- `appName` - App Name
|
||||
- `taskId` - Task Id
|
||||
Reference in New Issue
Block a user