Certified Professional Programme

Builder Essentials User Guide

Module 4: An Introduction to the

MATS User Interface
Building a User Interface
With the Process Map, Data Objects and Properties now defined in the back-end of the application, it is now time to take a look
at creating the User Interface.

The Interface section of MATS allows an application builder to construct the visual components that an end-user will get to see
or interact with (also known as a User Interface or UI). This is done in a layer-by-layer approach alongside an intuitive drag-
and-drop Page creation tool.

An Interface is required in order to allow an end user to input and/or manipulate data as simply and as quickly as possible. This
makes the Interface one of the most important aspects to get right, as this is the part the end-user will be using all the time.

Step 1: Understanding Widgets, Elements and Fields in MATS

Before you begin to build a Page, it is essential to fully understand the building blocks that are available to you, and how they
work together to create the visual elements and functionality of your application.
Widgets

A Widget is a pre-defined function that can be dragged onto a Page and dropped into a cell. Widget functionality includes the
ability to add or edit data, list data on the Page, show reporting charts, show process charts and much more.
Note: Each Widget requires a minimum cell width to be able to fit on a Page, this minimum width is denoted by the fraction
shown next to the Widget title (in the screenshot above, most of the Widgets shown require a minimum of one cell or a third of
the Page to be displayed).
Elements

An Element can be added to a Widget in order to execute a system-defined action (such as Submit a Page or Delete a record
for example).
The Elements available are:
Heading 3 - Turns the text into a larger, coloured font, with a border that sits above the text
Heading 4 - Increases the text to the same size as Heading 3, but does not add any colouring or a border.
Heading 4, Collapsing - Add this to the top of your Widget and then any Properties/ Attributes/Composites etc. added below it
will automatically be hidden. The fields will be revealed when an end user clicks on the heading, revealing the fields you placed
below. Clicking on the header again will collapse the fields, hiding them from view once again.
Submit - This will allow a user to submit or save a record.
Download Link - Allows you to download any File Types you have set up for Export.
Internal Link - Used to enable the user to link to an internal Page within this application.
Action Link - This element allows you to perform a specific action upon selecting it (such as to Delete a record, trigger an
Event etc.)

MatsSoft Ltd. 2017 2 of 12

Subset Link - Used to display details of records belonging to a Subset
Webpage Link Used to link to standalone Pages created as either a Webpage (Public) or a Webpage
(Authenticated). These are web pages that can be viewed outside of the applications main Interface and they are created using
Widgets like any normal Page.
Pop-up Link Allows for the visibility of a pop-up Page without leaving the current Navigation structure.
Horizontal Line - Creates a thin grey horizontal bar that stretches across the width of your current Widget. Useful for creating
divides between different fields.
Fixed Text - Creates a row of format-able text that you can display inside your Widget. This offers a lot more customisation
options (compared to the Heading Elements).
Blank Space - This is an Element that is used for styling a Page and simply inserts a blank row into the Widget. The height of
this blank space can be defined from within its settings.
Fields

These are the fields added to Widgets (including all created Properties, Attributes and Composites for example), that the end
user will interact with inside your application. Each field will have its own individual settings that can be customised to define
how it handles the data being input/displayed.

As there are a lot of settings for each individual Field, we recommend that you refer back to our online help portal (available
from within Build via the help link in the top right-hand corner of each Page) for the specifics on each Field (or click on a
setting label directly for the help text for that setting to appear on-screen).

Step 2: Creating the Interface, Top Tabs, Viewports, Sub Tabs & Pages
Creating the Interface
The Interface is the part of the application that end users will have the most exposure to, so it is important to make it as easy
and intuitive to use as possible.

Different Interfaces can be created and configured for different audiences, each with their own Navigation, Target Device, URL
and Theme.

To edit an existing Interface, click on the Edit icon on the same row of the Interface you wish to edit. To add a new Interface,
click on + Add Interface.

The following fields are displayed in the Basics tab when creating or editing an Interface:
Name - The internal name given to the User Interface (not displayed publically).
Application Title - The text that will appear visible to end users in the top left hand side of the screen.
Address - The web address that is exclusive to this particular Interface. Keep it short and note that special characters are not
permitted.
Target Device Select if the Interface is to be Desktop or Mobile orientated.
Theme The default theme will already be set, but if any additional themes have beencreated, they will be selectable in this
drop-down menu.

MatsSoft Ltd. 2017 3 of 12

With the Interface settings defined, the Navigation hierarchy can now be constructed. The MATS Interface is spilt
into the following hierarchical elements:

Top Tabs
Viewport
sSub Tabs
Pages

Each Top Tab must have a Viewport, each Viewport must have at least one Sub Tab, and each Sub Tab must have at least
one Page within it.
Creating Top Tabs
Top Tabs can either be created from within the Interface menu or via the Top Tab sub Page. In the example below, the Top
Tabs have been created from within the Interface menu. Note that the Top Tab will not be displayed until the levels of the
hierarchy have been created within it.

Creating Viewports
A Viewport contains a collection of Sub Tabs. Unlike a Top Tab, a Viewport is not visible (in the regular sense) by an end user,
but you can have multiple Viewports in a single Top Tab. This would be useful in the context of wanting to break up the
functions of searching and displaying cases as an example.

The Viewport Basics Tab

Name - The name given to the Viewport (not visible by end users)

Display Name - Allows you to display static text or dynamically display data related to a
particular record (such as a case ID or customers name) in the Viewport itself

Base Object - Define if the Viewport is to have its own Base Object or not (this will make
the 3 fields below it appear if chosen)

o Edit Locking Level - Control who can lock the Viewport (preventing others
from editing any records currently being viewed by someone else at the same
time, in the same Viewport)

o Right Drop-Down Sub Page - Creates a drop-down menu in the top-right

MatsSoft Ltd. 2017 4 of 12

 corner of the screen that usually contains a series of action links or other similar
Elements

o Nuggets Sub Page - Allows you to display a pre-defined Nugget Widget in the
top-right corner of the Viewport that can be configured to show dynamic, record-
related data in a static place on the screen (such as Customer Name, Case
State, Case Stage Buttons etc.)

Target Device - This defaults to the Target Device selected for the Interface this Viewport
is being added to

Display Sub Tab Navigation - Will show any created Sub Tabs on the Viewport Page.
Leave this option unticked if only one Sub Tab is created within the Viewport in order to
prevent the Interface hierarchy looking cluttered

Display back button When ticked, a back button will be displayed at the top left side of
the Viewport

Creating Sub Tabs

Sub Tabs are created within a Viewport and are used to display either single or multiple Pages.

The Sub Tab Basics Tab

Name The name given to the Sub Tab

Nav Display Name - The name that will be displayed to end-users on screen

Base Object - Only choose a Base Object if you wish to display the results for a single
record in an Object (this will make the two fields below it appear if chosen)

Visibility Subset - If this is set, then the record has to be in the Subset selected for the
Sub Tab to be shown

Badge Count Will display a number next to the Sub Tab display name based upon the
number of records that relate to it from a chosen Data Object (e.g. if the Documents Object
is selected, the number of documents associated to the case will be displayed as a

MatsSoft Ltd. 2017 5 of 12

 number next to the Sub Tab display name)

Target Device - This defaults to the Target Device selected for the Interface this Sub Tab
is being added to

Display Page Navigation - Will show any Pages created on this Sub Tab. Leave this
option un-ticked if only one Page is created within the Sub Tab in order to prevent the
Interface hierarchy looking cluttered.

User Visibility Subset - If a Subset has been created to prevent (or allow) a particular
User Role access to this particular Sub Tab, then you can choose it from this drop-down
menu
User Visibility Relationship - To restrict the visibility of a Widget at a User level, you
must add a relationship path to the required User Object. This must end with the relevant
Base Object of the Widget. The Widget will no longer be available to any logged-in user
that is of that Object but does not have a relationship to that record

Creating Pages
The Page level of the Interface is the area that end users will spend the majority of their time interacting with, it is therefore
advisable to spend time to plan in advance what the Page actually needs to do.

The Page Basics Tab

Name - The name given to the Page

Nav Display Name The name that will be displayed to end users on-screen

Title - The title is an optional heading for the Page and is displayed above all content at
the top of the Page itself

Base Object A specific base Object should only be selected on a Page when the Page
being constructed is entirely about a single record of that type of Object. For example, if
the Page being created was specific to a user (i.e. all the information on the Page relates
only to that user) then the base Object of 'User' should be selected. If the Page was being
created to view information about a specific case then the case Object should be selected
as the base Object

Auto Create Record Only shown if a Base Object has been specified on the Page.
Once ticked, if an end-user lands on this Page without specifying which record to view/edit
in the Page, a new record will automatically be created and that newly created record will
be displayed in the Page

Target Device - This defaults to the Target Device selected for the Interface this Sub Tab

MatsSoft Ltd. 2017 6 of 12

 is being added to

Utilisation This is used to select the type of Page to be created e.g. Sub Page, Pop up
Page, Webpage etc.

Visibility Subset - A Page can be hidden from Navigation if the record is not in a specified
Subset (as long as a Base Object has been selected for that Page)

User Visibility Subset - If a Subset has been created to prevent (or allow) a particular
User Role access to this particular Page, then you can choose it from this drop-down
menu

MatsSoft Ltd. 2017 7 of 12

Creating the Create New Case Page

The first Page to add to the platform is the Create New Case Page. This will give end-users the ability to add a new helpdesk
call to the system and will utilise the Property fields (that we created earlier).

Step 3: Create the Top Tabs

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

Click on the Interface to be worked on (the platform is set up with a default Interface, but new Interfaces can be easily created by
clicking Add Interface).

The Top Tabs section will display any Top Tabs present on the Interface (the Admin Top Tab is present by default) and allow
for the creation of new Top Tabs.

Click Add New to create four new top tabs: My Page, Create New Case, Queues, Reports. Once saved, click the Edit link to
access the Create New Case Top Tab.

Step 4: Create the Viewport

A Viewport now needs to be added. This will allow for the addition of Sub Tabs, and subsequently, Pages that will be visible
to end users.

Click Add New to create the Viewport (it is best practice to use the same name as the Top Tab that the Viewport sits within). Once
you have created the Viewport, set it as the default, click Save and then Edit to add Sub Tabs.

Step 5: Create the Sub Tab

Click Add New and create a Sub Tab with the same name.

Note: As only one Sub Tab is being created within this Viewport, it is best practice to leave the Show on Nav option as
Disabled. Doing so will prevent the duplication of the Sub Tab name below the Top Tab name (as they are the same). If there
are multiple Sub Tabs to be displayed within a Viewport, this option can be amended so that the Sub Tab names are shown by
ticking the Display Sub Tab Navigation from the Basics section of this page.

MatsSoft Ltd. 2017 8 of 12

Once the Sub Tab is created, click Edit to add a Page.

Step 6: Create the Page

Click Add New to create a new Page. In this example the Page is being created with the same name as the Sub Tab.

As with the Sub Tab created above, in this example only a single Page is being created. Therefore, best practice is to leave
the Visible setting to its default of Disabled to prevent the duplication of the Page name below the Sub Tab name (as they are both
the same). If multiple pages need to be displayed below a Sub Tab, ensure the Display Page Navigation option is checked within the
Basics section of the page.

Once the new Page has been saved, click Edit.

Now that the Page has been created, functionality needs to be added in order for it to be useful to end users. This functionality
is added to the Page via Widgets that are visible on the right-hand side of the screen.

The first step in building the Page is to create the ability for a user to be able to add a new case to the system. This will involve
the user adding information onto the Page; information relating to the case itself (which is held within the TSG Helpdesk Call
case object) and information relating to the person making the call (held within the TSG Customer Object).

First, we need to select which object the widget is going to be based on, in this case the primary object will be TSG Helpdesk
Call (as this is the Case object type).The Widget object can be selected from the drop-down menu on the right-hand side of the
screen.

MatsSoft Ltd. 2017 9 of 12

Once the object has been selected, the different types of available widgets will be listed underneath, double-click or drag and
drop a Form Widget into the empty Widget space.

From the Settings tab, you can re-title the widget to Please Enter Call Details.

With the Form Widget now added to the Page, the fields for users to be able to record information relating to the case and
customer can now be added.

To do this, click the Fields tab on the right-hand side of the Page. As this Widget is part of the TSG Helpdesk Call set as its
Base Object, a list of the Properties created within that Object are visible.

These Properties can now be dragged and dropped (or double-clicked) in order to be added to the highlighted Widget as
required.

This Form Widget will also need to be configured so that the user can add details relating to the customer that has logged the
case;

In order to do this, the properties created in the Customer Object need to be added into the Widget. Clicking on the downward
arrow, next to the Object drop-down field, allows the Navigation to any other Objects the Base Object (TSG Helpdesk call) has
a relationship with, in this case the Customer Object.

MatsSoft Ltd. 2017 10 of 12

With the Customer Object selected, the Properties created within that Object are now visible and can be added to the Widget.

Once the relevant Properties have been added, and the Widget has been given a title, click Save.

In order for the end-user to be able to save the data they have added to the page, a Submit button needs to be added to this
Widget. This will allow the user to upload any data added to the fields in the Widgets to the respective objects within the platform;

Ensure the Widget you want to insert the Submit button into is selected/highlighted (it should have a blue border around it) and
then click on the Submit icon within the Elements tab to drop it into the highlighted Widget.

MatsSoft Ltd. 2017 11 of 12

You may wish to rename the Submit button to something that is more descriptive to your users; click on the button that has
been placed into the Widget and free type the new name into the Text field within the Settings tab.

Clicking Save will confirm your changes and completes the Page.

MatsSoft Ltd. 2017 12 of 12