Certified Professional Programme

Builder Essentials User Guide

Module 6: Reporting in MATS

Create a Reports Page
Now that the bulk of the user Interface has been created, the next step is to create some form of reporting functionality to allow
data within the platform to be visually displayed to users.

In this scenario 3 types of reports will be created; charting functionality to display data relating to cases, a map to depict where
customers are located and a process map to show an overview of information related to all cases in the platform.

Step 1: Edit the Top Tab

Navigate to the Build Tab and click on the Interfaces Sub Tab.

The Default Interface will be selected by default. Click on the Default Interface name to open it:

The Edit Interface Page will display. Navigate to the Top Tabs section where any Top Tabs created in the Interface will be
displayed. Click the edit option for the Management Information Top Tab (if the Top Tab needs to be created, click Add New).

Step 2: Create the Viewport

Create a new Viewport titled Reports by clicking Add new. Make it the default and ensure that the option to display a Back
button is enabled within the Basics tab.

Once created, Save and Edit this Viewport:

Step 3: Create the Sub Tab

Now that the Viewport is created, three Sub Tabs need to be added in order for users to be able to view Reports (charts related to
cases), a customer Map and an overview of the Process covering all cases in the system. Click Add new to create each Sub Tab.

As more than one Sub Tab is being created within this Viewport, ensure the Display Sub Tab Navigation option within the
Basics tab is ticked. Click Save

Step 4: Create the Page

We will begin by creating the Reports Page. Edit the Reports Sub Tab and add a new Page titled Reports.

As with some of the Pages created previously, in this example a single Page is being created. Therefore, best practice is to
ensure the Visible option is left to its default setting of Disabled to prevent the Page name being displayed below the Sub Tab name
(as they are both the same).

Once the new Page has been Saved, click Edit.

MatsSoft Ltd. 2017 2 of 8

This Page will be configured to show a chart relating to cases together with the ability to search by a date range. Split the
widget space into half ensuring that the case Object of TSG Helpdesk is selected from the drop-down menu in the right-hand
side of the screen, add a Quick Chart Widget to the left hand widget space.

The first chart will be configured to show a breakdown of all cases by created per month. To do this, click the pencil icon in the
top right-hand side of the Widget to access its Settings.

In the Essentials section of the Settings pane, the following areas can be added / configured:

Title: Number of Cases Created per Month

Type: Select the type of chart to be created, in this case a Column Chart
Subset: If the chart is to be configured to only show data belonging to a specific Subset, select it from this menu
Observed Data: What type of data will the chart display, data related to records, events, messages or timers (in
this case Records is selected as we wish to see details relating to cases)
Grouped Field: The field the datas to be grouped by. In this example, we wish to see cases based upon the
Attribute of Date Created
Title field: Choose the Field that will be used to automatically create the titles in the chart
Set the Scale to Month

In the Reported Data, Presentation and Logic sections of the Settings pane, the following areas can be added / configured:

MatsSoft Ltd. 2017 3 of 8

 Hide Label: Hide the data labels from showing around the chart
Series Subset Restriction: Places a restriction on viewing the chart if the data inside it is within the specified Subset
Generic Date Filter Field: Allows the choice of any available date and time fields to filter the chart against. Select
Date Created
Function: Select the calculation function to be used in the chart. In this example Count Total is used as we wish
to see the total number of cases that meet the Grouped Field Property selected earlier
Title Background: adds a solid colour background behind the title text
Push Content Up: Selected to minimize any white space at the top of the Widget
Spacing: Increase or decrease the amount of white space between each widget
Chart Title: Adds a title above the chart (rather than as a Widget title)
Height: Define the height of the chart in pixels
Dimensions: select the 3D option
Show Non Values: Will display records where the Grouped field option selected earlier is missing
Download to CSV: will allow users to download the data behind the chart to a Comma Separated Values file.
Place a tick in this option.

Once configured, Save the Page to add the Chart to it.

The second Widget space will be configured to allow a search by a date range.

Add a Search Widget based on the TSG Helpdesk Case object and add a Heading 4, Collapsing element to this widget

Select this element and amend its Settings as follows:

Text: Click here to Search by Date
Default state: Collapsed

From the Elements tab, add 2 Generic date fields from the filters section, these will be used to allow the end-user to specify
the start and end dates of the date range used to filter the chart;

Click on the first Generic date field and change its Main label to Date From and change its Comparator to Greater or equal
to.
Click on the second Generic date field and change its Main label to Date To and change its Comparator to Less or equal
to. Finally add a Submit button and change the Text to Search, make sure you also select the option to Show reset button.

MatsSoft Ltd. 2017 4 of 8

Once configured, Save the Page.

The Reports Page is now complete.

The next Page to add within the Management Information Top Tab is a map to display customers by location.
When creating the Reports Page previously, a Viewport was created under the Management Information Top Tab. This same Viewport
will also be used to house the Sub Tab and Page required in order to display customers by location.

Edit the Reports Viewport. Edit the Map Sub tab has which has already been created.

Add a new Page titled Map.

As with the Page created previously, in this example a single Page is being created. Therefore, best practice is to ensure the
Visible option is left to its default setting of Disabled to prevent the Page name being displayed below the Sub Tab name (as they
are both the same).

Once the new Page has been Saved, click Edit.

This Page will be configured to display a map which will plot customers by location. To do this, ensure the Base Object of TSG
Helpdesk Call is selected from the Widget drop-down list on the right of the screen and double-click or drag and drop a Map
Widget into the Page.

MatsSoft Ltd. 2017 5 of 8

The Widget can now be configured to display customers by their location. Click the pencil icon to view the Settings option and
scroll down to the Layers section.

Visualization: Selects how the data is shown on the map, in this example via a coloured marker
Location Field: Which Property field is to be displayed on the Widget. In this example, the Customer Object is
selected followed by the Postcode field
Label Field: Select the Property that is to be used as a label on the map, in this example the marker will display the
Case Reference Number when it is clicked on by the user
Constraint Subset: Places a restriction on being able to view records on the map if they are inside the specified
Subset
Destination Page: Defines what happens when a user clicks on a record displayed in the map. In this example it
has been set as the View Case Page.

Click Save once complete. The Map Page is now finished.

The final Page to add within the Management Information Top Tab is a Widget to display the overall helpdesk process and
some key data about it.

Edit the Reports Viewport.

MatsSoft Ltd. 2017 6 of 8

The Process Sub tab has already been created (when creating the Reports Page), Edit this Sub tab

Add a new Page titled Process.

As with the Page created previously, in this example a single Page is being created. Therefore, best practice is to ensure the
Visible option is left to its default setting of Disabled to prevent the Page name being displayed below the Sub Tab name (as they
are both the same).

Once the new Page has been Saved, click Edit.

This Page will be configured to display the overall TSG Helpdesk process. To do this, ensure the Base Object of TSG Helpdesk
Call is selected from the Widget drop-down list on the right of the screen and double-click or drag and drop a Process Analysis
Widget into the Page.

There is no further configuration required within this Widget (apart from giving it a title).
When viewing it as an end user, the Widget will display data related to the overall process and all cases that have travelled
through it. The Widget can be filtered to view various configurations including the percentage of cases that have completed a
stage and the average duration taken to complete stages in the process.

MatsSoft Ltd. 2017 7 of 8

MatsSoft Ltd. 2017 8 of 8