Track 9: Creating Dashboards

JDashboard is a new way of information delivery, using a user portal user interface rather than a web report or page report. Users can create, edit and browse dashboards from the JReport Console using JDashboard. With pre-built library components, users can freely choose the objects they want to display in the dashboard, without having to know how these objects were created, what data sources to use, what styles to set, etc. A dashboard can hold multiple library components so that when browsing the dashboard users are able to see multiple data aspects. Within a dashboard, library components are able to communicate with each other via the message mechanism. This allows actions such as common filters to be applied to all the components of a dashboard even when coming from different data sources.

In this track, we will use the two library components created in Track 5 to build a dashboard on JReport Server.

This track supposes that you have published the library components to /COMPONENT_LIB/USERFOLDERPATH/admin/JinfonetGournetJava in Track 6.

Note: A JDashboard license for JReport Server is required in order to perform this track. If you do not have the licenses, please contact your Jinfonet Software account manager to obtain it first.

Task 1: Insert the library components into dashboard

  1. Click Start > All Programs > JReport 13 Update 1 > Server > Start JReport Server to start JReport Server.
  2. Click Start > All Programs > JReport 13 Update 1 > Server > JReport Server Console, or open a web browser and set the URL to http://localhost:8888.
  3. On the welcome page, enter admin for the user name and admin for the password, then click Login. The JReport Console page appears.
  4. Click New > Dashboard on the task bar of the Resources page to create a new dashboard.
  5. Click on the side bar to display the Resources panel, then go to Component Library > My Components > JinfonetGournetJava.
  6. Drag ProductSales.lc and ProductOrderDetails.lc to the destination in the dashboard body and align them horizontally.

Then let's add some comments on who has made changes to the dashboard and when.

  1. Click on the side bar to display the Resources panel if it is not displayed. From the Toolbox node, drag HTML to the dashboard body below the table.
  2. In the Insert HTML dialog, specify the title of the HTML component as Notes, then type in "Edited by Roman on Nov 23, 2012" in the text box. Click OK.

  3. The HTML component will be added in the dashboard. Since there is much blank space in the component, you can resize it smaller by dragging its border.

Next, we will add a title for the dashboard in its header.

  1. Click on the side bar to display the Resources panel if it is not displayed. From the Toolbox node, drag Dashboard Title to the dashboard header. Double-click in the dashboard title, then remove the sample text and type in Product Sales.

  2. Click on the side bar to save the dashboard. In the Save As dialog, specify to save the dashboard in the My Reports folder and provide a name for the dashboard file. Then click OK.

Task 2: Deliver message 0002 - Sort between the library components

After inserting the two library components into the dashboard, we can deliver the message between them. The message between the chart and table is defined as follows: when the click action is triggered on the chart bars, the built-in message 0002 - Sort will be sent out from the chart to the table, and when the table receives the message, it will make the order IDs sorted descendingly as a response to the message.

So to deliver the message, click any bar in the chart to send the message out, then we can see the order ID in the table is displayed in a descending order.

Task 3: Use slider to filter on quantity

The slider in the table is used to filter on a range of product quantity. Here we would like to know which products' order quantity are within 5,000 and 10,000. To do this, first unselect the All checkbox in the slider, then drag the left cursor to a number near 5,000 and the right cursor to a number near 10,000. The result comes out as follows:

We can also see the slider filters the data in the chart too, because the table and the chart use the same data source.

Task 4: Use configuration panel to change a property

To change the background color of the Quantity field, we need to use the text field web control in the configuration panel.

  1. Click on the component title bar of the table, then select Edit Setting from the drop-down list to display the configuration panel, and we can see the text field in it.

  2. Type 0xff0000 in the text field and click OK to apply the change property action to the Quantity field in the table. We can see the background color of the Quantity field is changed to red.

  3. Save the changes.

Task 5: Export the library components

  1. Click on the side bar to access the Export dialog. The Design tab displays the two library components horizontally which is too wide for a normal page, so we will adjust them vertically.
  2. Leave the Layout as Customize Layout which allows the adjustment of the layout.
  3. Go to the Design tab on the right. By default, all the exportable library components are arranged using a tabular style according to their positions in the dashboard. Each tabular cell can hold no more than one component.

    There is a blank cell below the table which is the position of the HTML component added in Task 1. HTML components do not support exporting so the HTML component is not available here.

We will remove the table on the right of the chart and add it below the chart.

  1. Right-click anywhere in the cell that contains the table and select Remove from the shortcut menu. The table library component will be removed.
  2. Add a cell below the chart. The chart fulfills its cell and it is hard to select the cell. We will take an indirect way: first delete the chart using Remove on the short menu, next select the cell and split it vertically via the button on the toolbar, then drag the chart - Product Sales - from the Resources box to the top cell and the table - Product Order Details - to the bottom cell.

  3. You may find that the table shows a template instead of real data. By default tables and crosstabs are limited to show only the data displayed in the dashboard. If you want the full table data to be exported, right-click on the table and select Filter from the shortcut menu. Then in the Filter dialog, switch from Current View to All and click OK.
  4. Click the View tab to preview the layout.
  5. You can save the layout if you are going to reuse it. Click on the toolbar, then in the Save As dialog, type in a name for the layout, for example, Layout1, then click OK. You will see that Layout1 is added in the Layout drop-down list and selected as the value.
  6. Click in the Export dialog to do final setting and then start exporting. In the displayed dialog, choose a format and provide a file name for the exported result, then click OK. The exporting process will begin.

Task 6: Set JDashboard as the server home page

  1. In the Profile > Customize Server Preferences > General tab on the JReport Administration or JReport Console page, set the option Use JDashboard as Server User Console Home Page to Yes to enable setting JDashboard as the server home page. Then click OK.
  2. In the My Reports folder, open the dashboard so that the setting in step 1 can take effect in JDashboard.
  3. Click on the side bar and you will see Set as Server Home is enabled on the menu list. Click the option to set JDashboard as the server home page.
  4. A Home tab will be available beside the Resources tab on the system toolbar of the JReport Console page. Click the Home tab and you can access JDashboard immediately.

Track 9 summary

In this track, we first created a dashboard by inserting two library components, an HTML component, and a dashboard title, and then perform operations in the dashboard such as delivering the message defined between the two library components, filtering the data using a slider, changing a property via the configuration panel, and exporting the library components. At the end we set JDashboard as the server home page so as for easier access.