You are on page 1of 25

Copyright IBM Corporation 2007. All rights reserved.

WebSphere Dashboard Framework - Standard Demo Compensation Budget Summary and Drilldown Lab Exercise Difficulty Rating: 2 (scale 1-5; 5 = most difficult)

Prerequisites Microsoft Windows 2000 Server and Advanced Server, Microsoft Windows 2003 Standard and Enterprise Editions, Microsoft Windows XP Professional, or Windows Vista WebSphere Portal Server version 6.0.x or above

Or Alternatively, The ChannelWorks WPF VM WebSphere Portlet Factory Designer 6.1.0 must be installed, configured, and tested in specific accordance with the WebSphere Portlet Factory and WebSphere Dashboard Framework 6.1.0 - Installation Guide Lab. The importance of installing, configuring, and testing exactly as clearly outlined in the installation guide cannot be overstated. The WebSphere Portlet Factory Designer - Standard Demo Hello World must be successfully completed before beginning this, or any other WebSphere Dashboard Framework with WebSphere Portlet Factory Lab Exercise as it explores fundamental aspects of the development lifecycle not covered in this exercise. o C:\Lab Files\Portlet Development\HelloWorld

The WebSphere Portlet Factory Designer - Standard Demo - Employee Compensation must be successfully completed o C:\Lab Files\Portlet Development\EmployeeCompensation

The WebSphere Dashboard Framework - Standard Demo - Compensation Budget lab files must be downloaded and Compensation Budget Getting Started Guide must be successfully completed. Please refer to your lab directory in the ChannelWorks VM Image. o C:\Lab Files\Portlet Development\CompensationBudget

WebSphere Dashboard Framework - Compensation Budget - Summary and Drilldown Lab Exercise

Page 1 of 25

Copyright IBM Corporation 2007. All rights reserved.

Assumptions For purposes of this enablement exercise, the author of this document assumes that WebSphere Portal version 6.1.x (WPS) is installed and configured on the machine on which WebSphere Portlet Factory (WPF) will be installed. If WPS is not on the same machine, or if an attempt is made to install a product version other than WDF 6.1.0, this document may provide limited, if any assistance. It is highly recommended that you follow the installation guidelines below, especially as it relates to naming conventions. Please note that enablement support will not be offered for custom configurations. Lab Exercise Goals This is an introductory demonstration of the application of WebSphere Dashboard Framework in the development of a dashboard portlet that exposes information from a relational database. This portlet uses a number of dashboard features such as: Drilldown by clicking on the chart and table to view more detailed data for the selection Buttons for exporting data to Excel and printing the contents of a portlet Visual indicators that highlight data based on logic Total rows for the table views

For assistance and additional information you may refer to the finished version of this exercise in the WDF_Labs project. The finished Service Provider model is called BudgetDataProvider (/WEBINF/models/compbudget/data/). The finished Service Consumer (portlet) is called SummaryAndDrilldown (/WEB-INF/models/compbudget/portlets/). Please refer to the README in each model for further instruction.

WebSphere Dashboard Framework - Compensation Budget - Summary and Drilldown Lab Exercise

Page 2 of 25

Copyright IBM Corporation 2007. All rights reserved.

Working with Data Services The Service-Oriented Architecture (SOA) of WebSphere Portlet Factory defines Service Provider models that access back-end data and services and Service Consumer or Presentation models that provide the front end user interface. WPF automates the generation of both of these layers as well as all the necessary artifacts to enable loose coupling between them. The benefits and a tutorial of this architecture are covered in detail in the WebSphere Portlet Factory Designer Employee Compensation and Department Compensation Standard Demos mentioned above. This lab will focus on creating a portlet to consume the data services, so it will only test the existing service provider model, rather than creating it. Part One: Test the Service Provider model Again, Service Provider models define data services. The model (and thus the service) is then referenced by Service Consumer models. The service can provide one or more operations and can return whatever results are required within an application, including gathering data from multiple back ends or databases and combining this data in whatever form is necessary. This BudgetData Service Provider model contains two related data services that aggregate compensation and budget data. The first summarizes the data by department, calculating how the total compensation compares to the budget for each department. The second returns more detailed compensation data for each employee in a selected department. The data for these two services is retrieved and calculated from the Cloudscape DEMO database configured in the WebSphere Portlet Factory Designer Employee Compensation Standard Demo mentioned above. The following steps will walk you through testing the data services to help you understand how they relate to the portlet you will build next.

1. Start Lotus Domino Server.Start 2. After Domino is completely started, then start IBM Websphere Portal Server and WebSphere Portlet Factory Designer (With WebSphere Dashboard Framework Installed already) 3. Check that the WDF_Labs Factory WebApp project is open. If not, right-click on the project name and select Open Project. 4. Navigate to and double-click to open BudgetDataProvider.model in WEBINF/models/compbudget/data

Take a look at the list of Builders in this model, found in the Outline view to the bottom left of the Designer. You will see that it contains two SQL Call Builders, used to create the queries to the database. There is also a Service Definition Builder that declares the data service, enables the generation of a WSDL file, and builds the test interface for any operations. Finally it has two Service Operation Builders that expose the SQL Call queries as data services. For more information, open the README comment Builder or open any of the Builders in the model and expand the Properties section to view more comments.

WebSphere Dashboard Framework - Compensation Budget - Summary and Drilldown Lab Exercise

Page 3 of 25

Copyright IBM Corporation 2007. All rights reserved.

5. Run the Service Provider model to test the services a. (There is no need to create Run the model by clicking the green Run button a new Run Configuration as you should have already created a Run Configuration called Project Defaults when you configured WDF/WPF).

b.

Click the BudgetData link to test the Database Call

c.

Click the Back button and then click the CompensationForDepartment link to test the other service. This shows you a page with one input for a Department ID. There is a default value specified, which is one of the DEPTNO values from the results of the first service. Click the Submit Query button to invoke the service.

d.

WebSphere Dashboard Framework - Compensation Budget - Summary and Drilldown Lab Exercise

Page 4 of 25

Copyright IBM Corporation 2007. All rights reserved.

e.

Click the Back button and click View WSDL to view the Web Service Definition Language document that describes the defined service and associated operations.

(viewed in FireFox)

WebSphere Dashboard Framework - Compensation Budget - Summary and Drilldown Lab Exercise

Page 5 of 25

Copyright IBM Corporation 2007. All rights reserved.

(viewed in Internet Explorer)

Congratulations! You have successfully tested the Service Provider model for the lab, the services for which are consumable by any application via WSDL/SOAP, or even more compelling, a WebSphere Dashboard Framework model that could be deployed as a portlet in WebSphere Portal Server.

Part Two: Create a new dashboard portlet model The main focus of this lab is to learn about creating dashboard portlets. Any portlet can be placed in a dashboard, but a distinguishing feature of dashboard portlets is they serve not just to display data, but to help the user interpret data and use it to make decisions. WebSphere Dashboard Framework contains a suite of Builders that capture design patterns used in dashboard portlets. In this part of the demo, you will use some of these Builders for functionality like charts and tables with drilldown, exporting data to Excel, and visually highlighting data based on logic. In Part One, you tested two data service operations: one that provided a summary of compensation and budget numbers by department and a second which fetched more detailed compensation data for a selected department. You will now use those 2 services to create a high-level summary view and a subsequent drilldown. 1. Create a new WebSphere Portlet Factory Model a. b. c. d. e. f. g. File > New > WebSphere Portlet Factory Model Choose Project: WDF_Labs Click Next. Select Model: Empty Click Next. Model Name: mySummaryAndDrilldownPortlet Click Finish

WebSphere Dashboard Framework - Compensation Budget - Summary and Drilldown Lab Exercise

Page 6 of 25

Copyright IBM Corporation 2007. All rights reserved.

2. Consume the Data Services you tested in Part One a. b. c. Click on the Builder Palette icon in the Outline view (lower left) On the left side select the Services category On the right side scroll to and choose (double-click) a Service Consumer Builder i. Name: Budget beside the input. Select ii. Provider Model: click the ellipsis compbudget/data/BudgetDataProvider

iii. Click OK in the Service Consumer Builder Call Editor. 3. Add a Summary and Drilldown Builder to create a page to call the data services and display the results. a. b. c. Click on the Builder Palette icon in the Outline view (lower left) On the left side select the Dashboard category On the right side choose (double-click) a Summary and Drilldown Builder i. Name: Summary ii. Initialization Action: click the ellipsis beside the input. When presented with the tree structure, expand Data Services, expand Budget, and choose the BudgetData operation.

WebSphere Dashboard Framework - Compensation Budget - Summary and Drilldown Lab Exercise

Page 7 of 25

Copyright IBM Corporation 2007. All rights reserved.

iii. Summary Page Title: Enter the text Compensation vs. Budget by Department iv. Take a look at the sections called Summary Pages to Create and Page Layout and Navigation. Leave the inputs at their defaults for now. v. Column for X-Axis (under the Summary Chart Properties section): DEPTNAME

vi. Chart Width: 600 vii. Click OK. d. Save the model by clicking the Save icon

4. Run the model by clicking the green Run button (There is no need to create a new Run Configuration as you should have already created a Run Configuration called Project Defaults when you configured WPF).

WebSphere Dashboard Framework - Compensation Budget - Summary and Drilldown Lab Exercise

Page 8 of 25

Copyright IBM Corporation 2007. All rights reserved.

a.

Toggle between the Chart and Table using the button in the upper right of the portlet

At this point you have created already created a portlet that accesses a data service and displays the results in both chart and table format. Before you create the drilldown functionality, there are a few changes to make to this summary view. The first is to simplify the chart to show just the TOTAL_COMPENSATION and BUDGET fields and to use a better looking chart. Also, it would be a good idea to display the chart and the table on the same page and to add support for easily printing the portlet and exporting data to Excel. 5. Make a few changes to the summary view of compensation budget a. From the Outline View list of Builder Calls, double-click to reopen the Summary and Drilldown Builder you added in the previous step. i. Under Page Layout and Navigation section 1. Page Layout Mode: select Chart and Table on Same Page 2. Page Order and Labels: use the arrows Chart ii. Under Summary Chart Properties 1. Provide Custom Style: check 2. Chart Style: click the ellipsis beside the input, click the Choose File tab, and navigate to and choose /WEBINF/chartstyles/compbudget/summary_frame.xml Note: In this step we are substituting the default chart style, which was a generic Bar chart, for a custom chart style. If you are interested in creating your own custom chart styles, download and use the WebCharts3D chart designer tool from Greenpoint, Inc (http://www.gpoint.com). 3. Column Selection: select Include Specific Columns to move Table above

WebSphere Dashboard Framework - Compensation Budget - Summary and Drilldown Lab Exercise

Page 9 of 25

Copyright IBM Corporation 2007. All rights reserved.

4. Columns for Y-Axis: Click in the first row of the table to see dropdown of column names (and not the ellipsis). A dropdown will appear. In the first row, select TOTAL_COMPENSATION and in the second select BUDGET.

iii. Scroll down to the Action Menu Options section 1. Enable Export to Excel: check Note: If MS Excel is on the end user's machine, the exported file can be viewed in MS Excel viewer. However, if only MS Excel Viewer is installed or no MS Excel product, it will be viewable in a browser, MS Excel, etc. But it will not be viewable in MS Excel Viewer. 2. Enable Print Page: check iv. Click OK. b. Save the model by clicking the Save icon

6. Run the model to see your changes by clicking the green Run button

WebSphere Dashboard Framework - Compensation Budget - Summary and Drilldown Lab Exercise

Page 10 of 25

Copyright IBM Corporation 2007. All rights reserved.

a.

Click Actions dropdown to test out the Print Portlet and Export to Excel functions (note that your Virtual Machine may not have Excel installed).

Now that you have the basic summary view that shows compensation and budget data, you want to create a drilldown action that will let end users drilldown on a specific department. The end user will do this by clicking on either a bar in the chart or a department name in the table. This action will call the second data service, CompensationForDepartment, and display the results in a table, listing compensation by employee. Before the CompensationForDepartment data service can be called, you need to map the service input parameter to the field on which you have enabled drilldown. You will remember from testing the data services in Part One that CompensationForDepartment takes a department number (DEPTNO) field to find a list of employees. This department number needs to correspond to the DEPTNO field value for the department on which the end-user clicks in the chart or table. To help you do this, the Summary and Drilldown Builder creates a Variable for you called <builder_name>_SelectedRowData. At runtime, this variable will contain all of the field values for the row on which the end user drilled down. In the next step you will point the service inputs to the DEPTNO field in this variable. 7. Passing Parameters in the Service Consumer a. In the Outline View Builder Call List, double-click to reopen your Service Consumer Builder. i. Check the Override Inputs box The Overridden Inputs Builder Input Group will appear

WebSphere Dashboard Framework - Compensation Budget - Summary and Drilldown Lab Exercise

Page 11 of 25

Copyright IBM Corporation 2007. All rights reserved.

ii. Click on the CompensationForDepartment Row in the Operations table (just to make sure it is selected, which it probably already is) iii. In the inputs table (on the right side), you will see a row for GetCompensationForDepartmentInputs.DEPTNO. In the Input Value column, click on the ellipsis button to open the picker and browse under Variables to find Summary_SelectedRowData. Expanding this variable and navigate to DEPARTMENT/DEPTNO node and click OK to select it.

The resulting value should look like this: ${Variables/Summary_SelectedRowData/DEPARTMENT/DEPTNO}

iv. Click OK to close the Builder call. 8. Return to the Designer and in the Outline View Builder Call List, double-click to reopen your Summary and Drilldown Builder. a. Scroll to the Summary Table Properties section i. Column For Link: select DEPTNAME b. Scroll down to the Drilldown Properties section i. Drilldown Type: Call an Action and Display Data ii. Action to Call: Use the ellipsis picker and select DataServices/Budget/CompensationForDepartment

WebSphere Dashboard Framework - Compensation Budget - Summary and Drilldown Lab Exercise

Page 12 of 25

Copyright IBM Corporation 2007. All rights reserved.

iii. Drilldown Data: will be automatically populated with the results of the CompensationForDepartment service. Leave this as the selection. iv. Page Title: Use the ellipsis picker and browse again to the Variable Summary_SelectedRowData but here navigate to the DEPARTMENT/DEPTNAME field. The value should look like this: ${Variables/Summary_SelectedRowData/DEPARTMENT/DEPTNAME} v. Still on Page Title, type Department after the variable you just chose.

${Variables/Summary_SelectedRowData/DEPARTMENT/DEPTNAME} Department

c. d.

Click OK to close the Builder Call. Save the model by clicking the Save icon

9. Run the model to see your changes by clicking the green Run button a. Test out the drilldown by clicking on one of the Department names in the table, which should load the drilldown page.

WebSphere Dashboard Framework - Compensation Budget - Summary and Drilldown Lab Exercise

Page 13 of 25

Copyright IBM Corporation 2007. All rights reserved.

b.

The Builder has used the two page titles to create breadcrumb navigation back to the Summary page. Click the breadcrumb link (Compensation vs. Budget by Department) to go back to the top level page. Try the drilldown from the chart by clicking on one of the bars in the table.

c.

At this point you have created a portlet that shows all of the data for both services in an interactive way. In order to make this portlet more user friendly and to help users quickly interpret the data, you will add a few more features. These features include providing more readable labels for all the fields (e.g. % of Budget instead of PCT_OF_BUDGET), highlighting of departments that are close to or exceeding their budget, and total rows for the tables.

10. Add a Localized Resource Builder to import a localizable set of field labels. a. b. Click on the Builder Palette icon in the Outline view (lower left) On the left side select the All category, and on the right side locate Localized Resource and double-click to open it. i. Name: LocaleData ii. Resource Bundle Name: click the ellipsis button to launch the picker and navigate down to compbudget and select compensation_budget. The value will look like this: compbudget.compensation_budget iii. Click OK to close the Builder Call iv. In the Outline View Builder Call list, select your Localized Resource Builder call and drag it to the top of the list. Note: You are strongly encouraged to open in a text editor and review the Resource Bundle compensation_budget.properties (available in the WDF_Labs project here: /WEB-INF/work/source/compbudget/). The Localized Resource Builder imports the fields in a resource bundle and adds them in an XML Variable in the WebApp. If you look in the WebApp Tree view of the Designer, you will see LocaleData

WebSphere Dashboard Framework - Compensation Budget - Summary and Drilldown Lab Exercise

Page 14 of 25

Copyright IBM Corporation 2007. All rights reserved.

under Variables. Select it and you will see an XML structure with a more readable value for each of the column names. The Page Automation and charting Builders which underlie the Summary and Drilldown Builder can map these labels to each field in the data structures.

Note: You will not do it here, but one of the major reasons for using the Localized Resource Builder and a resource bundle is the ability to localize these field labels. This works by creating copies of the resource bundle for each locale and then using the Localized Resource Builder to select the appropriate bundle based on a locale at runtime. For more information on this, look at the help available with the Localized Resource Builder. 11. Add Localization to the Summary and Drilldown Builder a. b. c. d. Double-click on the Summary and Drilldown Builder to reopen it. Scroll to the bottom and expand the Localization Options section Locale Data Variable: In the dropdown, select LocaleData. Click OK to close. and click the green run button to see your changes.

12. Save the model

You will notice the fields have been localized in both the summary and drilldown tables as well as in the chart (in the legend and mouseover popups).

WebSphere Dashboard Framework - Compensation Budget - Summary and Drilldown Lab Exercise

Page 15 of 25

Copyright IBM Corporation 2007. All rights reserved.

NOTE: If you do NOT see changes in the field labels, be sure that you moved the Localized Resource Builder Call to the top of the list in the Outline view. The next changes to make this portlet more user friendly are to format the number values appropriately (115489.00 > $115,489.00), to add column sorting, and to set column widths. All of these can be accomplished using the Rich Data Definition framework. A more detailed discussion of this feature is provided in the Employee Compensation Summary Lab. 13. Open the compensation_budget and base Rich Data Definition files. a. In the Project Explorer, browse under your project to WEBINF/datadefinitions/compbudget and open the two files compensation_budget.xml and base.xml with a text editor. Look at compensation_budget.xml and you will see that it defines 2 main structures, one for DEPARTMENT and one for EMPLOYEE, which map to the columns in the summary and drilldown tables. Each field has a base type that points to some common base types in the base.xml file, which is referenced at the very end of the file. Look at each of the base types in base.xml to see some of the attributes that are set for each field. For example, the base_DEPTNAME type is left aligned and has sorting enabled for case-insensitive strings. Close the two XML files.

b.

c.

d.

WebSphere Dashboard Framework - Compensation Budget - Summary and Drilldown Lab Exercise

Page 16 of 25

Copyright IBM Corporation 2007. All rights reserved.

14. Reopen the Service Consumer Builder and point to the Rich Data Definition file. a. Double-click on the Service Consumer Builder in the Builder Call List to reopen it i. Rich Data Definition File: use the picker to browse down to the compensation_budget.xml file you just opened. The path should look like: /WEB-INF/datadefinitions/compbudget/compensation_budget.xml b. Click OK to close. the model again to see the changes to the summary and drilldown

15. Save and run tables.

a.

Test the sorting of each column in the tables. You will notice that the sorting of the summary table also affects the summary chart.

16. Add a Status Indicator Builder to highlight the % of Budget field for departments that are close to or exceeding their budget. a. b. c. Click on the Builder Palette icon in the Outline view (lower left) On the left side select the Dashboard category On the right side locate Status Indicator and double-click to open it. i. Name: BudgetWarning ii. Field: Use the picker to select [SummaryTable]summary_table /Departments/Department/PCT_OF_BUDGET iii. Type of Indicator: Style Formatting (default) iv. Style Application: Apply style or background color to text cell v. In the Status Options table add 3 rows with the following inputs:

WebSphere Dashboard Framework - Compensation Budget - Summary and Drilldown Lab Exercise

Page 17 of 25

Copyright IBM Corporation 2007. All rights reserved.

vi. Indicator Logic: Compare values to thresholds vii. Thresholds: For each of the options enter the following values:

viii. Default Status: OnTrack ix. Click OK to close d. 17. Run a. Save the model by clicking the Save icon the model to see the Status Indicator in action. Any departments with a % of Budget value over 90% should be colored yellow and any over 95% should be red.

Note: If you do not see any highlighting or the logic is not the same, revisit the Status Indicator Builder and make sure the options are in the correct order with the right comparisons. 18. Add a second Status Indicator with a red/yellow/green light icon. a. b. c. Click on the Builder Palette icon in the Outline view (lower left) On the left side select the Dashboard category Double-click Status Indicator to add another. i. Name: Status ii. Field: Use the picker to select the [SummaryTable]summary_table /Departments/Department/PCT_OF_BUDGET field. iii. Type of Indicator: Image Indicator iv. Image Location: Add new column with image v. New Column Name: Status

vi. Column Placement: select First Column

WebSphere Dashboard Framework - Compensation Budget - Summary and Drilldown Lab Exercise

Page 18 of 25

Copyright IBM Corporation 2007. All rights reserved.

vii. In the Status Options table add 3 rows with the following inputs (Note: when you click on the ellipsis in the Image column you need to select the Choose File tab first before you can select the file location specified. By default the Choose Reference tab is visible):

viii. Indicator Logic: Same as other indicator on page ix. Indicator to Use: select PCT_OF_BUDGET x. Default Status: select OnTrack

xi. Click OK to Close d. 19. Run Save the model by clicking the Save icon the model to see the second Status Indicator.

You should now have a new column at the left of the summary table with a red, yellow or green icon for each department that uses the same logic as the color PCT_OF_BUDGET highlighting.

20. Add a Summary Row Builder to each table to summarize each column. a. b. c. Click on the Builder Palette icon in the Outline view (lower left) On the left side select the Dashboard category Double-click Summary Row to open a new Builder Call. i. Name: ByDepartmentSummaryRow

WebSphere Dashboard Framework - Compensation Budget - Summary and Drilldown Lab Exercise

Page 19 of 25

Copyright IBM Corporation 2007. All rights reserved.

ii. Container Field: Use the picker to select [SummaryTable]Summary_table/DEPARTMENTS/DEPARTMENT iii. Clicking on a column name in the list on the left makes it active and you can then set the Summary Type for that column. By default each column is set to No Summary. Select each of these columns and enter the following values (leave the others at their default):

Column DEPTNAME

Summary Type Text or Custom Value

Other Field Value to Display = All Departments Number Format = $##,##0.00 Number Format = $##,##0.00 Number Format = $##,##0.00 Number Format = ##,##0.0 Text After Result = (Avg)

TOTAL_COMPENSATION

Sum of Values

BUDGET

Sum of Values

REMAINING_BUDGET

Sum of Values

PCT_OF_BUDGET

Average of Values

iv. Click OK to close d. Repeat this for the drilldown table by adding another Summary Row Builder i. Name: ByEmployeeSummaryRow ii. Container Field: [SummaryDetailTable]SummaryDetailsDataPage/EMPLOYEES/EMP LOYEE. iii. Column Info: Column EMPLOYEE_NAME Summary Type Count Number of Values Sum of Values Other Field Text after Result = [space]Employees Number Format = $##,##0.00 Number Format = $##,##0.00 Number Format = $##,##0.00 Number Format = $##,##0.00

SALARY

BONUS

Sum of Values

COMM

Sum of Values

TOTAL_COMPENSATION

Sum of Values

WebSphere Dashboard Framework - Compensation Budget - Summary and Drilldown Lab Exercise

Page 20 of 25

Copyright IBM Corporation 2007. All rights reserved.

iv. Click OK to close e. 21. Run Save the model by clicking the Save icon the model to see the Summary Row on each table.

You should now have a row that shows totals for the selected columns in the table.

22. Hide some of the Table Columns using Data Column Modifier a. b. c. Click on the Builder Palette icon in the Outline view (lower left) On the left side select the Page Modifier category Double-click Data Column Modifier to open a new Builder Call. i. Name: ByDepartmentTableColumns ii. Container Field: click on the ellipsis and select [SummaryTable]Summary_table/DEPARTMENTS/DEPARTMENT iii. In the table at the bottom, each column is listed. Set the Status for each of the fields to Show, except for the DEPTNO column, which you should set to Hide. iv. Set the Alignment for the Status column to Center. v. d. Click OK to close.

Repeat the process to open a second Data Column Modifier

WebSphere Dashboard Framework - Compensation Budget - Summary and Drilldown Lab Exercise

Page 21 of 25

Copyright IBM Corporation 2007. All rights reserved.

i. Name: ByEmployeeTableColumns ii. Container Field: : click on the ellipsis and select [SummaryDetailTable]SummaryDetailsDataPage/EMPLOYEES/EMP LOYEE

iii. Column List: 1. Set all Status fields to Show, except for EMPNO, which you should set to Hide. iv. Click OK to close. e. Save the model by clicking the Save icon

23. Run the model to see the changes to each table. You should no longer see the Department # or Employee # fields.

You have now built a fully-functioning dashboard portlet. The last step is to name it and deploy it as a portlet into WebSphere Portal. 24. Name the Portlet a. b. c. Click on the Builder Palette icon On the left side select the Portal Integration category Scroll to and choose (double-click) a Portlet Adapter builder

WebSphere Dashboard Framework - Compensation Budget - Summary and Drilldown Lab Exercise

Page 22 of 25

Copyright IBM Corporation 2007. All rights reserved.

i. Name: mySummaryAndDrilldownPortlet ii. Portlet Title: My Summary and Drilldown Portlet iii. Click OK d. Save the model by clicking the Save icon

Note: It is important to save first before redeploying the WAR file. If you forget to save, the portlet will not be deployed to the Portal 25. Recreate and Redeploy the WDF_Labs.war a. Right-click on the project name WDF_Labs > choose Portal Server WAR > click Build Portlet War

26. When the update process is complete (could take up to five minutes depending on system resource availability), login to the WebSphere Portal Server as the Administrator and position the Compensation Budget portlet on a portal page using the WebSphere Portal Server Edit Page Layout process with which you are already familiar.

Search Portlet Titles for My Summary (note that if English is not your default locale, you may have to search by Last Modified in lieu of Title starts with).

WebSphere Dashboard Framework - Compensation Budget - Summary and Drilldown Lab Exercise

Page 23 of 25

Copyright IBM Corporation 2007. All rights reserved.

Again, position the my Summary and Drilldown Portlet portlet as below:

Upon compilation, the page should appear as below:

WebSphere Dashboard Framework - Compensation Budget - Summary and Drilldown Lab Exercise

Page 24 of 25

Copyright IBM Corporation 2007. All rights reserved.

Congratulations! You have successfully created a dashboard portlet using WebSphere Dashboard Framework and deployed it to WebSphere Portal Server!

Please take a moment to consider all that which you have accomplished in this short space of development time: Employed the Service-Oriented-Architecture of the WebSphere Dashboard Framework to consume two data services that integrate with a Relational Database via JDBC. Turned raw Data Services into a user-friendly graphical application with high-level chart and table summary views, including drilldown to more detailed data. Added rich user interface elements such as sorting, data field formatting and visual indicators to help users interpret the data. Easily enabled valuable features such as exporting of data to Excel and printing of portlet.

END OF Compensation Budget Summary and Drilldown Lab Exercise

WebSphere Dashboard Framework - Compensation Budget - Summary and Drilldown Lab Exercise

Page 25 of 25

You might also like