In Part 1 of this series, you learned how to create a dashboard in IBM Business Monitor based on simple CSV-formatted spreadsheets. The dashboard we created has three pages, one corresponding to each spreadsheet. In this article, you'll learn how to customize each page of that dashboard, so that the end result can more closely meet the needs of the business users of that dashboard.
First we'll cover customizing the Instances widget on the first page of the dashboard. We'll describe basic information on how to edit a page of a Business Space, as well as how to personalize a widget on that page. Then we'll dive in to things like sorting and formatting, such as showing currency values with a dollar sign. Finally, you'll learn how to add a new widget to the page and configure it to show external content.
Next you'll learn how to customize the KPI widget, including things like changing the gauge type and the display size, and how to arrange elements in a grid. You'll also learn how to customize the name of a widget.
Finally, you'll learn how to customize Cognos Business Intelligence (BI) reports. You'll learn how to make changes directly from the report, such as changing the chart type, and how to save the changes that you make. Then you'll learn how to launch into the full report editor tool to do more advanced customization, such as changing the shape of the bars and having the report display the values in US dollars.
First, let's look at how to customize a widget. Go to the Order Processing Instances page in your generated dashboard, and click on Edit Page, as shown in Figure 1.
Figure 1. Editing a dashboard page
Click the down arrow at the top right of the widget, and choose Edit Settings, as shown in Figure 2.
Figure 2. Editing widget settings
A dialog will appear in which you can customize what you'd like to see in this widget. First, sort the rows in the widget by the Order ID. Click the Sort tab, then select Order ID, click the right arrow, and click Default Sort, then Apply, as shown in Figure 3.
Figure 3. Specifying instance sorting
Next, let's tell the widget that the Price metric should be displayed with a dollar sign. Click the Format tab, and click on the Currency drop-down menu for the Price metric. Choose USD (US dollars), then click OK.
Figure 4. Specifying instance formatting
Next, since this page is a bit bare with only a single widget, let's add another widget. Scroll down the palette of widgets at the top of the page and drag the Web Site widget to the bottom of the page.
Figure 5. Adding a new widget
In keeping with our Apple™ motif, let's configure this widget to
display the Apple web site. As before, choose Edit
Settings on the widget drop-down, then enter
http://www.apple.com in the dialog that appears, and click
Figure 6. Configuring the web site widget
Now click Finish Editing, to return the dashboards to their normal state.
Figure 7. Finish editing
Figure 8 shows the instance page customized just the way you want it!
Figure 8. Instances fully customized
Now let's jump to the KPIs tab (we'll save the Cognos customization, which is the most in-depth, for last) and customize how the the KPIs are displayed. Click the Order Processing KPIs tab. You'll see four KPIs and no alerts. Let's customize this page, too.
First switch from half gauges to full gauges, and make them bigger and two to a row. Click Edit Page.
Figure 9. Editing the KPI page
Click Edit Settings from the widget drop-down.
Figure 10. Editing the KPI settings
Click the Layout tab of the resulting dialog. Choose Full Gauge from the Select a display type drop-down. Change the Columns field to 2. Choose Large from the Select a size for visualization elements drop-down. Then click OK.
Figure 11. Customizing the KPI layout
Now let's customize the name of this widget. As you can see, it currently has the word KPIs repeated twice, which looks awkward. From the widget drop-down, select Rename.
Figure 12. Renaming the KPI widget
In the dialog that appears, remove the second occurrence of KPIs, then click Save.
Figure 13. KPI widget renamed
Click Finish Editing to complete the customization of the KPI tab.
Figure 14. KPIs fully customized!
Next, let's return to the Order Processing Reports tab, and customize our Cognos reports a bit. What if you were more in the mood for a donut than a pie? Just right-click on the pie chart, choose Change Display Type, then choose the More.
Figure 15. Configure pie chart
A Change Display dialog will appear. Click Pie, Donut on the left, then choose the fourth option, whose hover text says Donut with 3-D Visual Effect, then click OK.
Figure 16. Change the pie chart display
Now you see your Orders by Location chart as a donut instead of a pie. To save this change, choose Action, then Save changes for me for this chart.
Figure 17. Save donut chart
There are two vertical bar charts on our page (technically, Cognos calls these column charts). For variety, let's switch one of them to a horizontal bar chart. Right-click on the Price by Date chart, and choose Change Display Type, then More.
Figure 18. Configure column chart
This time in the Change Display dialog, click Bar, then choose the second entry, whose hover text is Bar with 3-D Visual Effect, then click OK.
Figure 19. Change column chart display
Now you have one horizontal bar chart and one vertical. To save this change to the chart, choose Action, then Save changes for me.
Figure 20. Save bar chart
Now let's do something a bit more advanced. Let's launch the Cognos Business Insight Advanced tool to edit our new horizontal bar chart to show dollar signs on the axis labels. This tool allows editing of all aspects of the report directly from the dashboard. Click Action, then Edit Report. This will take a few seconds to load.
Note: An iFix to Cognos BI 10.1.1 is necessary to enable this report editing in newer browsers, such as the Firefox ESR version 24 we are using here.
Figure 21. Edit bar chart
Click on the chart, then choose Primary Axis => Axis Labels from the drop-down, as shown in Figure 22. Note that on the left you can see the details of this Cognos cube, such as the available measures and dimensions, and current dimension member values.
Figure 22. Configure axis labels
Click the Restore button for Properties (in the bottom left, as shown in Figure 23), which is minimized by default.
Figure 23. Axis label properties
Now click the blue ellipsis button to the right of Data format and choose Currency from the Format type drop-down. Select USD for currency, as shown in Figure 24, then click OK.
Figure 24. Data format - currency
Now the chart axis is shown in US Dollars. Let's do one more thing while in this report editing tool: let's change from traditional rectangular bars to cones for each year. Click on one of the bars, then on the far left under Bar shape choose the third icon, whose hover help says Cone, as shown in Figure 25.
Figure 25. Cone chart
We've only scratched the surface of what's possible in this report editing tool, but that's enough for now. Exit out of the tool by clicking Done in the top right.
Figure 26. Done editing
That returns us back to the regular dashboards. Now, our horizontal bar chart shows its axis labels in US dollars, and each "bar" is actually a cone. Once again, save the report by choosing Action, then Save changes for me.
Figure 27. Save cone chart
Now our reports are displaying just the way we want. Figure 28 shows the full Order Processing Reports page, showing all six Cognos reports. You may need to zoom the browser out (Ctrl -) to see it all at once.
Figure 28. Cognos reports fully customized!
Note that we have "slices" for only three countries in our donut, and "cones" for only 2011 and 2012. In Part 3, we'll process a new spreadsheet that will send events with values for additional countries and years, which will add additional slices and cones to this page.
Congratulations! You've now customized all parts of your dashboard! You've learned how to customize Instances, KPIs, and Cognos reports, including using the Cognos report editor to make reports look just the way you want. In Part 3, you'll learn how to define alerts, you'll see the results as you feed in further sample data, and you'll learn how you can further edit the monitor model in Eclipse if needed.
- Learn more about IBM Business Monitor.
- IBM Software Services for WebSphere: Find out how IBM expertise in cutting-edge and proven technologies can help you achieve your business and IT goals.
- developerWorks BPM zone: Get the latest technical resources on IBM BPM solutions, including downloads, demos, articles, tutorials, events, webcasts, and more.
- IBM BPM Journal: Get the latest articles and columns on BPM solutions in this quarterly journal.
Get products and technologies
- Get the CSV Tool used in this article.
Dig deeper into Business process management on developerWorks
Get samples, articles, product docs, and community resources to help build, deploy, and manage your cloud apps.
Keep up with the best and latest technical info to help you tackle your development challenges.
Software development in the cloud. Register today to create a project.
Evaluate IBM software and solutions, and transform challenges into opportunities.