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
2025-07-24 17:32:15 +00:00 · 2025-02-05 15:18:11 +01:00
parent a1a3f97ec8
commit 8e3bd154ed
12 changed files with 397 additions and 32 deletions
--- a/docs/process-services-cloud/components/screen-cloud.component.md
+++ b/docs/process-services-cloud/components/screen-cloud.component.md
@@ -0,0 +1,108 @@
+---
+Title: Screen Cloud Component
+Added: 2025-02-05
+Status: Active
+Last reviewed: 2025-02-05
+---
+
+# Screen Cloud Component
+
+Provides space for a dynamic component. Dynamic component should implement interface UserTaskCustomUi. 
+Dynamic component must be registered with service that extends ScreenRenderingService. Key for component
+is a string taken from property formKey stored in xml. In component this value is stored in property screenId.
+To register component use method register, example:
+
+```typescript
+import { ScreenRenderingService } from '@alfresco/adf-process-services-cloud';
+
+export class YourService extends ScreenRenderingService {
+
+    constructor() {
+        super();
+        this.register(
+            {
+                [formKeyThatIdentifiesDynamicComponent]: () => DynamicComponent
+            },
+            true
+        );
+    }
+}
+```
+
+## Basic Usage
+
+```html
+<adf-cloud-task-screen 
+    [appName]="appName"
+    [canClaimTask]="canClaimTask()"
+    [canUnclaimTask]="canUnclaimTask()"
+    [processInstanceId]="taskDetails.processInstanceId"
+    [screenId]="screenId"
+    [showCancelButton]="showCancelButton"
+    [taskName]="taskDetails.name"
+    [taskId]="taskId"
+    (cancelTask)="onCancelClick()"
+    (claimTask)="onClaimTask()"
+    (error)="onError($event)"
+    (taskCompleted)="onCompleteTask()"
+    (taskSaved)="onFormSaved()"
+    (unclaimTask)="onUnclaimTask()"
+/>
+```
+
+## Class members
+
+### Properties
+
+| Name                      | Type                                  | Default value | Description                                       |
+|---------------------------|---------------------------------------|---------------|---------------------------------------------------|
+| appName                   | `string`                              | ""            | App id to fetch corresponding form and values.    |
+| canClaimTask              | `boolean`                             |               | Boolean informing if a task can be claimed.       |
+| canUnclaimTask            | `boolean`                             |               | Boolean informing if a task can be unclaimed.     |
+| processInstanceId         | `string`                              |               | Process Instance Id to fetch corresponding data.  |
+| readOnly                  | `boolean`                             | false         | Toggle readonly state of the task.                |
+| showCancelButton          | `boolean`                             | true          | Toggle rendering of the `Cancel` button.          |
+| screenId                  | `string`                              |               | Screen id to create dynamic component             |
+| taskId                    | `string`                              |               | Task id to fetch corresponding form and values.   |
+| taskName                  | `string`                              |               | Name of the task.                                 |
+
+
+### Events
+
+| Name               | Type                   | Description                                |
+|--------------------|------------------------|--------------------------------------------|
+| cancelTask         | `EventEmitter<any>`    | Emitted when the task is cancelled.        |
+| error              | `EventEmitter<any>`    | Emitted when any error occurs.             |
+| taskSaved          | `EventEmitter`         | Emitted when the task is saved.            |
+| claimTask          | `EventEmitter<string>` | Emitted when the task is claimed.          |
+| taskCompleted      | `EventEmitter<string>` | Emitted when the task is completed.        |
+| unclaimTask        | `EventEmitter<string>` | Emitted when the task is unclaimed.        |
+
+
+#### Enabling fullscreen display for the dynamic component
+
+Dynamic component must implement logic for method switchToDisplayMode.
+
+**MyView.component.html**
+
+```html
+<button (click)="adfCloudTaskScreen.switchToDisplayMode('fullScreen')">Full screen</button>
+
+<adf-cloud-task-screen  
+    #adfCloudTaskScreen
+    [appName]="appName"
+    [canClaimTask]="canClaimTask()"
+    [canUnclaimTask]="canUnclaimTask()"
+    [processInstanceId]="taskDetails.processInstanceId"
+    [screenId]="screenId"
+    [showCancelButton]="showCancelButton"
+    [taskName]="taskDetails.name"
+    [taskId]="taskId"
+    (cancelTask)="onCancelClick()"
+    (claimTask)="onClaimTask()"
+    (error)="onError($event)"
+    (taskCompleted)="onCompleteTask()"
+    (taskSaved)="onFormSaved()"
+    (unclaimTask)="onUnclaimTask()"
+/>
+```