Dashboard Object Usage Example

Official Content

This document provides a walkthrough of the needed steps to design and run a Dashboard object.

The example is based on the TestWebQueryViewer Knowledge Base, which includes concepts such as Countries, Cities, Cars, Brands, Sales, and Purchases.

You can solve several scenarios with a Dashboard object, just let's focus on providing a General KPI panel for the management team. Before getting started you will need to go through these points:

  • Carefully design your query objects to be included in the dashboard.
  • Review its filters and use the same name for those filters associated to the same concept (the meaning is the same). This will ease the creation of filters in the dashboard object and how data will be updated.

1) Object creation

Create a new Dashboard object (Reporting Category) with the name GeneralKPIs.

2) Object definition

Review the dashboard properties and set the following:

DashboardSample04

  • Title: set the desired title name, for the case use GeneralKPIs.
  • Filters position: keep the default "right" value.
  • Layout: set the "Header + two columns + footer" option.

3) Design

There is only one way to design your dashboard; you need to drag the elements from the toolbox you want to incorporate as part of the dashboard onto the form. Notice that the toolbox details the possible Dashboard widgets you may use.

When selecting the Query widget, the following step is to associate it to an existing Query object or Data Provider object. For the case we will be using the following existing queries:

  • Total Sales
  • SalesByCity
  • SalesByTime

Notice that once you connect the Query object it is automatically executed there and when needed filters are automatically created.

Drag two query widgets to the"header section" and connect them with the Total Sales query and set the following properties

ControlName: Object1

  • Type: Card
  • Include sparkline: True

ControlName: Object2

  • Include trend: True
  • Include max and min: True

The expected result is:

DashboardSample01

Now, add two new query widgets in the "central left section" and connect them to the SalesByCity query and set the following properties:

ControlName: Object3

  • Type: Chart

ControlName: Object4

  • Type: Pivot table

This is the expected result.

DashboardSample02

Now, add the last query widget in the footer section and connect it to the SalesByTime query and set the following properties:

ControlName: Object5

  • Type: Chart
  • Chart Type: Smooth timeline
  • On item click: Highlight values

Right click on the dashboard and use the Collapse | Expand widgets to get a compacted view of you design

DashboardSample07

Notice that when clicking on a dashboard widget you will get a hint its relationship with others; the selected object is marked in blue and the associations will be marked in green:

  • select a query, the associated filters are marked in green
  • select a filter, the queries where the filter is used is marked in green.

4) Look & Feel

For this example we will not change the default look and feel, you need to use classes from the associated Theme object.

5) Filters

To order to enhance the interaction in the object; it is important to add filters and connect them to the different queries; so every time you change a filter the associated queries will be updated.

By default, filters are automatically created when connecting a query with parameters. For this case, the following filter was already created because the SalesByCity includes the following condition:

CountryName in &CountryName

The ouput will detail the operation

========== SQL statement generation started ==========
Generating GeneralKPIs_CountryName ...
SQL statement generation Success

Change the default filter configuration as you wish. Notice that, every time the Filter1 control is changed, the Query3 and Query4 will be updated.

Control Name: Filter1

  • Name: CountryName (notice )
  • Caption: Country
  • Is Collection: True
  • Values: France Italy, Spain
  • Type: Drop-down list
  • Dynamic: True
  • Item Values: CountryName

  • Item descriptions: CountryName

  • Empty item: True

DashboardSample05

Cool ! your dashboard object is done. You have 5 query widgets associate to 3 queries related through 1 filter.

6) DashboardViewer

So far, we refined the dashboard object on the IDE. Now, we need to include it in the application to be visible for the users.

For a dashboard to be executable, it needs a special DashboardViewer control. This control needs to be dragged and dropped into a Web Panel object.

So, create a Web Panel object called GeneralKPI. Drag and drop the DashboardViewer control from the toolbar and configure the control properties (set the correct dashboard on the Object property).

DashboardSample06

7) Execution

There you go, run the application (F5) and open the brand new Web Panel containing the dashboard! You should see something similar to the image below:

DashboardSample03

Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.