xAPPnow LOW CODE PLATFORM - User Manual 

Still no account yet?
×

Basic Training - BPMN Process Model

 
 

Chapter Overview

 
In this training chapter you will get familiar with basic process modeling according to the BPMN standard as well as further model types and low code development.
 
You will learn the typical model hierarchy consisting of a business process, a frontend service model type "User Task" and a UI page.
 
Additionally, you will use the xAPPnow User Portal, where you execute the user tasks of the process online.
 
 
Model Hierarchy:
 
The following graphic demonstrates the model hierarchy and the elements to link the related submodel.
 
 
Remark: A UI page can also be structured into UI panel, which itself can be linked to a reusable referenced UI panel.
 
 
 
 
 
 

Exercise

 
In this exercise you will create the business process below. Then you will link frontend service model User Task, which itself will be linked to a UI page.
 
 
Process Explanation:
 
  • The process is started in the lane of group "TeamA" by a start event.
  • The sequence flow of the start event triggers the first user task "Verify", which has to be executed by a user of group "TeamA".
  • After this user task "Verify" is finished by the user, the first gateway "OK?" is triggered by the sequence flow.
     
    CASE 1: Verification of group "Team A" is OK
    The conditional flow "YES" is executed, which triggers the joining gateway and subsequently the end event "Accepted"
 
CASE 2: Verification of group "Team A" is NOT OK
The conditional flow "NO" is executed, which triggers the second user task "Verify"
 
CASE 3: Verification of group "Team B" is OK
The conditional flow "YES" is executed, which triggers the joining gateway and subsequently the end event "Accepted"
 
CASE 4: Verification of group "Team B" is NOT OK
The conditional flow "NO" is executed, which triggers the end event "NOT Accepted"
 
 
 
 
 
 
Frontend Service Model "User Task" Explanation:
 
  • The user task model is started by a start event.
  • The sequence flow of the start event triggers the UI element "Hello World", which is linked to the UI page below.
  • The button flow "OK"of the UI page triggers the end event.
 
 
 
 
 
 
UI Page  Explanation:
 
  • The UI page contains two input fields "First Name" and "Last Name"
  • The checkbox "Valid Name" is used for the verification of the input data
  • The UI page is closed with button "OK"
 
 
 
 
 
 
 
Exercise 1: Create the Process Model
 
After login into Modeling Studio, create process model "Username_MyProcess“ in the model tree.
 
Remark: Add your user name as a prefix to the process model name to easily filter your personal process in the runtime environment (User Portal, Camunda).
 
  • Step 1: Open context menu of folder "Automation/Business Process" in the model tree
  • Step 2: Select "Create Model" to open dialog "Create Business Process Model"
  • Step 3: Enter model name "Username_MyProcess“ and keep option "Model Type: Process"
  • Step 4: Click button "Search" to open dialog "Select Template"
     
     
 
Basic Training - BPMN Process Model
 
 
 
  • Step 5: Select template "TemplateProcess" with double click or click button "Select"
 
 
 
Basic Training - BPMN Process Model
 
 
 
  • Step 6: Click button "OK" in dialog "Create Business Process Model" to add the new process model
 
 
Exercise 2: Model the Parent Process
 
  • Step 1: Open pool context menu and click at start event element to add it with label "Start" to first lane "TeamA"
  • Step 2: Select second lane and press F2 key to enter label "TeamB" or open TAB "General" SubTAB "Element" to enter role "TeamB"
 
 
 
Basic Training - BPMN Process Model
 
 
 
  • Step 3: Open context menu of start event and click at user task element to connect it with label "Verify"
     
 
 
Basic Training - BPMN Process Model
 
 
 
  • Step 4: Open context menu of user task "Verify" and click at exclusive gateway element to connect it with label "OK?" then drag&drop it above the exclusive gateway
 
 
 
Basic Training - BPMN Process Model
 
 
 
 
  • Step 5: Open context menu of exclusive gateway "OK?" and drag&drop a user task element into lane "TeamB" to connect it with label "Verify"
     
     
    Basic Training - BPMN Process Model
     
     
     
  • Step 6: Select conditional flow of exclusive gateway "OK?" and press F2 to enter label "NO" then drag&drop it to the middle of the conditional flow
  • Step 7: Open context menu of second user task "Verify" and click at exclusive gateway element to connect it with label "OK?"
     
     
     
    Basic Training - BPMN Process Model
     
     
     
  • Step 8: Open context menu of second exclusive gateway "OK?" and click at end event element to connect it with label "Not Accepted"
  • Step 9: Select conditional flow of second exclusive gateway "OK?" and press F2 to enter label "NO" then drag&drop it to the middle of the conditional flow
     
     
     
     
    Basic Training - BPMN Process Model
     
     
     
  • Step 10: Open context menu of exclusive gateway "OK?" of lane "TeamA" and drag&drop an exclusive gateway element to connect it as joining exclusive gateway.
     
     
     
    Basic Training - BPMN Process Model
     
     
     
  • Step 11: Select this new conditional flow of exclusive gateway "OK?" and click F2 to enter label "YES" then drag&drop it to the middle of the conditional flow
  • Step 12: Open context menu of conditional flow "YES" to mark it as a default flow         
 
 
 
Basic Training - BPMN Process Model
 
 
 
  • Step 13: Open context menu of joining exclusive gateway and click at end event element to connect it with label "Accepted"
  • Step 14: Draw a conditional flow from second exclusive gateway "OK?" to the joining exclusive gateway
  • Step 15: Select this conditional flow and press F2 to enter label "YES" then drag&drop it to the middle of the flow
  • Step 16: Open context menu of conditional flow "YES" to mark it as a default flow    
 
 
 
Basic Training - BPMN Process Model
 
 
 
  • Step 17: Select both user tasks using CTRL + left click and open context menu to to set element color light blue
 
 
 
Basic Training - BPMN Process Model
 
 
 
  • Step 18: Open context menu of end event "Not Accepted" to set label color red and label font bold
 
 
 
Basic Training - BPMN Process Model
 
 
 
Exercise 3: Link a User Task Model to the User Task Elements of the Process
 
  • Step 1: Select first user task “Verify“ to open TAB "General" SubTAB "Element"
  • Step 2: Click button “Search“ to open dialog “Select or Create Submodel“
 
 
 
Basic Training - BPMN Process Model
 
 
 
  • Step 3: Select user task model “Demo“ with double click or click button "Select"
     
 
 
Basic Training - BPMN Process Model
 
 
 
  • Step 4: Repeat Steps 1 to 3 for second user task "Verify"
 
 
Exercise 4: Link a UI Page Model to the UI Page Element of the User Task model
 
  • Step 1: Double click at any of the user tasks "Verify" to navigate to user task model "Demo"
  • Step 2: Select UI page “Hello World“ to open TAB "General" SubTAB "Element"
  • Step 3: Click button “Search“ to open dialog “Select or Create Submodel“
 
 
 
Basic Training - BPMN Process Model
 
 
 
  • Step 4: Select UI page “HelloWorld“ with double click or click button "Select"
 
 
 
Basic Training - BPMN Process Model
 
 
 
Exercise 5: Select the Button Flow of the UI Page "Hello World"
 
  • Step 1: Open context menu of button flow of UI Page "Hello World" to select button "OK“
 
 
 
Basic Training - BPMN Process Model
 
 
 
Exercise 6: Complete UI Page
 
  • Step 1: Double click at UI page element “Hello World“ to navigate to UI page model “Hello World“
  • Step 2: Open TAB "Data" to drag&drop attribute lastName to span below textfield First Name
     
     
     
    Basic Training - BPMN Process Model
     
     
     
  • Step 3: Keep the default options "Textfield" and "Create Label"  in dialog "Select Component" and press button "OK"
 
 
 
 
 
 
  • Step 4: Click button "Show/Hide Spans" to show free spans continously.
  • Step 5: Click button "Preview" to test the UI page in a new browser window.
  • Step 6: Click button "Back to Parent Model“ in the tool bar to navigate back until parent process is displayed again
     
 
 
Basic Training - BPMN Process Model
 
 
 
Exercise 10: Implement Flow Conditions
 
  • Step 1: Select conditional flow "NO" of first exclusive gateway "OK?" to open TAB "Implementation"
     
 
 
Basic Training - BPMN Process Model
 
 
 
  • Step 2: Type localData.processData.isValid at the left script area to access attribute "isValid"
  • Step 3: Select value "==" from the combobox to specify condition operator
  • Step 4: Type false at the right script area
     
     
     
    Basic Training - BPMN Process Model
     
     
     
  • Step 5: Select conditional flow "NO" of second exclusive gateway "OK?" to open TAB "Implementation"
  • Step 6: Repeat steps 2 to 4 to implement condition of selected flow
     
 
Exercise 11: Publish Process Model “Username_MyProcess“
 
  • Step 1: Click button "Publish" to open the dialog "Publish Model"
  • Step 2: Enter username and password and set options "Start Process" and "Cascade"
  • Step 3: Click button "OK" to open dialog "Publish Models"
Basic Training - BPMN Process Model
 
  • Step 4: Click to select "All Models" and click button "Publish" to validate and publish both models then click button "Close"
 
Basic Training - BPMN Process Model
 
 
Exercise 12: Execute Process in User Portal with end event "Accepted"
 
In this exercise the process will be executed with end event "Accepted". Therefore, the checkbox "Valid Name?" has to be checked in UI page of task "Verify"
 
Remark: At this point the process was started automatically by the publish function.
 
  • Step 1: Login into User Portal with user "john", who belongs to group "TeamA"
  • Step 2: Select task "Verify" with double click or click button "Start" to initiate the task
     
     
     
    Basic Training - BPMN Process Model
     
  • Step 3: Verify "First Name" and "Last Name"
  • Step 4: Mark "Valid Name?" checked and click button "OK" to complete the task
     
     
     
    Basic Training - BPMN Process Model
     
     
     
  • Step 5: Login into User Portal with user "jane", who belongs to group "TeamB"
  • Step 6: Click button "Refresh" of the task list of user "jane" to check that no task "Verify" exists, because the process has terminated.
     
     
Exercise 13: Execute Process in User Portal with end event "Not Accepted"
 
In this exercise the process will be executed with end event "Not Accepted". Therefore, the checkbox "Valid Name?" has to be unchecked in UI page of task "Verify"
 
Remark: At this point the process has be started manually, first.
 
  • Step 1: Login into User Portal with user "john", who belongs to group "TeamA"
  • Step 2: Open menu function "Processes" and select process “Username_MyProcess“ with double click or click button "Start" to start the process
     
     
     
    Basic Training - BPMN Process Model
     
     
     
  • Step 3: Open menu function "My Tasks" and select task "Verify" with double click or click button "Start" to initiate the task
  • Step 4: Verify "First Name" and "Last Name"
  • Step 5: Keep "Valid Name?" unchecked and click button "OK", then process flow goes to task "Verify" of lane "TeamB"
 
 
 
Basic Training - BPMN Process Model
 
 
 
  • Step 6: Login into User Portal with user "jane", who belongs to group "TeamB"
  • Step 7: Select task "Verify" with double click or click button "Start" to initiate the task
  • Step 8: Verify "First Name" and "Last Name"
  • Step 9: Keep "Valid Name?" unchecked and click button "OK" to complete the task, which terminates the process with end event "Not Accepted"
 
 
 
 
 
1

Enter Model Name

1. Enter Model Name
Enter model name "Username_MyProcess“
2

Select Model Type "Process"

2. Select Model Type "Process"
Keep default model type "Process"
 
3

Search Template

3. Search Template
Click button "Search" to open dialog "Select Template"
 
1

Select Template

1. Select Template
Select template "TemplateProcess" with double click or click button "Select"
 
1

Add Start Event

1. Add Start Event
Open pool context menu and click at start event element to add it with label "Start" to first lane "TeamA"
2

Enter Group "TeamB"

2. Enter Group "TeamB"
Select second lane and press F2 to enter role "TeamB" or open TAB "General" SubTAB "Element" to enter role "TeamB"
 
1

Connect User Task "Verify"

1. Connect User Task "Verify"
 Open context menu of start event and click at user task element to connect it with label "Verify"
 
1

Connect Exclusive Gateway "OK?"

1. Connect Exclusive Gateway "OK?"
Open context menu of user task "Verify" and click at exclusive gateway element to connect it with label "OK?" then drag&drop it to the top of the exclusive gateway
 
1

Connect User Task "Verify"

1. Connect User Task "Verify"
Open context menu of exclusive gateway "OK?" and drag&drop a user task element into lane "TeamB" to connect it with label "Verify"
 
1

Enter Label "NO"

1. Enter Label "NO"
Select conditional flow of exclusive gateway "OK?" and press F2 to enter label "NO" then drag&drop it to the middle of the conditional flow
2

Connect Exclusive Gateway "OK?"

2. Connect Exclusive Gateway "OK?"
Open context menu of second user task "Verify" and click at exclusive gateway element to connect it with label "OK?"
 
1

Connect End Event "Not Accepted"

1. Connect End Event "Not Accepted"
Open context menu of second exclusive gateway "OK?" and click at end event element to connect it with label "Not Accepted"
2

Enter Label "NO"

2. Enter Label "NO"
Select conditional flow of second exclusive gateway "OK?" and press F2 to enter label "NO" then drag&drop it to the middle of the conditional flow
 
1

Connect Joining Exclusive Gateway

1. Connect Joining Exclusive Gateway
Open context menu of exclusive gateway "OK?" of lane "TeamA" and drag&drop an exclusive gateway element to connect it as joining exclusive gateway.
 
1

Enter
Label "YES"

1. Enter Label "YES"
Select conditional flow of exclusive gateway "OK?" and click F2 to enter label "YES" then drag&drop it to the middle of the conditional flow
2

Mark
Default Flow

2. Mark Default Flow
Open context menu of conditional flow "YES" to mark it as a default flow    
 
1

Connect End Event "Accepted"

1. Connect End Event "Accepted"
Open context menu of joining exclusive gateway and click at end event element to connect it with label "Accepted"
2

Draw Conditional Flow

2. Draw Conditional Flow
Draw a conditional flow from second exclusive gateway "OK?" to the joining exclusive gateway
3

Enter Label "YES"

3. Enter Label "YES"
Select this conditional flow and press F2 to enter label "YES" then drag&drop it to the middle of the flow
4

Mark Default Flow

4. Mark Default Flow
Open context menu of conditional flow "YES" to mark it as a default flow
 
1

Select Color

1. Select Color
Select both user tasks using CTRL + left click and open context menu to configure color light blue
 
1

Set Color and Font

1. Set Color and Font
Open context menu of end event "Not Accepted" to change label color to "red" and label font to "bold"    
 
1

Open SubTAB "Element"

1. Open SubTAB "Element"
Select first user task “Verify“ to open TAB "General" SubTAB "Element"
2

Search Submodel

2. Search Submodel
Click button “Search“ to open dialog “Select or Create Submodel“
 
1

Select User Task Model

1. Select User Task Model
Select user task model “Demo“ with double click or click button "Select"
 
 
1

Open SubTAB "Element"

1. Open SubTAB "Element"
Select UI page “Hello World“ to open TAB "General" SubTAB "Element"
2

Search Submodel

2. Search Submodel
Click button “Search“ to open dialog “Select or Create Submodel“
 
1

Select UI Page

1. Select UI Page
Select UI page “HelloWorld“ with double click or click button "Select"
 
1

Select Button Flow

 
Open context menu of button flow of UI Page "Hello World" to select button "OK“
 
1

Select Attribute

1. Select Attribute
Open TAB "Data" to select attribute lastName
2

Drag&drop Attribute

2. Drag&drop Attribute
Drag&drop attribute lastName to span below textfield First Name
 
1

Show/Hide Spans

1. Show/Hide Spans
Click button "Show/Hide Spans" to view or hide the spans
2

Preview UI Page

2. Preview UI Page
Click button "Preview" to test the UI page in a new browser window.
3

Navigate back to Parent Model

3. Navigate back to Parent Model
Click button "Back to Parent Model“ in the tool bar to navigate back until parent process is displayed again
 
1

Select TAB Implementation

1. Select TAB Implementation
Select conditional flow "NO" of first exclusive gateway "OK?" to open TAB "Implementation"
 
1

Enter Left Script

1. Enter Left Script
Type localData.processData.isValid at the left script area to access attribute "isValid"
2

Select Operator

2. Select Operator
Select value "==" from the combobox to specify condition operator
3

Enter Right Script

3. Enter Right Script
Type false at the right script area
 
1

Click Publish

1. Click Publish
Click button "Publish" to open the dialog "Publish Model"
2

Enter Credentials

2. Enter Credentials
Enter username and password
3

Select Start Process

3. Select Start Process
Publish the process with options "Start Process"
4

Select Cascade

4. Select Cascade
Click to also publish submodels. For more details see Toolbar - Publish Model Dialog
5

Click Button "OK"

5. Click Button "OK"
Click button "OK" to open dialog "Publish Models"
 
1

Select "All Models"

1. Select "All Models"
Select both models: business process model and user task submodel "Demo"
2

Click Button "Publish"

2. Click Button "Publish"
Click to Validate first both model and then Publish them into AUP.
3

Click Button "Close"

3. Click Button "Close"
Close Multi Publish dialog
 
1

Click Start

1. Click Start
Click button "Start" to initiate the task
 
1

Verify Data

1. Verify Data
Verify "First Name" and "Last Name"
2

Mark Valid Name

2. Mark Valid Name
Mark "Valid Name?" checked
3

Click OK

3. Click OK
Click button "OK" to complete the task
 
1

Select Process

1. Select Process
Open menu function "Processes" and select process “Username_MyProcess“
2

Click Start

2. Click Start
Click button "Start" to start the process
 
1

Verify Data

1. Verify Data
Verify "First Name" and "Last Name"
2

Unmarked Valid Name

2. Unmarked Valid Name
Keep "Valid Name?" unchecked
3

Click OK

3. Click OK
Click button "OK" then process flow goes to task "Verify" of lane "TeamB"