alfresco-ng2-components/docs/process-services-cloud/components/user-task-cloud.component.md

Title, Added, Status, Last reviewed

Title	Added	Status	Last reviewed
User Task Cloud Component	2025-02-05	Active	2025-02-05

User Task Cloud Component

Based on property taskDetails: TaskDetailsCloudModel shows a form or a screen.

Basic Usage

<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 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

<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

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, showRefreshButtonor 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 field model
• Form cloud service