Creating Dashboards and Components

Size: px

Start display at page:

Download "Creating Dashboards and Components"

Heather Norris
5 years ago
Views:

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. 1

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. 2

- 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.

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: Drag Fields from the Field section into the grid and the Form design is displayed below. Figure 4 Start to build your Dashboard. Figure 5 Dashboard selection columns. 3

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. 4

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. 5

6 Examples of Process Dashboards: 6

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.

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

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. 7

Figure 13 Dashboards named WebGuest will appear

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. 8

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 9

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> 10

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

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

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: 11

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.

A sidebar that sites to the left of the Dashboard and is responsive to the role of the login.

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 Nav:Dashboard Nav:Dashboard_<Role> <Role> can be any of the SupportDesk roles ( Supervisor, Support, Analyst etc Use/Context A sidebar that sits to the left of the Dashboard. See Fig 17. A sidebar that sites to the left of the Dashboard and is responsive to the role of the login. Nav:Summary Nav:Summary(n) Nav:Summary_<Role> Nav:Summary_<Role>(n) A sidebar that sits to the left of the call summary screen just for the default folder(0). A sidebar that sits to the left of the call summary screen for folder number (n). 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.. 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 12

A Dreamweaver Tutorial. Contents Page

A Dreamweaver Tutorial. Contents Page A Dreamweaver Tutorial Contents Page Page 1-2 Things to do and know before we start Page 3-4 - Setting up the website Page 5 How to save your web pages Page 6 - Opening an existing web page Page 7 - Creating