Level: Intermediate Kranti A Zond, Software Engineer, IBM
12 Dec 2006 Get started developing dashboards with IBM Workplace Dashboard Framework and IBM Rational Application Developer. This article provides a high-level overview of Workplace Dashboard Framework, including the underlying technology and key features so that you can build active dashboard portlets to improve business decision-making and productivity.
IBM Workplace Dashboard Framework is a powerful and flexible tool that allows you to quickly build active dashboard portlets to improve business decision-making and productivity. Workplace Dashboard Framework integrates with IBM WebSphere Portlet Factory; together they provide features such as charting, alerting, business user configuration, and common administration. Workplace Dashboard Framework is suitable for any industry with specific functions and requirements because it provides out-of-the-box composite dashboard portlets and allows maximum flexibility.
In this article, we show you how to:
- Create a portlet (high-level overview).
- Create and configure Microsoft Excel Import builder.
- Create a portlet interface using the Summary and Drilldown builder.
- Add the specialized Summary Row builder to a model.
- Add sorting and formatting capability to a builder.
- Add a Status Indicator builder.
- Test the portlet.
This article assumes that you have at least introductory-level skills in Java, J2EE, and portlet development. Note that WebSphere Portlet Factory is a prerequisite for Workplace Dashboard Framework. We also assume that you are familiar with Workplace Dashboard Framework and with WebSphere Portlet Factory and understand the terminology associated with these products.
System requirements
Before you start, make sure you have installed IBM WebSphere Portlet Factory V5.12.0 with IBM Rational Application Developer. (WebSphere Portlet Factory is a plug-in that you install into Rational Application Developer.) You also need a Microsoft Excel spreadsheet to be used as a data source.
Workplace Dashboard Framework extends the capabilities of WebSphere Portlet Factory, so Workplace Dashboard Framework developers can use the same underlying tooling (the WebSphere Portlet Factory Designer) and can follow the same fundamental steps to create portlets. Workplace Dashboard Framework developers must understand the same key concepts as WebSphere Portlet Factory developers.
Portlet creation overview
To create a new dashboard portlet, open the WebSphere Portlet Factory Designer, and then create a new model. A model contains a set of reusable components called builders. Each builder contributes to a specific task. You can create a new model by using the Model Creation wizard, which is accessible by choosing File - New - Factory Model from the WebSphere Portlet Factory Designer. Name the model and save it.
For information on how to create a model, refer to the developerWorks tutorial, "Developing portlets using Eclipse and WebSphere Portlet Factory."
Create and configure the Microsoft Excel Import builder
In this article, we use the Microsoft Excel Import builder to show how to integrate an external data source (in this case, a Microsoft Excel spreadsheet) into a dashboard. To do this, you use the Microsoft Excel Import builder. A builder is an intelligent component that understands design and automatically creates code. The Microsoft Excel Import builder is a data integration builder (that is a data source that connects to a Microsoft Excel spreadsheet).
To use the Microsoft Excel Import builder, first click the Builder Call icon located at the top of the Outline view in WebSphere Portlet Factory Designer. Then go to the Data Integration category, select Excel Import, and click OK. After the builder is selected, specify these settings (see figure 1):
- Name: sampleExcel
- File to Import: EmpImportBook.xls
- Content Selection Method: Automatic (let builder find the content)
- Sheet: Sheet1
Select the Has Header Row and Preserve Cell Formatting options, and then click OK.
Figure 1. Excel Import builder settings
When the Excel Import is saved, it generates the code that accesses the spreadsheet, including the schema that describes the data and the variable that holds the data as well as the service that you can invoke to retrieve the data and place it in the variable. You can see all this in the WebAppTree view shown in figure 2.
Figure 2. Excel Import WebAppTree view
Create a portlet interface using Summary and Drilldown builder
Summary and Drilldown builder creates a portlet interface within which charts and tables are displayed automatically. To add the Summary and Drilldown builder, click Builder Call (the gear icon) from the Outline view. From the Dashboard category, select Summary and Drilldown. After the builder is selected, specify these settings (see figure 3):
- Name: sampleSummaryandDrilldown
- Initialization Action: Select from the window DataServices/sampleExcelImport/execute. Note that SummaryData is automatically filled in with the results.
- Summary Page Title: My Page
- Summary Chart/Table Page: Both Chart and Table
- Page Layout Mode: Chart and Table on separate pages
- Page Navigation Type: Dropdown List of Pages
Figure 3. Summary and Drilldown settings
Under Summary Chart Properties, specify these settings (see figure 4):
- Chart Type: Bar
- Column for X-Axis: Division
- Column Selection: Include specific columns
- Column for Y-Axis: Request_Received, Request_Closed
Figure 4. Summary Chart Properties settings
In the Toolbar Options section, select the Enable Export to Excel and Enable Print Page options (see figure 5). Click OK. All the artifacts related to
Summary and Drilldown are generated, which you can see under the WebAppTree view.
Figure 5. Summary and Drilldown Toolbar Options settings
Add specialized Summary Row builder
The Summary Row builder places a row at the bottom of tables. It performs calculations such as addition, subtraction, and averaging for each column, and the last row contains the summarized value for each column. It can also display custom logic or custom text. We want to display Divisions text under the Division column. To do this, from the Builder Palette under Dashboard Category, select Summary Row and specify the settings below (see figure 6):
- Name: sampleSummaryRow
- Container field: [sampleSummarynDrilldownTable]sampleSummarynDrilldown_table/ExcelContent/Row]
In the Column Info panel, do the following:
- Select Division_name and for Summary Type, select "Text or Custom Value" and enter Division for Value to Display.
- Select Request_Received and for Summary Type, select Sum of Values.
- Select Request_Closed and for Summary Type, select Sum of Values.
- Select Total and for Summary Type, select Sum of Values.
- Select Invested and for Summary Type, select Sum of Values.
Click OK.
Figure 6. Summary Row settings
Add visual Status Indicator builder
This builder highlights and formats data cells in the table to show status based on certain logic. It can color the data, provide background for the cells, or add an image in the cell, such as an arrow or Help icon. An alerting mechanism can show status based on custom logic, thresholds, and alerts. The builder also supports integrated tool tip and mouseover messages so that when the cursor hovers over a red cell, a tool tip pops up with a warning message.
Now, let's add the Status Indicator builder from the Builder Palette, and to display the status of total revenue as red or green, specify the settings below (see figure 7):
- Name: sampleStatusIndicator
- field: [sampleSummarynDrilldownTable]sampleSummarynDrilldown_table/ExcelContent/Row/Total
- Type of Indicator: Style Formatting
- Style Application: Apply style or background color to text cell
In the Status Options, choose the following:
- For the first row:
- Status: Total<Invested
- Short Description: Less output
- Color: Red
- For the second row:
- Status: Total>Invested
- Short Description: Greater output
- Color: Green
In the Indicator Logic section, choose the following:
- Indicator Logic: Compare values to thresholds
- Value for Comparison: Selected Field
- Thresholds:
- For the first row:
- Status: Total<Invested
- Comparison: <
- Thresholds: ${DataServices/sampleExcel/execute/results/ExcelContent/Row/Invested}
- For the second row:
- Status: Total>Invested
- Comparison: >
- Threshold: ${DataServices/sampleExcel/execute/results/ExcelContent/Row/Invested}
Figure 7. Status Indicator builder settings
Add formatting and sorting capabilities: Rich Data Definition
Rich Data Definition (RDD) is a powerful builder that lets you select a schema in your model irrespective of any data source behind the schema. For each field in the selected schema, you can specify labels, formatting, and validation just by using a single instance of this builder. We use RDD to quickly change the labels that are displayed in your portlet, enhancing its look and feel.
Specify the settings below to change the labels that are displayed in the portlet (see figure 8):
- Schema: sampleExcel_Schema
- Data Definition Type: Specify Data Definitions in Builder UI
- Base Data Definition File: /WEB-INF/factory/data_definitions/base_datadef.xml
In the Data Definition Editor section, under the Name column, select:
- Division_Name and set Label as Division name.
- Request_Received and set Label as Request Received.
- Request_Closed and set Label as Request Closed.
Save the model.
Figure 8. Rich Data Definition builder settings
Test the portlet
To run the portlet, you must have IBM WebSphere Application Server V6 in your integrated test server environment. To do this, follow these steps:
- In the Servers tab, right-click WebSphere Application Server V6.0 and select "Add and remove projects." Move your project from Available project to Configured projects.
- Start the test server by right-clicking WebSphere Application Server and choosing Start.
- From the Run menu, choose Run - Configurations - New_configuration.
- Name new_configuration as Excel Import Sample.
- Set Model to run as run named model.
- Browse and select your model, ExcelImport.model.
- Click Apply, and then click Run.
Your dashboard portlet’s Table tab should look like figure 9.
Figure 9. Dashboard Framework Table demo
When you select the Chart tab, a chart is displayed for the same table as shown in figure 10.
Figure 10. Dashboard Framework Chart
Conclusion
We have provided a high-level overview of IBM Workplace Dashboard Framework, including the underlying technology and key features, hoping to get you started with developing your own dashboard portlet.
Resources Learn
Get products and technologies
Discuss
About the author  | | | Kranti Zond is a Software Engineer on the WebSphere Business Partner Technical Enablement (BPTE) team in Bangalore, India. She works on WebSphere Application Server and WebSphere Portlet Factory projects. |
Rate this page
| 
