mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
AAE-30336 Screens updates (#10619)
* [AAE-30336] updated interface and removed buttons * [AAE-30336] added fullscreen support for dynamic component * [AAE-30336] fullscreen feature and css fix * [AAE-30336] fixed wrong subscription, removed obsolete code * [AAE-30336] removed obsolete variable * [AAE-30336] updated unit test and model * [AAE-30336] updated documentation and comments
This commit is contained in:
tomasz hanaj
GitHub
@@ -0,0 +1,103 @@
|
||||
---
|
||||
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"
|
||||
[fieldValidators]="formFieldValidators"
|
||||
[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. |
|
||||
| readOnly | `boolean` | false | Toggle readonly state of the task. |
|
||||
| fieldValidators | `FormFieldValidator[]` | | Allows to provide additional validators to the form field. |
|
||||
| showCancelButton | `boolean` | true | Toggle rendering of the `Cancel` button. |
|
||||
| showCompleteButton | `boolean` | true | Toggle rendering of the `Complete` button. |
|
||||
| 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. |
|
||||
| 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)
|
||||
Reference in New Issue
Block a user