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.

Back to top

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."

Back to top

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.

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.

Back to top

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

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

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.

Back to top

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.

Back to top

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}

Back to top

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.

Back to top

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:

1. 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.
2. Start the test server by right-clicking WebSphere Application Server and choosing Start.
3. From the Run menu, choose Run - Configurations - New_configuration.
4. Name new_configuration as Excel Import Sample.
5. Set Model to run as run named model.
6. Browse and select your model, ExcelImport.model.
7. Click Apply, and then click Run.

Your dashboard portlet’s Table tab should look like figure 9.

When you select the Chart tab, a chart is displayed for the same table as shown in figure 10.

Back to top

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

• developerWorks WebSphere tutorial, "Developing portlets using Eclipse and WebSphere Portlet Factory"
  
  
• Watch a demo of IBM Workplace Dashboard Framework.
  
  
• Workplace Dashboards documentation
  
  
• IBM Workplace Dashboard Framework and Workplace dashboards Library
  
  

Get products and technologies

• Download a trial version of Workplace Dashboard Framework.
  
  

Discuss

• Participate in the discussion forum.
  
  

About the author

Rate this article

Comments

Back to top

Table of contents

• System requirements
• Portlet creation overview
• Create and configure the Microsoft Excel Import builder
• Create a portlet interface using Summary and Drilldown builder
• Add specialized Summary Row builder
• Add visual Status Indicator builder
• Add formatting and sorting capabilities: Rich Data Definition
• Test the portlet
• Conclusion
• Resources
• About the author
• Comments