Home > Platform > SolutionBuilder Guide > User Interface > Layout Templates > Use Cases > How to Create Dashboards

How to Create Dashboards

11 Dec 2017Last updated
0votes
14updates
44views

Overview

Solution Builders provides a big variety of the Chart controls which can be easily integrated to any user Interface Layout, e.g. Landing Pages.

Goal

Demonstrate the way how the simple Chart can be added to already present Landing Page. As an example the tutorial adds the Pie Chart on Service Desk Landing Page which displays amount of Incidents grouped by Priority. On clicking the Pie chart sector, the System displays all related Incidents in Side Panel

Step 1: Define Chart Data

First of all you need to figure out how to obtain the data to be display in the Chart. Any chart in Solution Builder expects an array of objects, with at least tow properties which represents the item Legend and amount of items. This means that for our goal we need to obtain data in the following format:

[
    {"Priority": "Low", "Amount": 123},
    {"Priority": "Middle", "Amount": 12}
]

There are plenty of ways to get such data in Layout Designer. They can be compiled using Calculated Property, which aggregates data from different Data Sources and outputs the array of objects. Or just integrate into Data Model a Data Source which already provides the required array of data, such as a Web Service which returns some statistics, or Data Query Data Source which uses SQL query to obtain the data. In our case, we use the Data Definition Data Source as the most appropriate.
 

1. In Layout Designer of the "Service Desk" Landing page, open Data Modeler.

2. Click "ADD SOURCE" to define the new Data Source which represents data for the Chart.

3. Configure the new Data Source:

Name Incidents_by_Priority
Source Execution Mode On Init (the data is not volatile, and does not rely on User interaction, means it is enough to load them once, when the page is initialized)
Implementation Data Defintion
Data Definition SPSActivityPickupPrioirty, multiple items;

4. Define additional property for just added Data Source which represent the amount of Incidents related to each Priority.
Find the Data Source at the bottom of the Layout Data Model. Click "Extra Property" for the Data Source Node.

In the dialog that appears, add the ASQL column expression for getting Incidents count:
 

Field Name Amount
Type Integer
Expression (ASQL) SUBQUERY(SPSActivityClassBase as A, Count(A.*), A.Priority = base.Priority and A.UsedInTypeSPSActivityTypeIncident IS NOT NULL)

Step 2: Configure Chart Appearance

Once the data is integrated into the Layout Data Model, we can take care of the visual element. Find the suitable chart in the Layout Designer Toolbox (PieChart in our case), and drop it on Layout Canvas; the System automatically opens the selected control properties in Properties Grid.

Define Model

Find Properties section "Model", and bind the previously created Data Source data to the Control. For the Data, pick the Data Model property which keeps the array of Priorities. The System automatically guesses the right properties for the Legend and Value.  If it is wrong, select the right object properties from the drop downs. 

Step 3: Configure Chart Data Details

The Solution Builder allows you to handle the clicks on chart and show the list of related objects in the UUX Side Panel.

The section is still under construction. Please check back later.

You must to post a comment.
Last modified

Tags

This page has no custom tags.

Classifications

(not set)
Customer
(not set)
icons-access-c.png