Home > Platform > SolutionBuilder Guide > Tutorial > Creating Dashboards

Creating Dashboards

05 Dec 2017Last updated
0votes
1updates
4views

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

1. Define the Chart Data

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

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

There are plenty 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, in most popular way, just integrated to Data Model a Data Source which provides already the required array of data, like a Web Service which returns some statistics, or Data Query Data Source which uses SQL query to obtain the data. For our case, we use 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 new Data Source which represents data for Chart .

3. Configure 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 in the bottom of the Layout Data Model. Click "Extra Property" for the Data Source Node 



 

 In opened dialog 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)

2. Configure Chart appearance

Once the data is integrated to Layout Data Model, we can take care about the visual element. Find the suitable chart in Layout Designer Toolbox (PieChart for 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 guess the right properties for Legend and Value.  If it is wrong select the right object properties from the drop downs. 

 

3. TODO: Configure Chart data details

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

 

You must to post a comment.
Last modified

Tags

This page has no custom tags.

Classifications

(not set)
(not set)
(not set)