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
108
docs/process-services-cloud/components/screen-cloud.component.md
Normal file
108
docs/process-services-cloud/components/screen-cloud.component.md
Normal file
@@ -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()"
|
||||
/>
|
||||
```
|
||||
@@ -0,0 +1,51 @@
|
||||
---
|
||||
Title: User Task Cloud Buttons Component
|
||||
Added: 2025-02-05
|
||||
Status: Active
|
||||
Last reviewed: 2025-02-05
|
||||
---
|
||||
|
||||
# User Task Cloud Buttons Component
|
||||
|
||||
Provides reusable component with buttons related to tasks. It contains three buttons: cancel, claim, unclaim.
|
||||
Visibility of each button is controlled by input property.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-cloud-user-task-cloud-buttons
|
||||
[appName]="appName"
|
||||
[canClaimTask]="canClaimTask()"
|
||||
[canUnclaimTask]="canUnclaimTask()"
|
||||
[showCancelButton]="showCancelButton"
|
||||
[taskId]="taskId"
|
||||
(cancelClick)="onCancelClick()"
|
||||
(claimTask)="onClaimTask()"
|
||||
(unclaimTask)="onUnclaimTask()"
|
||||
(error)="onError($event)"
|
||||
/>
|
||||
```
|
||||
|
||||
## 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. |
|
||||
| taskId | `string` | | Task id to fetch corresponding form and values. |
|
||||
| showCancelButton | `boolean` | true | Toggle rendering of the `Cancel` button. |
|
||||
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
|--------------------|------------------------|--------------------------------------------|
|
||||
| cancelClick | `EventEmitter<any>` | Emitted when the task is cancelled. |
|
||||
| error | `EventEmitter<any>` | Emitted when any error occurs. |
|
||||
| claimTask | `EventEmitter<string>` | Emitted when the task is claimed. |
|
||||
| unclaimTask | `EventEmitter<string>` | Emitted when the task is unclaimed. |
|
||||
|
||||
|
||||
@@ -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