1

Creating Dashboards and Components ** The Guide shows SupportDesk with 2018 Styling in place.

Dashboard Forms provide the functionality for you to alter “landing” screen for SupportDesk users, whether

Service Desk Agents that are logging calls or WebGuests (Customers/End Users). This means that, upon logging in,

each user could have a unique screen that has been associated with their login record. (This functionality is only

available on the web). Dashboards can also be associated to roles

Figure 1 Example of a Dashboard (Supervisor login).

Benefits. SupportDesk is a very flexible tool that allows individual users to have their own view upon logging in to the

Service Desk, and can be a good way of creating personalised dashboards for you Customers, including adding

company logos, colours and text.

Requirements.

To make use of this feature you must have the House Forms module and SupportDesk web application.

2

Form Creation.

All work on Dashboard Forms must be carried out through the web UI. Prior to creating the physical form there

should be some planning to decide how the Dashboard should look and function and who is going to see the

Dashboard upon logging in. It is also a good idea to familiarise yourself with the privilege rights of Login types

(from Supervisor to WebGuest), so that you can identify what users will be able to do and see.

The Dashboard Designer is accessed by Supervisors via the Settings Cog > Forms, then Form Type “Dashboard”. If

Dashboards have already been created, they will appear in a list and can be edited by clicking into the record. To

create a new Dashboard, click the “+” icon and the drag and drop screen will appear:

Figure 2 List of existing Dashboard Forms.

Figure 3 The Drag and Drop Dashboard designer.

In order to begin building a new Dashboard, make selections from the right hand side of the screen, and drag the

selection across to the table on the left. The right-hand list is split into 2 columns: Reports and Components.

- The Reports column shows all the public reports that exist in the QuickReport Designer. If a new report is

required in this column, this must first be created in the QuicReport Designer.

3

- The Components column refers to buttons and widgets that have been created using html and saved as

Component Forms. Creating Component forms is covered later in this guide.

Drag items from the right-hand columns.

Enter the Dashboard name in the Name field, then begin to drag the Reports and Components across to the left

hand table. A preview of the Dashboard will appear at the bottom of the screen as you drag selections across:

Figure 4 Start to build your Dashboard.

Figure 5 Dashboard selection columns.

Drag Fields from the

Field section into the

grid and the Form

design is displayed

below.

4

Click Save to save the form as you create. Click OK to save and exit the designer.

Figure 6 Dashboard Designer function buttons.

Additional Tabs

The Details Tab of the Form allows entry of a Form Description:

Figure 7 Details tab.

The Styles Tab allows direct editing of the html Styles controlling the look of the Dashboard Form. After editing or

adding new style information the user must select “Refresh” to see the working Dashboard. This is where the

Dashboard can be edited to reflect any corporate styling that may be in place such as colours or font. The Rows

and Columns fields enable for the resizing of the available area of the table in which to drag reports and

components to:

Figure 8 Styles tab.

5

Activating Dashboard Forms.

At Folder Level.

Once Dashboard forms have been created there are different ways to make use of them. SupportDesk offers the

functionality to set Default Dashboards on individual Folders. This means that, when a Folder is accessed by a

service desk Agent, a completely unique Dashboard can be displayed i.e. an Incident Dashboard, and then when

another Folder is accessed, i.e. Problem, this will then generate the default dashboard for that Folder. This is

extremely useful for managers of multiple processes, or of multiple business areas, as it enables detailed, but

separate dashboards for each process to be displayed by simply selecting from the Folder dropdown:

Figure 9 Individual Process Dashboards can be accessed from the Folder list.

In order to set a default Dashboard for each folder, Supervisors can access Settings > Folders and pick the

required process (e.g. Incident Management). Then, in the Framework section of the Folder Details screen, select

the Dashboard from the Default Dashboard dropdown:

Figure 10 Setting the default Dashboard on a Folder.

6

Examples of Process Dashboards:

7

Activating Dashboards at Individual Login Level.

Users can view their own unique Dashboard upon logging in. Supervisors can set this by going to Settings >

Logins, and finding the required login. Here, on the Details tab, the Dashboard can be selected and set from the

Dashboard dropdown:

Figure 11 Setting the default Dashboard on a Login.

At Privilege Level.

SupportDesk automatically recognises which Dashboard to display to a user when they have logged in, based on

their privilege level. This is done simply by naming the Dashboard with the same term as the privilege. For

example, if there is a universal Dashboard to be used for all Analyst logins, the Dashboard form named Analyst

will automatically display for all Analysts logging in (unless there is a Default Dashboard set against an individual’s

Login). The Dashboard can be edited from the Drag and Drop Designer and will update the Dashboard for all

Analysts.

8

Figure 12 Naming Dashboards based on privilege.

This functionality is also applicable for WebGuests:

Figure 13 Dashboards named WebGuest will appear automatically for Customers logging in via the Self Service Portal.

9

Creating Component Forms for use on Dashboards.

Components can be created to be used on the Dashboard, and once created will appear in the right-hand column

list on the Drag and Drop designer. These can generate specific call forms, QuickCalls, Views, Reports etc.

Numerous Components are shipped as standard with SupportDesk, such as specific buttons. It is possible to edit

these using html, or new Components can be created from scratch. Supervisors can create new Components by

accessing the Settings Cog > Forms & Dashboards, and selecting Component from the Form Type dropdown:

Figure 14 Select Component from the Form Type dropdown

Then click the green New Form button. Enter a name for the component, and the enter the html in the large field

on the Form tab:

Figure 15 Adding a New Component Form

10

The code shown below is one example of a single button that has been built to summon a QuickCall named

“Quick Call 1” when clicked. Wording has been left generic in this example:

<a class="view-button blue" href='[System:Action]QC&QC=QC000001'>New Thing<span>+</span></a><style>

body .right-panel .view-button.blue{

background: lightblue;

border:0 solid #aaa;

border-radius: 5px;

box-shadow:inset 0px 0px white;

float: left;

text-align: center;

text-decoration: none;

line-height: 40px;

padding: 10px;

font-size: 16px;

color:#3a3a3a;

-webkit-transition: 0.2s ease-out;

-moz-transition: 0.2s ease-out;

-o-transition: 0.2s ease-out;

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */

-moz-box-sizing: border-box; /* Firefox, other Gecko */

box-sizing: border-box; /* Opera/IE 8+ */

opacity: 1;

height:100px;

width:100%;

}

.view-button:hover span{

opacity: 0.8;

}

.view-button.green span{

width: 100%;

float: left;

font-size: 50px;

font-weight: bold;

color:white;

}

</style>

11

Pasting this code into the large field on the Form tab will result in the following button to appear in the preview

pane when Refresh or Save are selected:

Figure 16 Entering html to build the Component.

Save the button design, then on the Details tab, ensure that the Component (Make this form available for use in

the Form Designer) tick box is selected and saved. This will ensure that the button appears in the Component

column on the drag and drop dashboard designer:

Figure 17 Select tick box to make Component available in the Drag and Drop designer.

An overview video on creating creating Dashboards with the Drag and Drop designer can be viewed here:

http://houseonthehill.com/wp-content/themes/hoth/videos/Dashboard%20Designer.swf

12

Special Forms used within Dashboards.

There are certain forms that have hard coded behaviour that is determined by their name. These are listed below

with an explanation of the naming convention.

Form Name Use/Context

Nav:Dashboard A sidebar that sits to the left of the

Dashboard. See Fig 17.

Nav:Dashboard_<Role>

<Role> can be any of the SupportDesk roles (

Supervisor, Support, Analyst etc…

A sidebar that sites to the left of the

Dashboard and is responsive to the role of the

login.

Nav:Summary A sidebar that sits to the left of the call

summary screen just for the default folder(0).

Nav:Summary(n) A sidebar that sits to the left of the call

summary screen for folder number (n).

Nav:Summary_<Role> A sidebar that sits to the left of the call

summary screen just for the default folder and

is responsive to the role of the login..

Nav:Summary_<Role>(n) A sidebar that sits to the left of the call

summary screen for folder number (n) and is

responsive to the role of the login..

Nav:Dashboard Form in situ.. Nav:Summary form in situ