@atlas-engine-contrib/atlas-ui_user-interaction-component v9.2.0
User Interaction Component 
The user interaction component displays UserTasks and ManualTasks and handels the communication with the 5Minds Engine.
There are two ways of displaying UserTasks:
- Custom Forms via iFrames (with the
customForms
property) - Dynamic Forms as default, if no customForm is set, or the customForm could not be found
ManualTasks are always displayed the same way: One headline and two buttons.
This compoment can be included in any application that supports Web Components.
Image: Participant overview. Note: Please continue reading for more details.
Usage
Add this project as a dependency:
npm install --save @atlas-engine-contrib/atlas-ui_user-interaction-component
Import the component into your bundle:
import {registerWebComponents} from '@atlas-engine-contrib/atlas-ui_user-interaction-component';
registerWebComponents();
Use the component in your markup:
<user-interaction-component
id="user-interaction"
engine-base-url="http://localhost:56000"
identity='{"token": "ZHVtbXlfdG9rZW4=","userId": "dummy_token"}'
custom-form-config="{}"
>
</user-interaction-component>
All attributes are optional at design time. It is possible to set them with JavaScript later.
Attribute | Optional | Description |
---|---|---|
engine-base-url | no | Used to communicate with the 5Minds Engine |
identity | no | A valid identity that is accepted by the 5Minds Engine |
custom-form-config | no | An object containing the mapping for customForms |
disable-auto-wait | yes | Disables the waiting for new UserTasks: If set to true you must call displayUserTask(...) or displayManualTask(...) . |
Example: Access the compoment with JavaScript:
const component = document.getElementById('user-interaction');
// Set the customForm config
const customFormConfig = {
'myExampleControl': 'https://controls.dynamic.5minds.de/',
'serverSideRenderedForm': {
mode: 'post',
url: 'https://customforms-test.5minds.de/test.php',
}
};
component.setAttribute(
'custom-form-config',
JSON.stringify(customFormConfig)
);
// Use another engine url
compoment.setAttribute('engine-base-url', 'http://localhost:58001');
// Set or change the identity
compoment.setAttribute('identity', { /* ... */ });
// Display a specific UserTask
component.displayUserTask(correlationId, flowNodeInstanceId);
// Display a specific ManualTask
component.displayManualTask(correlationId, flowNodeInstanceId);
For more examples see the examples folder.
Serverside rendered CustomForms
By default the user-interaction-component uses the built in request mechanism of the IFrame
to request the customForm.
This results in a very simple GET
request, which cannot include any UserTask specific data.
This is a problem when using a serverside rendered customForm, as the server needs the data to render the html.
To solve this, you can set the mode
of each customForm:
const customFormConfig = {
(...)
'serverSideRenderedForm': {
mode: 'post',
url: 'https://customforms-test.5minds.de/test.php',
}
(...)
};
If the mode is set to post
, the user-interaction-component will make a POST
request to the configured url.
The request will contain all relevant data in the body and the current authorization token as Authorization
header.
Development
The user interaction component can display different components, depending on the type of the task displayed.
The component distinguishs between UserTasks and ManualTasks.
UserTasks are displayed using the CustomFormComponent
or DynamicFormComponent
,
depending on whether or not a customForm
property is set on the UserTask in question.
Image: Decision tree for UserTasks and ManualTasks.
At the moment, we support three types of form components:
DynamicFormComponent
This will display a so called dynamic form. In this type of form, all formFields of the UserTask will be mapped to a simple HTML input.
This type of form is used as a default, if no customForm
has been set, or the referenced customForm
could not be found.
CustomFormComponent
All UserTasks with customForm are displayed using an <iframe>
element.
The user interaction component maps the customForm
field to an url
, using the custom-form-config
attribute.
Then an IFrame
with the target url is created.
The IFrame
and the CustomFormComponent
exchange messages, using the message
event:
Image: IFrame
message flow
There are three operations for completing a UserTask:
- Finish: Finishes the UserTask with the given result, thereby continuing the ProcessInstance
- Suspend: Saves the UserTask's current state and allows to finish it later
- Abort: Aborts the UserTask entirely
- Caution: This will also terminate the ProcessInstance that contains the UserTask!
A note on UserTask Suspension:
customForms
can make use of the state argument to collect some data for the UserTask.
If the same customForm
is displayed later again, the last saved state is used as a baseline.
The component uses the ICustomFormStatePersistenceService to persist its state.
Caching
The CustomFormComponent
keeps the IFrame
loaded after processing the UserTask.
If another UserTask needs to be displayed by the same IFrame
later, the CustomFormComponent
will sender another displayUserTask
message to the IFrame
.
ManualTaskComponent
All ManualTasks are display using this component.
It will display the name of the ManualTask, a finish
button and a cancel
button.
Installation
Install dependencies:
npm install
Build the sources:
npm run build
Dev Build & Watch
First start a webpack watch process at the root folder. This will cause the bundle to be recompiled when any changes are made.
npm run watch
The best way to test the compoment during development is to use one of the examples.
Choose an example from the examples folder
and run it.
Because the example watchtes the root folder, it will also update when the bundle of the component is recompiled.
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
11 months ago
11 months ago
12 months ago
12 months ago
11 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
2 years ago
3 years ago
3 years ago
3 years ago
2 years ago
3 years ago
2 years ago
3 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
2 years ago
3 years ago
3 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago