9.2.0 • Published 11 months ago

@atlas-engine-contrib/atlas-ui_user-interaction-component v9.2.0

Weekly downloads
-
License
ISC
Repository
github
Last release
11 months ago

User Interaction Component Master build status

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.

Participant overview

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.

AttributeOptionalDescription
engine-base-urlnoUsed to communicate with the 5Minds Engine
identitynoA valid identity that is accepted by the 5Minds Engine
custom-form-confignoAn object containing the mapping for customForms
disable-auto-waityesDisables 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.

Decision Tree

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:

Message Events

Image: IFrame message flow

There are three operations for completing a UserTask:

  1. Finish: Finishes the UserTask with the given result, thereby continuing the ProcessInstance
  2. Suspend: Saves the UserTask's current state and allows to finish it later
  3. 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.

9.2.0-alpha.1

11 months ago

9.1.0

12 months ago

9.2.0

11 months ago

9.1.0-alpha.1

12 months ago

9.0.0-alpha.1

2 years ago

9.0.0

2 years ago

7.1.0

2 years ago

8.0.0

2 years ago

8.1.0-alpha.1

2 years ago

8.0.0-beta.2

2 years ago

8.0.0-beta.1

2 years ago

8.0.0-alpha.6

2 years ago

7.0.2

2 years ago

7.1.0-alpha.3

2 years ago

8.0.0-alpha.3

2 years ago

8.0.0-alpha.4

2 years ago

8.0.0-alpha.5

2 years ago

7.0.1

2 years ago

7.1.0-alpha.2

2 years ago

7.0.0-alpha.6

2 years ago

8.0.0-alpha.1

2 years ago

8.0.0-alpha.2

2 years ago

7.0.0

2 years ago

7.1.0-alpha.1

2 years ago

7.0.0-beta.2

2 years ago

7.0.0-beta.1

2 years ago

7.0.0-alpha.1

3 years ago

7.0.0-alpha.3

2 years ago

7.0.0-alpha.2

3 years ago

7.0.0-alpha.5

2 years ago

7.0.0-alpha.4

2 years ago

6.6.0-alpha.2

3 years ago

6.6.0-alpha.3

3 years ago

6.6.0

3 years ago

6.7.0-alpha.1

3 years ago

6.5.0

3 years ago

6.6.0-alpha.1

3 years ago

6.5.0-alpha.3

3 years ago

6.5.0-beta.2

3 years ago

6.5.0-alpha.2

3 years ago

6.5.0-beta.1

3 years ago

6.5.0-alpha.1

3 years ago

6.4.0

3 years ago

6.4.0-alpha.8

3 years ago

6.4.0-beta.3

3 years ago

6.4.0-alpha.7

3 years ago

6.4.0-alpha.6

3 years ago

6.4.0-alpha.5

3 years ago

6.4.0-alpha.4

3 years ago

6.4.0-alpha.3

3 years ago

6.4.0-beta.2

3 years ago

6.4.0-beta.1

3 years ago

6.4.0-alpha.2

3 years ago

6.4.0-alpha.1

3 years ago

6.3.0

3 years ago

6.3.0-beta.2

3 years ago

6.3.0-alpha.3

3 years ago

6.3.0-beta.1

3 years ago

6.3.0-alpha.2

3 years ago

6.3.0-alpha.1

4 years ago

6.2.0

4 years ago

6.2.0-beta.1

4 years ago

6.2.0-alpha.4

4 years ago

6.2.0-alpha.3

4 years ago

6.2.0-alpha.2

4 years ago

6.2.0-alpha.1

4 years ago

6.1.0

4 years ago

6.1.0-alpha.5

4 years ago

6.1.0-beta.4

4 years ago

6.1.0-alpha.4

4 years ago

6.1.0-beta.3

4 years ago

6.1.0-alpha.3

4 years ago

6.1.0-beta.2

4 years ago

6.1.0-beta.1

4 years ago

6.1.0-alpha.2

4 years ago

6.1.0-alpha.1

4 years ago

6.0.1-beta.1

4 years ago

6.0.1

4 years ago

6.0.0-beta.5

4 years ago

6.0.0

4 years ago

6.0.0-beta.3

4 years ago

6.0.0-beta.2

4 years ago

6.0.0-beta.1

4 years ago

6.0.0-alpha.2

4 years ago

6.0.0-alpha.1

4 years ago

5.1.3

4 years ago

5.1.2

4 years ago

5.1.2-alpha.5

4 years ago

5.1.2-alpha.4

4 years ago

5.1.2-alpha.3

4 years ago

5.1.2-beta.1

4 years ago

5.1.2-alpha.2

4 years ago

5.1.2-alpha.1

4 years ago

5.1.1

4 years ago

5.1.1-alpha.4

5 years ago

5.1.1-alpha.3

5 years ago

5.1.1-beta.1

5 years ago

5.1.1-alpha.2

5 years ago

5.1.1-alpha.1

5 years ago

5.1.0-alpha.9

5 years ago

5.1.0-alpha.8

5 years ago

5.1.0-beta.5

5 years ago

5.1.0

5 years ago

5.1.0-beta.4

5 years ago

5.1.0-alpha.7

5 years ago

5.1.0-alpha.6

5 years ago

5.1.0-alpha.5

5 years ago

5.1.0-beta.3

5 years ago

5.1.0-alpha.4

5 years ago

5.1.0-alpha.3

5 years ago

5.0.2

5 years ago

5.1.0-alpha.2

5 years ago

5.1.0-beta.2

5 years ago

5.1.0-beta.1

5 years ago

5.1.0-alpha.1

5 years ago

5.0.1-alpha.2

5 years ago

5.0.1-alpha.1

5 years ago

5.0.1

5 years ago

5.0.0

5 years ago

5.0.0-alpha.12

5 years ago

5.0.0-beta.5

5 years ago

5.0.0-alpha.11

5 years ago

5.0.0-alpha.10

5 years ago

5.0.0-alpha.9

5 years ago

5.0.0-beta.4

5 years ago

5.0.0-alpha.8

5 years ago

5.0.0-beta.3

5 years ago

5.0.0-alpha.7

5 years ago

5.0.0-alpha.6

5 years ago

5.0.0-alpha.5

5 years ago

5.0.0-beta.2

5 years ago

5.0.0-alpha.4

5 years ago

5.0.0-alpha.3

5 years ago

5.0.0-beta.1

5 years ago

5.0.0-alpha.2

5 years ago

5.0.0-alpha.1

5 years ago

4.2.0-alpha.3

5 years ago

4.2.0-beta.1

5 years ago

4.2.0-alpha.2

5 years ago

4.2.0-alpha.1

5 years ago

4.1.0

5 years ago

4.1.0-alpha.3

5 years ago

4.1.0-alpha.2

5 years ago

4.1.0-alpha.1

5 years ago

4.0.0

5 years ago

4.0.0-alpha.1

5 years ago

3.0.0-alpha.3

5 years ago

3.0.0

5 years ago

3.0.0-alpha.2

5 years ago

3.0.0-alpha.1

5 years ago

2.0.0-alpha.3

5 years ago

2.0.0

5 years ago

2.0.0-alpha.2

5 years ago

2.0.0-alpha.1

5 years ago

1.3.0-alpha.4

5 years ago

1.3.0-alpha.3

5 years ago

1.3.0-alpha.2

5 years ago

1.3.0-alpha.1

5 years ago

1.2.0

5 years ago

1.2.0-alpha.2

5 years ago

1.2.0-alpha.1

5 years ago

1.1.0

5 years ago

1.1.0-alpha.6

5 years ago

1.0.1

5 years ago

1.0.1-alpha.1

5 years ago

1.1.0-alpha.5

5 years ago

1.1.0-alpha.4

5 years ago

1.1.0-alpha.3

5 years ago

1.1.0-alpha.2

5 years ago

1.1.0-alpha.1

5 years ago

1.0.0

5 years ago

1.0.0-alpha.2

5 years ago

1.0.0-alpha.1

5 years ago

0.4.1-alpha.14

5 years ago

0.4.1-alpha.13

5 years ago

0.4.1-alpha.12

5 years ago

0.4.1-alpha.11

5 years ago

0.4.1-alpha.10

5 years ago

0.4.1-alpha.9

5 years ago

0.4.1-alpha.8

5 years ago

0.4.1-alpha.7

5 years ago

0.4.1-alpha.6

5 years ago

0.4.1-alpha.5

5 years ago

0.4.1-alpha.4

5 years ago

0.4.1-alpha.3

5 years ago

0.4.1-alpha.2

5 years ago

0.4.1-alpha.1

5 years ago

0.4.1

5 years ago

0.4.0

5 years ago