Skip to main content
Matrix42 Self-Service Help Center

Creating Dashboards

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

To demonstrate how a simple Chart can be added to an already existing Landing Page. In this tutorial, we add a Pie Chart which displays the amount of Incidents grouped by priority to the Service Desk Landing Page. When a pie chart sector is clicked, all the related Incidents are displayed in a side panel.

1. Define the 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 two properties which represents the item Legend and the amount of items. It 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 ways to get such data in the Layout Designer. They can be compiled using the Calculated Property which aggregates data from different Data Sources and outputs the array of objects. An alternative, more popular way would be integrating a Data Source which already provides the required array of data, like a Web Service which returns some statistics, or Data Query Data Source which uses and SQL query to obtain the data, to the Data Model. For our case, we use a Data Definition Data Source as the most appropriate.

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

2. Click "ADD SOURCE" to define a 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, which means it is enough to load them once when the page is initialized)

Implementation Data Defintion
Data Definition SPSActivityPickupPriority, 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 

image.png

 

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)

5. This Data Source will be loaded only if its property $filter has a value, so it is necessary to set it. 

Find added DataSource in the DataModel and its property $filter. Click on it and then click on "Edit". Choose "Advanced mode" and input "Expression":

This mean that all items will be loaded. Or any other filter can be used. For example, if it is neede to show only priorities with more than 10 incidents than filter fill be:

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 set properties for Legend and Value.  If it is wrong select the right object properties from the drop downs. For our chart correct values are:

image.png

3. Configure Chart data details. 

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

For our example we will open list of incidents with selected priority.

In section "Details" set property "Entity Class" as "SPSActivityClassBase". After this any click on chart will open list with all activities in the system, without filter by priority.

image.png

To filter by priority, first it is necessary to keep selected priority in some field in DataModel. For this add new property to our Context. Click on "Context" in "DataModel", click "Add property". In opened dialog set "Field name" = "SelectedPriority".

After that click on PieChart on the canvas. Panel with properties of this chart will be opened on the left side panel. Find section "Output" and bind just created "SelectedPriority" to property "Selected Data Item"

image.png

Now create new property "FilterForChart" in "Context". In opened dialog click on "Advance mode". Click on "Add" and select "SelectedPriority" in opened panel:

image.png

And input "Expression":

image.png

After that bind "FilterForChart" to "Filter expression" property of chart.

image.png

  • Was this article helpful?