Dashboard Configuration and User Learning Guide

The guide is intended as a learning resource.

About the Guide

This guide is structured so that you get the most out of your learning experience. The concepts are normally delivered by an instructor either by discussion or demonstration. Here, you will be following it on your own, and as such, should seek the guidance of Alemba Professional Services where possible.

As the data is subject to change, any statistical information in screen examples may differ from your installation.

Welcome

  • Creating a Dashboard

  • Creating different types of widgets within a Dashboard

  • Manipulating the Data displayed to show different statistical information

  • Linking dashboards, so that you can click from one dashboard to another dashboard

Prerequisites

The following prerequisites are needed:

  1. Dashboard Users created in Syncfusion Server for the training

  2. A read only SQL account for the ASM database or an ASM API account (General Access Role in ASM needs ‘API Explorer’ rights).

  3. Customer logo on the desktop / on a web site

  4. Make sure each attendee can login to the dashboard server, create a dashboard and create a SQL data source.

Using the Syncfusion Dashboard Server Designer

This section will give you some guidance to how to launch the Dashboard Designer from within ASM and an overview of the main areas of the screen.

  1. Launch the Syncfusion Dashboard Server, from the Dashboards menu item within ASM, or click the Dashboard Server wrapper icon.

  2. Enter your provided Dashboard Login details and click Login to log into the Dashboard Server

  1. Select the + button in the top right corner of the screen and select Create Dashboard

  1. The Dashboard Designer screen is displayed, containing the following elements:

  • Dashboard Config Panel

    These buttons are used for the main activities like Save, Cut, Copy, Paste, Delete a widget, Filters and Refreshing the dashboard

  • Widget Palette

    The Toolbox Pane consists of data visualizations, filters and miscellaneous widgets which you can use to design an interactive dashboard. Drag the desired widget onto the Design Area and resizing it using the usual marquee points.

  • Workspace area

    This is a 12 by 6 grid view where Widgets can be dragged from the Toolbox Pane. Widgets can then be positioned and re-sized to design the Dashboard page. The Dashboard Design view shows a responsive web page view and is used to display the widgets proportionally on a monitor, large screen or mobile device.

  • Preview/Live

    This button will launch the Dashboard in a browser so the dashboard can be tested in real time, and if configured will allow you to preview a dashboard using another users permissions/roles.

  • Widget/Dashboard Properties

    This pane will display relevant options for the selected widget in the Design View, allowing you to give the widget a name, assign data (from a configured Data Source) and present widget options.

  • Data Sources

    This Container allows you to add, modify or remove Data Sources which can then be used to display the data within the many Chart or Filter Widgets. Typically, you will connect to the ASM Database using either a SQL Server Connection, the Web API or the Alemba API.

Part 1 - Creating a Dashboard

This exercise will produce the following Dashboard:

  1. Launch the Syncfusion Dashboard Server, from the Dashboards menu item within ASM, or click the Dashboard Server wrapper icon.

  2. Enter your provided Dashboard Login details and click Login to log into the Dashboard Server

  1. Select the + button in the top right corner of the screen and select Create Dashboard. The dashboard workspace area will then display.

Select Microsoft SQL

  1. Complete the details, as follows:

Name

Team Calls

Server Name

<ServerName>

Authentication Type

SQL Server Authentication

User name

SQL DB UserID

Password

SQL DB PW

Database

ASM Database Name

  1. Press Connect to establish a connection to the Database.

  2. The Data Source Design View is displayed:

  1. Create a virtual table showing all open calls, as follows:

  • In the left hand pane, expand the dbo, then expand Views and locate RV_CALL.

  • Click and drag it into the work area to create a virtual table.

  • The Data Preview section, beneath the work area will show the first 100 rows in the data source.

  • To filter the calls to display only open ones, click on the filter icon in the Dashboard Config Menu.

  • Click the + Add button in the top right of the window to add a new filter.

  • Complete the details as shown below to display Call_Open_Flag Equals 1, then click OK.

  • Click the Save button in the top right corner of the screen, to save the Data Source details. You will be returned the workspace area.

Add a logo to the workspace area, as follows:

  1. Scroll to the bottom of the Widget Palette on the left-hand side and expand the Miscellaneous group if necessary.

  2. Click and drag the Image widget onto the top left hand corner of the workspace area.

  3. Drag the edges to create a 2x2 square in the top left hand corner.

  4. Click the cog icon in the top right corner of the image widget. This will display the Properties for the Widget on the right pane.

  1. Populate the properties as follows

Name

Logo

Mode

Uniform

Browse Image

Browse for a logo you can use

Note: to use the ASM logo, you can use the following url:

http://<server>/<ASM System>/logo.png

Add a label to the "Global Team Workload", as follows:

  1. Select the Label widget from the Miscellaneous group in the Widget Palette.

  2. Click and drag it to the top row beside the logo.

  3. Drag the edges to create an 4x1 widget.

  4. Click the icon in the top right corner of the Label widget. This will display the Properties pane, click in the label widget to display a cursor, prompting for Text entry.

  5. Enter “Global Team Workload” into the widget. Change the properties for a larger font size and center Text horizontal alignment.

  6. Add a Description beneath the label, as follows:

    • Select the Label widget from the Miscellaneous group in the Widget Palette.

    • Click and drag it to the row beside the label.

    • Drag the edges to create an 4x1 widget.

    • Click the cog icon in the top right corner of the Label widget.

    • Enter “This dashboard provides real time data of the Calls, Requests and Tasks owned by each Team in the Service Desk”. Change the properties for center Text horizontal alignment and adequate font size.

Add a “Total Open Calls” widget, as follows:

  1. Select the Card widget from the Deviation group in the Widget Palette.

  2. Click and drag it to the top row beside the label.

  3. Drag the edges to create a 2x2 widget.

  4. Click the cog icon in the top right corner of the Card widget. This will display the Properties for the widget, with 2 tabs: Properties and Assign Data. The Properties tab will be selected by default (in blue text and underlined by a blue line)

  5. Select the Assign Data tab

  6. Locate Call_No in the Measures section.

  7. Click and drag it into the Actual Value box.

It is displayed as Sum(Call_No) by default. The value of the card widget updates after assigning the data.

  1. Click on the button in the Sum(Call_No) and select Distinct Count from the drop-down menu.

  2. The value of the card widget updates.

  3. Click on the button in the Distinct Count(Call_No) and select Format.

  4. Change Decimal Places to 0 and click OK.

  5. Select the Properties tab. Under Basic Settings, change the Title to “Total Open Calls”.

  6. Under Basic Settings, change Title Alignment to Center

  7. Under Alignment, change Actual Value/Variation % to Center

Add a Stacked Column chart showing Calls by Group and IPK Status, as follows:

  1. Select the Stacked Column widget from the Comparison group in the Widget Palette.

  2. Click and drag it to the row beneath the logo.

  3. Drag the edges to create a 4x4 widget.

  4. Click on the Cog and in the Properties pane, change the Name to "Total Calls by Group and IPK Status"

  5. Select the Assign Data tab

  6. Drag Call_No from the Measures section into the Value(s) box.

It is displayed as Sum(Call_No) by default. The value of the chartwidget updates after assigning the data.

  1. Click on the button for Sum(Call_No), and select Distinct Count from the drop-down menu.

  2. Drag Call_Current_Group from the Dimensions section to the Column(s) box

  3. Drag IPK_Status from the Dimensions section to the Row box

  4. Click on the button for IPK_Status and select Filter(s) Edit from the drop-down menu.

  5. Select the List dropdown field and ensure only Incident, Problem, Major Incident, Known Error and Service Request statuses are selected. Click Apply, then click OK.

  6. Change the Current Group display order, so that it is in descending alphabetical order

  7. In the Column(s) box, click on the button for Call_Current_Group, and select Sort...

  8. In the Advanced Sorting Options window, select Sort By Alphabetic, and Sort Order Descending, and

  9. Click on Apply.

Change the legend to be more readable. Select the Properties tab:

  1. Under the Basic Settings section, click on the Customize button for Legend.

  2. Select Group, then remove ({{:Value}}) from the Display Format field, then click OK.

  3. Assign the axis properties, as follows:

    • untick Show Category Axis Title

  4. Under Basic Settings, add Counts to each column by ticking the Show Value Labels checkbox.

  5. Click on Preview in the top right hand corner of the screen to see a user view of your dashboard.

  6. Click on the x Close Preview button in the top right to close out of the preview.

  7. Save the Dashboard by clicking the button in the top left corner, and selecting Save.

  8. Select a Category, create one if required.

  9. Set the Name as “GlobalTeamWorkload”.

  10. Click Save.

Setting Dashboard Refresh Options

  1. Click on Close Preview/My Dashboards to launch the Syncfusion Dashboard Server.

  2. Click on the Global Team Workload Dashboard end Edit button.

  3. Go to the Refresh Settings menu item.

  4. In the Refresh Settings window select Enable Autorefresh on the Global Team Workload Dashboard Page.

  5. Apply, then Save the dashboard.

  6. Click on the My Dashboards button and select the Team Calls Workload Dashboard Page, then Edit, then Refresh Settings.

  7. Select the Enable Autorefresh option then Refresh Selected Widgets Only.

  8. Check all the widgets that contain gauges, grids or chart information (not the Layout Widgets or Filters) and Apply.

  9. If you wish, repeat Steps 6 to 11 for the Analyst Calls Workload, Team Requests and Team Tasks Dashboard pages.

  10. Press Apply on the Refresh Settings window to apply the settings. If you need to alter these at any time then you can return to these settings at any time by going to the Dashboard>Refresh Settings menu item.

Download a Dashboard from the Dashboard Server

  1. If you have designed a dashboard and would like to share it with another organisation, you can download the dashboard as a .sydx file and share this. To do this, open the Dashboard Server and click on the Dashboards button. Highlight a dashboard and click on the 3 dots. Choose the Download Dashboard option.

  2. To upload a dashboard, within the Dashboard Server, click on the + icon in the top right/Upload/Dashboard. Give it a name, description and browse for the .sydx file and click on Add. You may be prompted to change the datasource if the datasource cannot be found in your environment.

  3. Open up the Dashboard you have just uploaded, click on Edit/DataSource/Edit and then Edit Connection. Update the SQL connection details and preview the Dashboard.

Integrate your Dashboards into Alemba Service Manager

Once you have designed dashboards within the Dashboard Designer, you can integrate these within Alemba Service Manager (ASM), so that analysts and/or users with certain dashboard roles can view the dashboards via Core or the Self Service Portal.

The steps to go through are:

  1. Your System Administrator must set up the User Management Settings and Dashboard Server Settings within the System Administration/Dashboards section of ASM and successfully connect.

  2. The analyst you are logged in as within Core must have a Dashboard security role against their person record with Dashboards, Designer and any categories that are required. NOTE: by having Security unselected, they will have access to all dashboards in all categories. Syncfusion categories are imported as part of the System Administration/Dashboards settings and are available to assign to Dashboard Roles within ASM.

  3. To view a dashboard that you have created within ASM Core, you may need to log out after your Dashboard Security Role has been modified. Log back in and you should now see on the menu item a section called Dashboards. NOTE: You will only see dashboards that have been created under the categories your role has access to. If a category does not contain any dashboards the category will not be visible.

  4. Within the Self-Service Portal, the user you are logged in as must have a Self-Service Portal Role against their person record with Dashboards and any categories that are required. NOTE: by having Category Security unselected, they will have access to all dashboards in all categories.

Part 2 - Create a Web API Data Source

A different option to the SQL Server Database Data Source is a Web API Data Source. The main benefit of the Web API Data Source is that because it uses the Alemba API for querying the data all extension fields within ASM are automatically available. However, the downside of the Web API Data Source is that the data is held in an interim database that is refreshed periodically, the smallest interval for this refreshing of the data is every hour. This means that the data is static for at least 1 hour.

To create a web API data source

  1. Launch the Syncfusion Dashboard Server, from the Dashboards menu item within ASM, or click the Dashboard Server wrapper icon.

  2. Enter your provided Dashboard Login details and click Login to log into the Dashboard Server

  3. Select the + button in the top right corner of the screen and select Create Dashboard. The dashboard workspace area will then display.

  4. Add a Data Source, by clicking the button on the right pane. This will expand out the Data Source panel. Click the CREATE NEW button at the bottom of the panel.

  5. You will be presented with all your Data Source options. If you cannot see the Web API data source as per below, you will need to setup the intermediate data store. Otherwise, continue with step 10 from this section.

  6. Click on the settings underlined link to setup an Intermediate Data Store.

  7. Point to an existing database if a blank database has already been created for this and enter the SQL credentials. Note: It is recommended that you create a new database for the intermediate data store with an account that has dbo rights as this user will be creating tables and inserting data. The API query is used to populate a table in this intermediate database with ASM data. When you view a dashboard with this type of data source, it queries the table from this intermediate database.

  8. Click Save.

  9. You should now see all the additional connector types when adding a data source for your dashboards.

  10. Click on the Web API data source

  11. Give the data source a name (e.g. Outstanding Calls)

  12. Paste the Alemba API URL into the URL field (see the section called ‘Constructing a Web API URL using the Alemba API Explorer’ below for instruction on how to generate this URL).

An example url for open calls:

http://<server>/<system>/alemba.api/api/v1/call?$select=ActionCount,ActualLogDate,AssignedGroup.Name,AssignedToGroupChangesCount,BusinessService.Name,CallRef,CallStatus.Name&$filter=OpenStatus=1

Remember to add the following to the end of the URL: &$top=9999

This will allow up to 10,000 rows to be returned. By default, this will only be 100.

  1. Change Refresh Settings to the appropriate value – data will be cached until its refreshed according to this setting.

  2. Change the Authentication Type to Basic Http Authentication and enter the ASM credentials to connect to the Alemba API.

  3. Click Preview & Connect

  4. Untick the _self option(s)

  5. Expand results and untick any _self and / or _context checked boxes (expanding all expandable sections as they all contain a _context and _self)

  6. Click Reload to check the data

  7. Click Connect

  8. Once connected, drag the Call source from the left into the main pane.

  9. Rename fields as required by clicking on the icon

Setting up the intermediate data store

  1. Login to Syncfusion Dashboard Server as admin

  2. Select settings and Data Store:

  3. It is recommended that you create a new database for the intermediate data store.

  4. Click Save.

  5. You should now see all the additional connector types when adding a data source for your dashboards.

Constructing a Web API URL using the Alemba API Explorer (Call Entity Example)

This example creates an API URL for outstanding calls. The same principal can be used for any other query for Calls or any other Entity such as Request, Services, Organisation, Contracts, Configuration Items, etc.

  1. Open up the ASM API Explorer (http://servername/systemname/alemba.web/alemba/api-explorer).

  2. Login as someone who has rights to all areas in ASM.

  3. Click on the Call, or other Entity type and Search Action. Using Call as an example:

  4. Within the Data Explorer area, choose Outstanding Calls from the Query dropdown

  5. If there is a Partition in the top right, choose the appropriate partition and then scroll down to the Data Explorer section to remove everything in the Filter field leaving only @IsOutstanding

The Select field allows you to add any field that exists for the current entity (Calls in this case).

  • The fields available are in the Properties pane on the right-hand side of the page.

  • The Properties pane contains the field name format that you will need to add to the Select statement.

  • The Name property is the value you need to enter in the Select statement.

Linked and Non-Linked fields in the Properties Pane

  • Non-linked fields, are fields which have no drill down attributes.

  • Linked fields are fields that have links to other entities and require additional drill-down to get attributes needed.

  • When looking at the Properties pane (click to expand field details), fields which have a clickable Data Type are linked

  • When looking at the Properties pane (click to expand field details), fields which have a non-clickable Data Type are non-linked fields.

For Example:

Call Priority = Linked Call Ref = Non-Linked

Non-Linked Fields

When adding non-linked fields, you will get the value associated with that field. So non-linked fields are added as they appear in the Properties pane

e.g. add the Created Date (CreatedDate) field to the Select statement

Linked Fields

When adding linked fields, by default the ref value will appear when adding it to the Select statement.

e.g. Add the Assigned Group (AssignedGroup) field to the Select statement

Linked fields allow you to drill-down to the additional attributes available for the entity (in this case IPKGroup). To see what additional attributes are available, click on the Data Type: IPKGroup to go to that attribute and see the fields available on the Properties (right-hand pane):

Leaving the current window will reset the Select statement so please take a copy of your current Select statement.

IPK Group Entity

In this case, we need the name of the group so the Select statement will be AssignedGroup.Name

Some more examples of how Linked Fields work (Call entity):

User.EmailAddress = Email address for the User of the Call

User.Manager.Name = Full Name for the Manager of the User of the Call

Service.Title = Title for the Service of the Call

Service.User.Name = Full Name for the User of the Service of the Call

Ext_SrOtherperson.Name = Full Name for the value selected on a Person QD custom field called SR_OTHERPERSON of the Call

Ext_SrOtherperson.EmailAddress = Emailed address for the selected on a Person QD custom field called SR_OTHERPERSON of the Call

  1. Add any additional fields you would like to use in the report to the Select statement. The data preview should show data if there are no issues with the query and allows you to check the data returned meets the reporting requirements.

  2. When adding attributes of linked fields (e.g. User.Manager.Name) you may want to add a simplified heading to the field for easy reference in the dashboard. You can do this by preceding the field with the new heading separated by a colon.

For Example

ManagerName:User.Manager.Name

will provide the User’s Manager’s name in a heading that can we used in the dashboard as ManagerName.

  1. Highlight and copy the full http(s) address generated in the Actual Query section (just above the data preview)

  2. This URL can now be pasted into the Web API data source URL section

Constructing Queries in the Alemba API - Video Tutorial

Troubleshooting

Improving Dashboard Performance

1. Create views

Lots of join operations take more time. If you find yourself creating a data connection with many tables, you can create a view in the database for those joined tables. It will help to improve the performance of the dashboard. Also, it will simplify the view in dashboard designer.

2. Create initial filter

Filter data as early as possible. For example, if your dashboard shows data for a certain date range, time range, a specific set of regions etc., using initial filter at the earlier stage can help to improve the performance.

3. Remove unused columns

Reduce the number of columns in the table schema from the dashboard designer view by manually excluding the unused columns.

4. Avoid creating complex expressions

The following actions may improve dashboard performance:

  • If possible, avoid or reduce complex expressions.

  • Avoid creating filters for calculated dimensions.

5. Avoid changing datatype

Datatype change in designer reduces the performance. If possible, do datatype changes in the database itself.

6. Avoid using too many widgets

Don’t use too many widgets in one single dashboard.

7. Aggregate the raw data

If the granularity of your raw data is higher than the data you intend to display, aggregate it to the smallest granularity you need. If possible, aggregate the raw data instead of using "None" option or "Enable Data Grouping" option in dashboard.