mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-10-29 15:21:39 +00:00
659805ab20
* [AAE-33090] Add optional checkbox for 'open next task' feature * [AAE-33090] move translation to LABEL property * [33090] add unit tests * add tests for checkbox value * [AAE-33090] remove some comments * [AAE-33090] update documentation * AAE-33090 kind of a typo * AAE-33090 remove all comments
104 lines
6.5 KiB
Markdown
104 lines
6.5 KiB
Markdown
---
|
|
Title: User Task Cloud Component
|
|
Added: 2025-02-05
|
|
Status: Active
|
|
Last reviewed: 2025-02-05
|
|
---
|
|
|
|
# User Task Cloud Component
|
|
|
|
Based on property taskDetails: TaskDetailsCloudModel shows a form or a screen.
|
|
|
|
## Basic Usage
|
|
|
|
```html
|
|
<adf-cloud-user-task
|
|
[appName]="appName"
|
|
[displayModeConfigurations]="displayConfigurations"
|
|
[showTitle]="false"
|
|
[showValidationIcon]="false"
|
|
[taskId]="taskId"
|
|
(cancelClick)="onCancelForm()"
|
|
(error)="onError($event)"
|
|
(executeOutcome)="onExecuteOutcome($event)"
|
|
(formContentClicked)="onFormContentClicked($event)"
|
|
(formSaved)="onFormSaved()"
|
|
(taskCompleted)="onCompleteTaskForm()"
|
|
(taskUnclaimed)="navigateToSelectedFilter(currentFilter.id)"
|
|
(onTaskLoaded)="onTaskDetailsLoaded($event)"
|
|
/>
|
|
```
|
|
|
|
## Class members
|
|
|
|
### Properties
|
|
|
|
| Name | Type | Default value | Description |
|
|
| ------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------- |
|
|
| appName | `string` | "" | App id to fetch corresponding form and values. |
|
|
| isNextTaskCheckboxChecked | `boolean` | false | Whether the `Open next task` checkbox is checked by default or not. |
|
|
| readOnly | `boolean` | false | Toggle readonly state of the task. |
|
|
| showCancelButton | `boolean` | true | Toggle rendering of the `Cancel` button. |
|
|
| showCompleteButton | `boolean` | true | Toggle rendering of the `Complete` button. |
|
|
| showNextTaskCheckbox | `boolean` | false | Toggle rendering of the `Open next task` checkbox. |
|
|
| showTitle | `boolean` | true | Toggle rendering of the form title. |
|
|
| showValidationIcon | `boolean` | true | Toggle rendering of the `Validation` icon. |
|
|
| taskId | `string` | | Task id to fetch corresponding form and values. |
|
|
| displayModeConfigurations | `FormCloudDisplayModeConfiguration[]` | | The available display configurations for the form |
|
|
|
|
### Events
|
|
|
|
| Name | Type | Description |
|
|
| ------------------------------ | ------------------------------------- | ------------------------------------------------------------------------------------------------------ |
|
|
| cancelClick | `EventEmitter<string>` | Emitted when the cancel button is clicked. |
|
|
| error | `EventEmitter<any>` | Emitted when any error occurs. |
|
|
| executeOutcome | `EventEmitter<FormOutcomeEvent>` | Emitted when any outcome is executed. Default behaviour can be prevented via `event.preventDefault()`. |
|
|
| formContentClicked | `EventEmitter<ContentLinkModel>` | Emitted when form content is clicked. |
|
|
| formSaved | `EventEmitter<FormModel>` | Emitted when the form is saved. |
|
|
| nextTaskCheckboxCheckedChanged | `EventEmitter<MatCheckboxChange>` | Emitted when the `Open next task` checkbox was toggled. |
|
|
| onTaskLoaded | `EventEmitter<TaskDetailsCloudModel>` | Emitted when a task is loaded. |
|
|
| taskClaimed | `EventEmitter<string>` | Emitted when the task is claimed. |
|
|
| taskCompleted | `EventEmitter<string>` | Emitted when the task is completed. |
|
|
| taskUnclaimed | `EventEmitter<string>` | Emitted when the task is unclaimed. |
|
|
|
|
#### Enabling fullscreen display for the form of the task
|
|
|
|
Provide a `displayModeConfiguration` array object containing the fullscreen configuration. You can use the configuration provided in the [`DisplayModeService`](../../../lib/process-services-cloud/src/lib/form/services/display-mode.service.ts) as a static member `DisplayModeService.IMPLEMENTED_DISPLAY_MODE_CONFIGURATIONS`, or configure your own if you want to customise the options for the fullscreen display mode.
|
|
|
|
**MyView.component.html**
|
|
|
|
```html
|
|
<button (click)="adfCloudTaskForm.switchToDisplayMode('fullScreen')">Full screen</button>
|
|
|
|
<adf-cloud-task-form #adfCloudTaskForm
|
|
[appName]="appName"
|
|
[taskId]="selectedTask?.id"
|
|
[showTitle]="false"
|
|
[showRefreshButton]="false"
|
|
[showValidationIcon]="false"
|
|
[displayModeConfigurations]="displayConfigurations">
|
|
</adf-cloud-task-form>
|
|
```
|
|
|
|
**MyView.component.ts**
|
|
|
|
```ts
|
|
import { DisplayModeService } from '@alfresco/adf-process-services-cloud';
|
|
|
|
export class MyView {
|
|
|
|
get displayConfigurations() {
|
|
return DisplayModeService.IMPLEMENTED_DISPLAY_MODE_CONFIGURATIONS;
|
|
}
|
|
|
|
}
|
|
```
|
|
|
|
When the `displayModeConfigurations` contains the configuration for the fullscreen display, in the header of the form, a button to switch to fullscreen is displayed. Keep in mind that the header of the form is visible only if any of the parameters `showTitle`, `showRefreshButton`or `showValidationIcon` is `true`, but it is also possible to switch to the fullscreen display using a button that you can place wherever you want as shown in the previous example.
|
|
|
|
## See also
|
|
|
|
- [Form component](./form-cloud.component.md)
|
|
- [Form field model](../../core/models/form-field.model.md)
|
|
- [Form cloud service](../services/form-cloud.service.md)
|