How to reinvent process portal

How to re-invent the
Process Portal
Donato Marrazzo, WebSphere Technical Sales

2
Please Note
IBM’s statements regarding its plans, directions, and intent are subject to change or withdrawal
without notice at IBM’s sole discretion. Information regarding potential future products is
intended to outline our general product direction and it should not be relied on in making a
purchasing decision.
The information mentioned regarding potential future products is not a commitment, promise,
or legal obligation to deliver any material, code or functionality. Information about potential
future products may not be incorporated into any contract. The development, release, and
timing of any future features or functionality described for our products remains at our sole
discretion
Performance is based on measurements and projections using standard IBM benchmarks in a
controlled environment. The actual throughput or performance that any user will experience
will vary depending upon many factors, including considerations such as the amount of
multiprogramming in the user’s job stream, the I/O configuration, the storage configuration, and
the workload processed. Therefore, no assurance can be given that an individual user will
achieve results similar to those stated here.

3
Agenda
BPMcapabilities
The 3rd
Way
Demo NewPortal
Security Implications
Mash-up your development organization

4© 2014 IBM Corporation
What is the Business Process Management?
Business Process Management is a discipline
made of m e tho do lo g y and to o ls aiming to
constantly improve business processes:
–Improve efficiency
–Improve effectiveness
–Adapt to business strategy
What are the key benefits of a BPM platform?
–Simplify the process automation
–Collect process metrics to gain visibility
–Provide insights for a process optimization

Often the UserInterface is the XfactorforBPM
tool
Human Intensive processes requires a lot of effort to build
an effective UI (60%-70% of total project time)
–Designing a process often require to re-work the data model
and adapt the UI that collects such data

When the useris the king the Process Portal is the
realm
 Human Intensive processes requires a
continual exchange of information among
users
 Process Portal is profiled for the User
–Task List
–Perform Tasks
• Co ache s are tig htly inte g rate d with
the pro ce ss
• Re usable co m po ne nt & UIte m plate s
–Dashboards
• O ut o f bo x re po rts
• Exte nsible thro ug h g raphicalwidg e t
that e xpo se s pro ce ss info rm atio n and
KPI
–Social enabled
• Info rm alco llabo ratio n e xpand the

One Portal does not fit all
 End users does not work exclusively
with BPM
–They expect that BPM integrates
activities that they usually carry on
with other application
 Some users should not be exposed
to the complete portal amenities:
–E.g. remove the social
communications
 Other users should perform their
task in mobility:
–Standard Process Portal can be
enjoyed by a modern wide screen
device

The escape exit
The common solution is to externalize the User Interface in
alien technology (e.g. Java EE, .Net, PHP)
–BPM is invoked through REST APIs
 UI Developers uses tools they know
 Process Designer get rid of UI details
getTaskList
claimTask
(...)
Everybody stay in their comfort zone
Custom code

When the BPMlose the head
BPM initiative become traditional application development
project
BPM turns into a backend system
–State Machine
–Task Dispatcher
Challenges
–Keep in sync UI with processes
–Mapping Business Object into the application
–Reuse UI Assets across Process Applications
–Reuse specific BPM UI Skills across projects
–UI Refactoring
“Fo r hum an inte nsive pro ce ss, the q ue stio ns are :
•Is it stilla use fulto o l?
•Ho w do e s it sim plify the Pro ce ss Auto m atio n? ”

10
Agenda
BPM capabilities
The 3rd
Way
Demo NewPortal

The 3rd
way: re-invent the Process Portal
Process Portal is just a containerof
reusable Human Services
We can save the Human Services
–Building a tailored version of the Process Portal
–Using an existing application as a frame
Task List
/ Human
Service
Existing App
BPM Server
Existing App Server

The BPMframe
This is a m ash-up approach common in
modern Web 2.0 application
–All the integration logic lives in the browser
The core of this technique is the
<iframe> HTML tag that exposes BPM Human Service
–It isolates the Human Service navigation from hosting application
navigation
 HTML page require just this code<script type="text/javascript" src="js/newportalapp.js"></script>
(...)
<iframe id="bpmframe" bpmframe></iframe>

What is an iframe?
It's an inline frame
–A standard HTML way to host an external application
The hosting application (the container) can exchange
messages with the iframe content through JavaScript APIs
Encapsulated
Application
Hosting App

The outernavigation
The container application can trigger the BPM frame to
serve a specific Human Service
–The “on click” listener of the button changes the iframe src
attribute
• E. g . "/te am wo rks/e xe cute Se rvice ByNam e ?
pro ce ssApp= NEWPO RT& se rvice Nam e = Ne wTaskList"
Human
Service
Other App
Task List Dashboard ...

The innernavigation
 The navigation logic is based on the coach wiring that relies on
“traditional” web navigation mechanism
–Location changes (iframe manages this seamlessly)
–Container is not affected
 When a Human Service complete the navigation
send a message to say “I have completed”
–The container can decide what to at completion
• Usually, it g o e s back to the Task List
Human
Service
Other App
Task List Dashboard ...
An event is sent to
the container that
warn about HS
completion

The outernavigation triggered by the Human
Services
 There are some Human Services that has to navigate over other
Human Services
–E.g. Task List links Task Implementation
 They send a message to say “GO there”
 The container application listen such kind of messages, changes
iframe src attribute and loads the next Human Services
Human
Service
Other App
Task List Dashboard 2
1

Start a new process
“Start Process” button trigger 2 actions:
–Invoke the start process REST service, from response know
which is the first task of the process
–If the task is assigned to the starter, then load the target task
in the BPM frame
Human
Service
MyApp
Task List
Dashboard
Start Proc
BPM Server

Prepare BPMforthe Mash-up
Human Services with internal navigation
–The navigation logic is based on the coach wiring
–These Human Services are ready to be m ashe d up
• User Task Implementation
• Stand Alone Human Services
Human Services with external navigation
–Require some adaptation

Human Services with external navigation
 The navigation relies on the container service
–Portal Navigation Handler
 These Human Services need a bit of adaptation
–E.g. the Task List dashboard
Task List Coach
Dashboard HS
Navigation Controller
Send Navigation direction to the
Navigation Controller.
Using Dojo pub / sub mechanism
Act as a mediation point: receive
direction from the coach view and
translate it for the container
NEW

20
Agenda
BPM capabilities
The 3rd
Way
Demo NewPortal

The NewPortal Demo
 NewPortal Demo is a working demo of the described techniques
 The design concepts are:
– Provide the key portal capabilities: Task List, Dashboard, Start a Process
– Light user experience consumable on mobile devices
 The Navigation Bar is part of Bootstrap: “the m o st po pular HTML, CSS,
and JS fram e wo rk fo r de ve lo ping re spo nsive , m o bile first pro je cts o n
the we b. ”
 In the demo we'll see the NewPortal in conjunction with the new Client
Side Human Services
– Together offers a Responsive Web UI
 “Responsive Web Design (RWD) is a web design approach aimed at
crafting sites to provide an optimal viewing experience—easy reading
and navigation with a minimum of resizing, panning, and scrolling—
across a wide range of devices (from mobile phones to desktop
computer monitors)” (source: Wikipedia)

The controllerlogic - Javascript
Navigation Bar
React to Bar commands
Trigger outer navigation
Call BPM service
Frame Listener
Listen messages coming from
frame content and send directions
to Frame
Frame Directive
Receive high level navigation
directions and translate in low
level URL for the src attribute of
the iframe or send messages to
the inner Human Services
Process Service
Provide a simpler interface
wrapping low level REST APIs

Furtherneed... Advanced Mash-up: data exchange
Intra-Browser communication
Direct read/write MyApp DB
Hosting Application
Task List
Dashboard
Start Proc
Data
MyApp DB
MyApp
Services

24
Agenda
BPM capabilities
The 3rd
Way
Demo NewPortal

Security implications
Authentication & Authorization for BPM
–How to transfer the credential to the BPM
Same Origin Policy
–The same-origin policy restricts how a document or script
loaded from one origin can interact with a resource from
another origin
–Two pages have the same origin if the protocol, port and host
are the same for both pages
–It implies that iframe content cannot exchange messages with
the parent window

Same Application Server
Share
–User Registry
–Host Name
–Authentication Token
BPM
Process
Server
WebSphere
App Server
HTTP Server

Security Access Manager
Share
–User Registry
–Host Name
Reverse Proxy handle the Authentication Token
–Establish trust partnership with the backend servers
BPM
Process
Server
Other Web
Server
Reverse Proxy

28
Agenda
BPM capabilities
The 3rd
Way
Demo NewPortal
Mash-up yourdevelopment organization

Mash-up yourdevelopment organization
BPM Competence Center
–Requires two roles “Process Analyst” and “BPM UI Specialist”
Business
Analyst
Process
Analyst
Application
Developer
BPM UI
Specialist Web UI
Services
Coach
View
Process
Model
Business
Requirement
Application Project TeamBPMCompetence Center

For Additional Information
 IBM Training
http://www.ibm.com/training
 IBM WebSphere
http://www-01.ibm.com/software/be/websphere/
 IBM developerWorks
www.ibm.com/developerworks/websphere/websphere2.html
 WebSphere forums and community
www.ibm.com/developerworks/websphere/community/

How the containerapplication interacts with the
frame content
The container can influence the frame content in two ways
–Changing the iframe src attribute
–Sending events
The iframe content can communicate with the container
only through the event mechanism
var win = document.getElementById("iframe").contentWindow;
win.postMessage(payload, "*");
var win = window.parent;
win.postMessage(payload, "*");

Mash-up and Web API are all around us NO

Trusted Association with Credential Vault Service
Share
–Nothing
Trusted Association Interceptor implement a
Credential Vault logic
Same Origin Policy addressed by a special HTTP-Headers
–AccessControlAllowOrigin:*
–XFrameOptions ALLOWFROM uri
BPM
Process
Server
Other Web
Server

References
https://developer.mozilla.org/en-US/docs/Web/Security/Same-ori

How to reinvent process portal

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to How to reinvent process portal

Similar to How to reinvent process portal (20)

Recently uploaded

Recently uploaded (20)

How to reinvent process portal

Editor's Notes