lab 10 creating custom dashboards · ibm software lab 10 – creating custom dashboards page 2 __c....

IBM Software

Lab 10 – Creating Custom Dashboards

Lab 10 Creating Custom Dashboards

Overview

Acquiring visibility on process efficiency is one of the fundamental goals of Business Process Management. In Version 8.5 of IBM BPM, you can quickly assemble process dashboards that are specifically tailored to highlight the metrics that are of interest to your organization.

These custom dashboards can then be exposed to the Process Portal, if you wish to do so – and they will exhibit the same look and feel as the dashboard provided by the product itself.

Introduction

In this exercise, we are going to create a custom dashboard for our Mortgage Approval Process. We want to expose key metrics to the managers of the mortgage operations, so that they can take appropriate actions if business objectives are at risk.

Let’s now explore how to create one of these great-looking custom dashboards.

10.1 Importing the Initial Process App

You should have the Process Designer open at this point – if not, ask your instructor to help you with that.

__1. In Process Designer, switch to the Process Center view.

__2. Perform the following steps:

__a. Click Process App

__b. Click Import Process App, then Browse… to C:\ BPM-V8.5.5-PoT\LabWorkbook\DASHBOARDS\ Mortgage_Application_Process_Dashboards - V1_-_Initial.twx and then click OK.

IBM Software


__c. Click Import to import the Process App (you may also see a message that tells you that a supporting toolkit has already been imported – in a previous lab).

__3. Once the import is complete, click Open in Designer next to Mortgage Application Process Dashboards (MAPDASH):

This Process App contains services that we will use to generate data for custom dashboard interface, and a graphical template that is used for save time on coach design, we are going to see it during the course of this lab.

10.2 Selecting Information to Expose in Dashboards

Before we can start building dashboards, there are a few steps that you need to perform to select what metric you want to capture and expose. But before we start selecting the relevant business information, we need to add a dependency to another system-provided toolkit:

IBM Software


__4. Notice, in the process library on the left, that we have created for you a dependency to the Dashboards Toolkit. This toolkit is provided by the product to allow users to build custom dashboards:

This toolkit contains a number of user interface elements and business objects that greatly simplify the creation of dashboards. We are going to use some of these elements later on during the lab.

Let’s now select the business object elements that we want to expose to the dashboards.

__5. Click on Processes in the navigator view, and then double-click Mortgage Approval Process to open it in the process designer:

IBM Software


__6. Switch to the Variables tab, then expand the application (Application) variable by clicking on the plus sign by its name. Also expand customer and mortgage:

IBM Software


__7. Under customer, click city and then check Visible in Process Portal and Track this Field:

By doing so, you have made it possible for IBM BPM to perform queries on processes based on the city, and you have instructed the run-time to track this information along with other vital metrics of the process. This tracking will allow you to search for instances based on city, and to derive aggregated metrics and break them down by the city dimension (for example, we may want to know how much money our financial institution is being requested to lend, by city).

__8. Let’s make some more business information available for search and tracking. Following similar steps, make application.mortgage.mortgageType and application.mortgage.amount available in search and tracking.

In addition, to tracking variables you want to enable auto-tracking so that at all steps of the process these variable values will be tracked.

__9. Still under Tracking, check Enable Autotracking:

Verify that those fields you selected earlier are tracked as they should appear as above in the list of Auto-Tracked Fields.

IBM Software


__10. The last step here is to make these definitions available in the Performance Data Warehouse database. Click File ! Update Tracking Definitions

You should see a message indicating the successful completion of this action.

There are a couple more settings you need to enable in order to have authority to see data in the search or the performance data that populate the dashboards.

__11. Click on Overview and click Select to Expose Business Data and Expose Performance Metrics to All Users.

__12. Save (Ctrl-S) your changes.

10.3 Creating a New Dashboard from a Template

We can now focus on the creation of the dashboard. The good news is that you can use the coach technology to create dashboards too. Dashboards can consist of a single coach, or of an entire page

IBM Software


flow that concatenates an arbitrary sequence of coaches and services – just like any other human service.

In addition, you will be able to reuse some of the Coach Views that we have provided in the Dashboards toolkit for you – which have the same look-and-feel of the actual system dashboards.

__13. In the navigator view, click next to User Interface and then click Heritage Human Service to create a new one.

__14. Call it My Dashboard and click Finish, to open the human service editor:

__15. From the palette on your right, drag-and-drop a Coach box onto the canvas:

IBM Software


__16. Click on it to switch to edit mode, and name it My Dashboard.

__17. Connect Start to My Dashboard and My Dashboard to End

__18. Once you are done, double-click it to open the coach editor.

__19. You will be prompted to choose whether you want to start from scratch, or select a starting template. Select Select a Template ! MyDashboardTemplate and then click OK:

__20. You are now working on a simple template form – which we have pre-defined for this lab. The template reflects the structure of some of the built-in dashboards. It has two placeholders that allow you to specify business information for searching (Mortgage Type) and to view a chart (Average Mortgage Amount Per City). It also has a section for the process instances that are related to the data we will be seeing on the chart, and a placeholder for the task list associated with those instances:

IBM Software


In the remainder of this lab, we are going to populate this template with user interface elements that will complete the dashboard.

10.4 Completing the Dashboard Template

First, we are going to complete Mortgage Type Section.

__21. To facilitate completing the dashboards, enable the Dashboard controls in the palette by clicking Filter and check Dashboard

The views should update and you should see some of the chart controls.

__22. Drag and drop Chart into the Mortgage Type section:

Your coach should be similar to the following:

IBM Software


__23. Now, drag-and-drop the following elements from the Dashboard toolkit onto the other sections as follows:

• Drag-and-drop another Chart into Average Mortgage Amount Per City

• Drag-and-drop Process Instances List into Instances

• Drag-and-drop Task List into Task List

Here’s how your coach should look like:

__24. Verify the follow your human service diagram by clicking Diagram – it should be connected as follows:

__25. Save (Ctrl-S) your changes.

IBM Software


__26. Run your service

You may be seeing just a few tasks (or none) and possibly no data yet in some or all of the charts. That is because we haven’t loaded the system with process instances, and we haven’t configured all the graphical elements yet:

__27. Close the browser.

10.4.1 Generating Instances

We have created for you a simple script that generates a number of instances. Let’s execute it and then we’ll finish the configuration of the dashboard.

__28. Click User Interface and double-click Start Instances to open the human service:

IBM Software


__29. Launch the service by clicking on the play button (Run service):

__30. The service prompts for the number of instances to create. Type, for example, 30 and click Start:

__31. It is going to take a minute or so to generate 30 instances - wait until service completes.

__32. Switch to the Inspector Tab:

__33. Click refresh

IBM Software


Now you should have at least 30 instances of this process running:

__34. Click Designer to complete the dashboard configuration.

10.5 Completing the dashboard configuration – extracting data

__35. Make sure that the My Dashboard service is open in the editor; if it isn’t, re-open it and then click Diagram.

__36. We need to add a small script component, which extracts the information about the process instances to populate the charts in the dashboard. Click Implementation in the navigator, and drag and drop the Get Instance Data element onto the canvas:

__37. Change the flow as shown below (wire: Start ! Get Instance Data !My Dashboard !End):

__38. If you are interested in how this script extracts the performance data, click Get Instance Data and then switch to the Properties pan. Inspect the Implementation tab, and ask your instructor any questions you may have.

IBM Software


__39. After you examined the implementation, switch to the Data Mapping tab in Properties:

__40. For the Output Mapping settings, click the Auto Map icon:

__41. The editor automatically selects variables of the appropriate type (ChartData). Check both variables and click OK:

These are the variables you saw referenced in the script implementation you examined a few minutes ago.

10.5.1 Completing the UI Configuration

Let’s now finalize the definition of the UI components. Essentially, we need to bind the variables that are populated with the dashboard data to the dashboard elements.

IBM Software


__42. Double click the My Dashboard coach to open it again in the coach editor:

__43. Click on the Chart widget inside the Mortgage Type section. Switch to the Properties tab, and select the General tab. Click Select by the Binding settings:

IBM Software


__44. Select MortgageTypeRequested (ChartData):

__45. Switch to the Configuration tab, to define the graphical appearance of the chart:

IBM Software


__46. Specify the following settings:

Field Entry

Width 400

Height 400

Legend Left

__47. Expand the Display option, and then Plots:

IBM Software


__48. Specify the following values:

Field Entry

Plot Type Pie Plot

Display Horizontal Axis Checked

Display Vertical Axis Checked

Pie Labels None

Tooltip Template ${series.0.data.legend}

__49. Save (Ctrl-S) and run your service. The chart should now show up! Remember that data generation is randomized – the chart might look different:

IBM Software


__50. You can close the browser window. Let’s now configure the Average Mortgage Amount Per City Dashboard. Click on the corresponding widget in that section. Again, in the General property tab, click Select... by the Binding setting:

__51. Select avgAmountPerCity (ChartData) variable:

IBM Software


__52. Now, switch to the Configuration tab:


Field Entry

Width 700

Height 400

Legend Right

IBM Software


__54. Expand the Display option, and then Plots:


Field Entry

Plot Type Vertical Bar Plot

Display Horizontal Axis Check

Display Vertical Axis Check

Pie Labels None

Tooltip Template ${series.0.data}

IBM Software


__56. Save your work (Ctrl-S) and run your service. Now, the bar chart now is also populated with data!

__57. Close the browser window.

IBM Software


10.5.2 Configuring the Task List and Instances views

We are almost there. Now, we need to ensure that the Task List and the Instances view show relevant information. We have pre-defined some of the data variables that hold that information for you – but you still need to bind it to the graphical widgets.

__58. Click on the task list widget, inside Task List. Switch to the Configuration tab in the Properties pane:

IBM Software



Field Entry

Height 450

Initial List size 5

List scope Open Tasks

__60. Save your work (Ctrl-S). Switch to the Variables tab:

IBM Software


__61. Click Link Localization. We are going to specify a resource bundle we have provided for you as part of this lab to populate the instance list:

__62. Select ProcessData resource bundle group:

__63. Now, switch back to the Coaches tab and click the widget inside the Instances section:

IBM Software


__64. In the Properties pane, within the Configuration tab, type the following values:

Field Entry

Height 0

Number of instance displayed 7

__65. Specify a variable for Process application name and Process Name. This can be done by clicking on the blue icons by those settings, as shown below:

IBM Software


__66. For Process application name, select appName under Localization Resources ! ProcessData:

__67. Similarly, for Process name, select the bpdName field of ProcessData:

IBM Software


__68. Save your work. Let’s run the service again:

Great! Now the dashboard is fully populated!

10.5.3 Wiring dashboard widgets together

Now that we have the data into the dashboards, we want to make sure that the various elements on the screen work in concert. For example, we want to ensure that, when you click on a slice in the pie chart, or on a bar in the bar chart, the instance list and the task list react accordingly – by showing only the elements that are related to that particular slice or bar. This can be easily accomplished in the dashboards, thanks to the “boundary events” that the various charts can emit when you click on them. Those events carry data with them – and can be used to influence the content of other UI elements on the screen.

__69. Still in the dashboard editor, switch to the Variables tab:

IBM Software


__70. Click Add Private, then name the new private variable filter of variable type ChartClickEvent:

__71. Save your work (Ctrl-S).

__72. Switch back to the Coaches tab:

IBM Software


__73. Click the chart within the Mortgage Type section. Then, in the Properties pane, within the Configuration tab, click on the blue circle to the right of On click:

__74. When prompted with the list of variables, select the filter variable for the event. By doing so, you ensure that when someone click on an element of the chart, the filter variable will be populated with the data that’s relevant (in this case, the data associated to the slice in the pie that was clicked):

IBM Software


__75. Similarly, we want to bind the filter variable to the chart that’s inside the Average Mortgage Amount Per City section – follow the same steps:

__76. Now, we want to configure the task list and the instance list to use the filter data to display their information. Click the widget inside Task List, and switch to the Configuration tab in Properties:

IBM Software


__77. Click Select… by Retrieve task list, and select the Task List Service from the list. Your settings should look as follows:

__78. The task list service needs the query information as its input. Still the Configuration tab, click the blue button by Search filter and select filter.dataPoint.name (navigate into the filter variable as shown below):

IBM Software


__79. The same configuration changes need to occur for the process instance list. Inside Instances, click Instance List, switch to the Configuration tab in Properties, and set Process Instance List Service (non default) for the Retrieval Service:

__80. Subsequently, set filter.dataPoint.name for the Search filter configuration property:

__81. The dashboard is now truly complete! Save your work and run your service. Now when you click any of the graphical elements on the charts the task list and the process instances will automatically be updated to reflect the relevant process elements. Try it out!

One last change: this shows an additional powerful feature of the dashboards toolkit. Since we have a list of process instances in this dashboard, it would be nice to be able to navigate (drill down) to the instance

IBM Software


details, using some of the built-it dashboard to visualize the details. This can be very easily accomplished using a navigation controller.

__82. From the palette on the right, drag-and-drop the Navigation Controller anywhere on your coach canvas:

__83. Save your work and run the dashboard again. Now, click on any process instance name:

__84. A new tab opens up showing the process instance details, including the Gantt diagram, just like in the “stock” dashboards (your diagram may look slightly different):

Great! Our dashboard is now fully complete except for allowing users to execute them in the Portal.

IBM Software


10.5.4 Exposing Dashboards

Dashboards can be made available to selected groups of users so that those users can configure the dashboard to become part of their Process Portal experience.

Here are the necessary steps:

__85. In the dashboard editor, switch to the Overview tab:

__86. Under Exposing, use the pull-down list next to Expose As to select Dashboard (Available in Process Portal Dashboards menu):

__87. For Exposed to, click on Select…. Notice that you are prompted with the list of available teams. Normally, you would select a specific team of users that might be interested in the dashboard – here, in this exercise, we are going to select All Users:

IBM Software


__88. Save your work (Ctrl-S).

__89. You can now minimize Process Designer. Open a web browser, and login to Process Portal (http://localhost:9080/portal). Log in as admin, password admin.

__90. On the main toolbar, click on the plus icon:

a) Click + sign

__91. You will see the list of Visible tabs and a list of Hidden tabs. This dialog allows you to customize which tabs appear on your portal toolbar. Drag-and-drop My Dashboard from the hidden to the visible tabs:

__92. Click anywhere on the toolbar for the change to actually take place:

IBM Software


__93. You should now see a new tab – MY DASHBOARD. Click on it:

Et voila’ – the dashboard appears in the Process Portal!

__94. One difference you will note as you run the dashboard from the portal versus in designer is that when you click on one of the process instances, it will actually open the process instance view you have defined for the process instead of the Gantt view. Try it!

10.6 Summary

In this lab, you have experience what it takes to create a custom dashboard that resembles the look-and-feel of the built-in visibility dashboards.

We started with a template, added a couple of charts, and added a task list and a process instance list.

We then populated the various elements with data that is extracted from the business process database.

We finally “wired together” the various items on the dashboard so that the process and task lists react accordingly when a data item is clicked on the charts – we also enabled drill-down to view process instance details using the provided navigator element.

Finally, we exposed the dashboard to the Process Portal for end-user consumption.

lab 10 creating custom dashboards · ibm software lab 10 – creating custom dashboards page 2 __c....

Documents