SAP BPM With SAPUI5 Integration R1.0

SAP BPM with SAPUI5 Integration
Introduction
This article provides a detailed on how to create a SAP BPM process using the SAPUI5 technology. This
document is a beginner’s guide for Building & Deploying NW BPM with Human activity steps
along with SAPUI5.
Author: Surajit Klinpakdee

Created on: 17 August 2016
Summary
In this lesson you will learn how to create a simple BPM process flow with SAPUI5 as shown below;
Table of Contents
Step 1: Create a Process Composer Development Component .................................................................. 2
Step 2: Create a Swim Lane for Process ......................................................................................................... 4
Step 3: Create a Process Flow .......................................................................................................................... 5
Step 4: Create a Start Page for Start Event ..................................................................................................... 9
Step 5: Create Approve Decision Page .......................................................................................................... 18
Step 6: Define a Logon Configuration and Authentication ........................................................................... 23
Step 7: Build and Deploy .................................................................................................................................. 25
Step 8: Testing your BPM ................................................................................................................................. 31
Page 1 of 33
Procedure
Step 1: Create a Process Composer Development Component

No Description Screen Shot
1.1 Click on File -> New -> Other

-> Process Composer ->
Process Composer
Development Component and
then click on Next.
1.2 Choose Development

Component, next enter
Development Component
name and caption and then
click on Finish
Page 2 of 33
1.3 Click Yes to confirm switching

Perspective
1.4 Now you will have a Process

Composer Development
Component
Page 3 of 33
Step 2: Create a Swim Lane for Process

2.1 Right click on Process and

click on New Process
2.2 Enter Process Name,

select Swim Lane Orientation,
enter Pool name and Lanes
(separate lane name with
commas). Then click Finish
2.3 Finally, Swim Lane is created
Page 4 of 33
Step 3: Create a Process Flow

3.1 Delete a Sequence Flow
3.2 Rename a Start Event
3.3 Create Human Activity on

Approver Lane.
Or drag from Palette > Flow Objects > Human
Page 5 of 33
3.4 Rename your Human Activity
3.5 Move End Event to Approver

Lane
3.6 Create Sequence Flow. Drag

a connection line between
each other
Page 6 of 33
3.7 Go to Swim Lane Properties

> Administrator
Click on Choose to assign

Administrator User to this
Swim Lane. Then click on OK
3.8 Do the same way as previous

step to assign User to each
Lane
Go to Lane Properties >

Potential Owners
Click on Choose to assign

User for each Lane.
Page 7 of 33
3.9 Now your Process Flow is

completed
Page 8 of 33
Step 4: Create a Start Page for Start Event

4.1 Click on Service Interfaces >

New WSDL
4.2 Enter WSDL File name and click

on Next and then Finish
4.3 Now you have a Service

Interface
4.4
Click the Arrow at the end
of table and then click on button
”Show Schema Index View

“
Page 9 of 33
4.5 On a Schema Page, right click

on Types > Add Complex Type
4.6 Enter a Complex Type name and

then double click it
4.7 Right click to add Element for

Complex Type
4.8 Repeat a previous step to add

another element
4.9 On the Schema page, remove all

default elements
4.10 Create Element for Service

Interface and assign Type which
you created
Page 10 of 33
4.11 At Service Interface page,

remove Output line and its
source code
4.12 Change Operation name and

Input Parameter name
4.13 Set Element to Input Parameter,

choose your element reference
and then click OK
Page 11 of 33
4.14 Now Service Interface setting is

completed
4.15 When you Save the Service

Interface, this dialog will appear.
Check “Automatically accept all

changes to the reimported
document” and then click on
Accept
Page 12 of 33
4.16 Now create Message for Event

Triggers
4.17 Enter Message Trigger name,

then click on Next
4.18 Choose your Service Interface

and check “Generate UI
Component”. Then click on Next
Page 13 of 33
4.19 Click on New to create

Development Component for
SAPUI5
4.20 Select your Software Component

for new Development
Component and click on Next
4.21 Enter your Start Page name and

its caption, then click on Finish
Page 14 of 33
4.22 Now Development Component is

defined. After that click on Next
4.23 Enter UI name and then click on

Finish
4.24 Now Message for Event Trigger

and UI for Start Page are
created
Page 15 of 33
4.25 Assign Message Event Trigger

for Start Event
4.26 Create Artifact > Data Object for

Process Flow
4.27 Assign Data Type to Data Object
Or drag from Data Types under Process Modeling to Data

Object
Page 16 of 33
4.28 Define output mapping for Start

Event
Right click and drag from left to

right, then choose Execute
Default Matcher for auto
mapping
4.29 Your Start Page is ready now
Page 17 of 33
Step 5: Create Approve Decision Page

5.1 Create connection line for Data

Flow
5.2 Create Task for Approve

Decision
5.5 Enter Task name and check

“Generate UI Component” and
then click on Next
Page 18 of 33
5.6 Select Process for UI and click

on Next
5.7 If you want to create UI on a new

Development Component then
click on New,
if you want to use the same one

then click on Next
5.8 Enter UI Component details and

click on Next
Page 19 of 33
5.9 Choose a Process Context that

you want to do mapping data
and then click on Finish
5.10 Now Task and UI for Approve

Decision are created
Page 20 of 33
5.11 Set Editable to “false” to set a

display field for Approve
Decision Page
To change it, go to WebContent

> ApproveRequest > view >
CustomerDataForm.fragment.xml
5.12 First, define Output Mapping to

Start Event

right, then choose Execute
Default Matcher for auto
mapping
Page 21 of 33
5.13 Then assign Task to Human

Activity
5.14 Define Input Mapping for Task

right (Object to be assigned is
under UIRequest), then choose
Execute Default Matcher for auto
mapping
5.14 Define Output mapping for Task
Right click and drag from left

(Object mapping is under
UIResponse) to right, then
choose Execute Default Matcher
for auto mapping
5.15 Now your Approve Decision

Page is done
Page 22 of 33
Step 6: Define a Logon Configuration and Authentication

6.1 At UI page, Go to
/WebContent/WEB-INF/web.xml
Insert Login Configuration Code

below after tag <display-name>
Login Configuration Code;
<login-config>
<auth-method>FORM</auth-method>
</login-config>
<security-role>
<description>TaskProcessor</description>
<role-name>TaskProcessor</role-name>
</security-role>
<security-constraint>
<display-name>TaskProcessorConstraint</display-name>
<web-resource-collection>
<web-resource-name>TaskUI</web-resource-name>
<url-pattern>*</url-pattern>
</web-resource-collection>
<auth-constraint>
</auth-constraint>
</security-constraint>
Page 23 of 33
6.2 At UI page, Go to
/WebContent/WEB-INF/web-
j2ee-engine.xml
Insert Security Role Mapping

Code below after tag <spec-
version>
Security Role Mapping Code;
<security-role-map>
<server-role-name>TaskProcessor</server-role-name>
</security-role-map>
<login-module-configuration>
<login-module-stack>
<login-module>
<login-module-name>EvaluateTicketLoginModule</login-module-name>
<flag>SUFFICIENT</flag>
</login-module>
<login-module>
<login-module-name>BasicPasswordLoginModule</login-module-name>
<flag>REQUISITE</flag>
</login-module>
<login-module>
<login-module-name>CreateTicketLoginModule</login-module-name>
<flag>OPTIONAL</flag>
</login-module>
</login-module-stack>
</login-module-configuration>
6.3 After deploy Development

Component to server, assign the
new Security Role to Users (in
our example: “TaskProcessor”)
Go to NW Portal > Identity

Management, then choose User
and assign Role
Page 24 of 33
Step 7: Build and Deploy

7.1 Switch Perspective to

Development Infrastructure
Go to Windows > Perspective >

Open Perspective > Others
Select “Development
Infrastructure” and click on OK
Page 25 of 33
7.2 Right click on your Development

Component and click Build
Contained Local DCs
7.3 Now your Development

Component is built
7.3 Now create EAR for UI
Right click on Development

Component and go to New >
Development Component
After that select “Enterprise

Application” and click on Next
Page 26 of 33
7.4 Enter Enterprise Application

name and its caption and then
click on Next
Page 27 of 33
7.5 Click on Next again..
7.6 Choose your UI that you want to

deploy and then click on Finish
7.7 You will get Dialog box to

confirm Perspective Switch.
Click on No
7.8 Now you have EAR created.

To build EAR, right click on EAR
Component and click Build
Page 28 of 33
7.9 To deploy BPM, right click on

BPM Component and click
Deploy. Then click OK to confirm
7.10 To deploy UI via EAR, right click

on EAR Component and click
Deploy. Then click OK to confirm
Page 29 of 33
7.11 Now your BPM and UI are

deployed
Page 30 of 33
Step 8: Testing your BPM

8.1 Switch to J2EE Perspective.

Right click on “index.html” of
your Start Page and then Run
As > 1 Run on Server
8.2 Choose your PO server and click

on Next
8.3 Make sure that your component

is configured and then click on
Finish
Page 31 of 33
8.4 After finish, log on page will

appear. Enter Requester User
name and Password to access a
Start Page
8.5 Enter Customer Data and click

Submit Data to get approval
8.6 Go to BPM Inbox

http://<host>:<port>/bpminbox/in
box.html
And enter Approver User name

and Password
8.7 In BPM inbox, you will see task

awaiting for approval.
Click on task that you want to

review and approve.
Page 32 of 33
8.8 At Approve Decision Page, click

on Approve or Reject
8.9 After Approve or Reject, your

task will set to completed
Page 33 of 33

SAP BPM With SAPUI5 Integration R1.0

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

SAP BPM With SAPUI5 Integration R1.0

Diunggah oleh

Hak Cipta:

Format Tersedia

SAP BPM with SAPUI5 Integration

Author: Surajit Klinpakdee

Step 1: Create a Process Composer Development Component

1.1 Click on File -> New -> Other

1.2 Choose Development

No Description Screen Shot

1.3 Click Yes to confirm switching

1.4 Now you will have a Process

Step 2: Create a Swim Lane for Process

2.1 Right click on Process and

2.2 Enter Process Name,

2.3 Finally, Swim Lane is created

Step 3: Create a Process Flow

3.1 Delete a Sequence Flow

3.2 Rename a Start Event

3.3 Create Human Activity on

Or drag from Palette > Flow Objects > Human

No Description Screen Shot

3.4 Rename your Human Activity

3.5 Move End Event to Approver

3.6 Create Sequence Flow. Drag

No Description Screen Shot

3.7 Go to Swim Lane Properties

Click on Choose to assign

3.8 Do the same way as previous

Go to Lane Properties >

Click on Choose to assign

No Description Screen Shot

3.9 Now your Process Flow is

Step 4: Create a Start Page for Start Event

4.1 Click on Service Interfaces >

4.2 Enter WSDL File name and click

4.3 Now you have a Service

”Show Schema Index View

No Description Screen Shot

4.5 On a Schema Page, right click

4.6 Enter a Complex Type name and

4.7 Right click to add Element for

4.8 Repeat a previous step to add

4.9 On the Schema page, remove all

4.10 Create Element for Service

No Description Screen Shot

4.11 At Service Interface page,

4.12 Change Operation name and

4.13 Set Element to Input Parameter,

No Description Screen Shot

4.14 Now Service Interface setting is

4.15 When you Save the Service

Check “Automatically accept all

No Description Screen Shot

4.16 Now create Message for Event

4.17 Enter Message Trigger name,

4.18 Choose your Service Interface

No Description Screen Shot

4.19 Click on New to create

4.20 Select your Software Component

4.21 Enter your Start Page name and

No Description Screen Shot

4.22 Now Development Component is

4.23 Enter UI name and then click on

4.24 Now Message for Event Trigger

No Description Screen Shot

4.25 Assign Message Event Trigger

4.26 Create Artifact > Data Object for