Designing IBM BPM User Interfaces using Coach Views

Introduction

Business Process Management (BPM) solutions can help your business operations run more smoothly by automating your business processes, and providing increased visibility and analysis into the performance of your processes.  In addition to getting the right tasks to the right people at the right time, efficient business operations require tasks that provide a modern user experience that enable business users to complete their work effectively. User Interface (UI) plays a fundamental part of a BPM solution and can have a major influence the overall architecture. This post outlines 5 things to consider when developing UI for IBM BPM, so you can make the right choices for your BPM solution.

Implementation

     1.     Creating user interfaces with Coaches

IBM BPM includes the necessary tools required to rapidly design and build custom user interfaces for your business processes. The IBM Coach Framework is integral to IBM BPM and enables process authors to rapidly construct web-based user interfaces for business user tasks. Coaches are responsive UI forms that seamlessly integrate with your business processes that can be accessed from a variety of devices including smart phones, tablets and desktop computers. New grid and theme editors introduced in IBM BPM 8.5.7 enable process authors to easily layout and style Coaches to create a modern business user experience.

     2.     Building Controls using Coach Views

Process authors assemble user interfaces by dragging pre-built controls from a palette onto a canvas using the IBM Process Designer. These are sufficient for developing UI for simple mock-ups, playback scenarios, and full production BPM solutions. The IBM Coach Framework is extensible to allow process authors to add additional controls and leverage alternative UI technologies. Coach Views are the building blocks that are used to create controls that appear on the palette. Coach Views can also be used to aggregate content that can be used on multiple coaches.

     3.     Salient Process SPARK UI toolkit

The SPARK UI Toolkit is an IBM BPM UI toolkit created by Salient Process, a Premier IBM Business Partner specializing in IBM Smarter Process consulting services and innovation. IBM and Salient Process have partnered together to make the SPARK UI Toolkit the UI toolkit of choice for IBM BPM customers. There are already efforts underway to incorporate the SPARK UI Toolkit into the IBM BPM product. The SPARK UI Toolkit:

  v  Can increase UI developer productivity up to four times faster than using traditional methods and decreases maintenance costs by avoiding UI complexity.

  v  Achieves the productivity increase through an efficient and intuitive development experience in combination with reduced skills expectations.

  v  Provides 90+ responsive and configurable controls, which can adapt to the form factor of the device running the Coach and are suitable for both production and fast-build "proof-of-concept" scenarios.

  v  Includes with every control a simple and powerful event-based framework that creates a consistent approach for validation, formula-based computations, and cross-control interaction.

  v  Optimizes UI performance by using controls that support lazy loading and server side pagination that can support complex UIs and large tabular data sets.

     4.     The IBM Process Portal

The IBM Process Portal provides the primary user interface used by business users to perform their work when using IBM BPM solutions. The Process Portal was redesigned from the ground up in IBM BPM 8.5.7 and built using the Coach Framework. The Process Portal is now responsive, which liberates field workers by enabling them to access and execute their tasks when outside the office using a mobile device. The Process Portal can be modified to accommodate your specific user experience requirements. It can be easily styled using themes, extended to include custom dashboards, configured to enable or disable specific capabilities, and customized or add your own modifications.

     5.     Mixing the Coach Framework with other approaches

Coaches are not the only approach available to create user interfaces to interact with IBM BPM processes. There can be numerous reasons for an enterprise to use alternative approaches to design and deliver BPM UIs, and each of those approaches comes with consequences on the application’s design, as well as its security and performance. You can choose from a number of design patterns depending on your specific requirements.

continue reading

Integrate Google Maps with BPM Coach View

Introduction

Google makes available a technology for showing maps of various types inside a web page. This service from Google provides a wealth of features beyond just the simple display of the map. These features include placing markers, calculating directions, geolocation and much more. This Coach View provides a wrapper around the Google Maps technology such that it can be included within a Coach without the consumer having to learn the Google Maps technologies directly.

Using Coach View presents a Google Map with abilities to interact with that map. I am going to show how we can build Google map in Coach View.

Implementation

Before starting implementation of Google Map with Coach View, we should have below tools.

Ø  IBM BPM.

Ø  Google Account.

Before implementing IBM BPM code, we should have Google account, than we should get a Google API key for using Google map in our coach view.

Get the Google Map API key from

https://developers.google.com/maps/documentation/embed/guide#api_key

Create Process Application and upload images:

Open Process Designer and click on Create New Process App à Enter following details.

Process Application Name

Acronym

Enter description under documentation (Optional) as shown below.

Open the Google Map App process Application and select + symbol beside Files. Select the Image file (google Map image which can be downloaded in internet).

 

Create a Coach View

Click on + symbol beside User Interface select Coach View. Enter the Name as ‘Google Map CV’ then click on Finish.

 

Now it will open Coach View editor view. Select Layout Tab, drag the Custom HTML into pallet and enter below code under Properties à HTML à Text

 

Select Inline CSS under Behaviour tab and enter the below code as shown below.

 Select Load under Behaviour tab and enter the below code as shown below.

Select Overview tab and select Pallet Icon and layout Image which we have uploaded in first step.

Create a Human Service

Click on + symbol beside User Interface select Client Side Human Service. Enter the Name as ‘Google Map CHS’ then click on Finish.

 

Select Diagram Tab, drag a Coach into pallet and rename as Google Map than connect from Start to Coach and Coach to End node.

Select Coach Tab or double click on Google Map Coach. Drag Google Map CV from views to pallet as shown below.

Now we have implemented Google map using Coach View. We are ready to test our application now.

Test Application

Open Google Map CHS human service and click on Run button at top right corner as shown below.

 

Now we should able to see the google map location which was given default in our code.

Now we can enter location which we need to see in google map and click on geocode. I entered as ‘London’, now google map is updated location as London as shown below.

continue reading