Creating Pages in MATS part 2: Creating the View Case,

Edit Case & Case Documents & Notes Pages

Required Assignment
Now that youve completed the Creating Pages in MATS part 2 module, its
time to put the theory into practice within your own MATS build.

Within the MATS training environment given to you at the start of this
Builder Essentials learning plan, complete the steps shown on the following
pages to duplicate the functionality covered during this module.

Once youve added these steps to your own MATS build, revisit this
Required Assignment and confirm your completion on the final page.

This Required Assignment will task you with creating a series of new pages
to allow end users to view a case and progress it through the Helpdesk
process, edit a case if any details about it changes and also add documents
and notes to it if needed.

Step 1: Create the Viewport and Subtabs

From the Build tab, access the Interface Subtab and open the TSG
Helpdesk interface

Edit the List of Cases Top Tab

Create a new Viewport within this Top Tab titled View Specific Case

Edit this Viewport and create 3 new Subtabs titled View Case, Edit
Case and Case Documents & Notes

Ensure that the Show on Nav option is enabled within the Basics tab
of the Viewport

Ensure that the option to display a back button is enabled within the
Basics tab of the Viewport

Save the Viewport

Page 1 of 5



Step 2: Create and configure the View Case Page

Create the Page:

Edit the View Case Subtab and create a new Page, also titled View
Case. Edit this Page

Configure the Page:

Add a Base Object of the TSG Helpdesk Issue within the Basics tab of
the page
Save the Page and navigate back to the Layout tab. Split the widget
cell on the page into thirds

**** Ensure that the Page object of TSG Helpdesk Issue is selected in the
relationship drop down menu on the right of the page before adding any of
the following widgets onto the page ****

Add 3 Nuggets Widgets along the top of the page and configure
them to display the following:
Nugget 1 - Case Reference number & Customer name Composite
Nugget 2 - 2 End to End Timer fields. The first renamed as Total
Duration and its Presentation set as Duration. The
second renamed as Performance against Target, its
Presentation set as Difference and the 2 day target
selected in the Target field
Nugget 3 - Date Issue occurred and Current Activity

Add another row of widget cells below and split it in half

Add an Information widget, titled Case and Customer details, to the

left hand widget space. Configure the list to display the following
fields
Description of problem
Source of contact
Customer address
Customer postcode
Customer email address
Customer mobile

Add a Case Stage List & Advance widget to the right hand side
widget space. Title it as Case Progress

Add another row of widget cells below, ensure it is 1 cell in width

Add a Case Process Diagram widget, title it as TSG Helpdesk Process

and set it to start as collapsed

Save the page

Page 2 of 5



Step 3: Create and configure the Edit Case Page

Create the Page:

Edit the Edit Case Subtab and create a new Page, also titled Edit
Case. Edit this Page

Configure the Page:

Add a Base Object of the TSG Helpdesk Issue within the Basics tab of
the page
Save the Page and navigate back to the Layout tab. Split the widget
cell on the page in half

**** Ensure that the Page object of TSG Helpdesk Issue is selected in the
relationship drop down menu on the right of the page before adding any of
the following widgets onto the page ****

Add a Form widget, titled Case and Customer details displaying the
following fields:
Description of problem
Date Issue occurred
Source of contact
All of the Customer object properties

Add a Submit button, rename it as Save Changes, along with a Reset

button

Add another Form widget, title it as Assign Case

Add a Relation selector field based on the User Object to it

Rename this Relation selector as Helpdesk Agent

Add a Submit button, rename it as Assign Case along with a Reset

button to the widget

Save the page

Page 3 of 5



Step 4: Create and configure the Case Documents & Notes Page

Create the Page:

Edit the Case Documents & Notes Subtab and create a new Page,
also titled Case Documents & Notes, below it. Edit this Page

Configure the Page:

Add a Base Object of the TSG Helpdesk Issue within the Basics tab of
the page
Save the Page and navigate back to the Layout tab. Split the widget
cell on the page into 2 thirds / 1 third

**** Ensure that the Page object of TSG Helpdesk Issue is selected in the
relationship drop down menu on the right of the page before adding any of
the following widgets onto the page ****

Add a List widget, based on the Documents Object relationship, to

the 2 thirds sized widget cell and title it as Case Documents

Add the Case Documents property to it along with the system

generated Attribute of Date created

Add a Form widget, based on the related Documents Object, to the 1

third sized widget cell

Within the settings of the widget, title it as Add Case Documents and
untick the Redirect with Saved Record ID option

Add the Case Documents property to it along with a Submit button.

Rename the Submit button as Upload Document and add a reset
button as well

Add another row of Widget cells below and split it into 2 thirds / 1
third

Add a List widget, based on the Notes Object relationship, to the 2

thirds sized widget cell and title it as Case Notes

Add the Case Notes property to it along with the system generated
Attribute of Date created

Add a Form widget, based on the related Notes Object, to the 1 third
sized widget cell.

Within the settings of the widget, title it as Add Case Notes and
untick the Redirect with Saved Record ID option

Page 4 of 5



Add the Case Note property to it along with a Submit button.

Rename the Submit button as Upload Note and add a reset button

Save the page

Step 5: Add a hyperlink to these pages from the List of Cases Page

Access the Build view of the List of Cases page.

Select the Case Reference number field displayed within the List
widget

Configure the Link Field to a Specific Page

The Navigation Hierarchy to the Page is:

Interface: TSG Helpdesk Interface
Top Tab: List of Cases
Viewport: View Specific Case
Subtab: View Case
Page: View Case

Save the Page

Access the List of Cases page as an end user and open a case in the
list to check if the hyperlink and pages just created work

Once youve added all the steps described within this Required Assignment
to your own MATS build, revisit the Assignment within the MATS Learning
Portal and confirm your completion by clicking the confirmation button on
the final page. This will mark this Required Assignment as complete within
the MATS Builder Essentials Learning Plan.

Page 5 of 5