Prerequisites: This block may need to be enabled on your site. If it is not visible in the Add a Block list simply contact the Support Team and ask for it to be enabled.
Summary: The KPI dashlet is a block that allows you to add multiple “dashlets” which each display performance and progress data about specific courses. Add the dashlets and configure them to decide where the information they're displaying comes from.
Configuring the block
With the LP KPI Dashlet block on your page start by selecting the and then selecting the Configure option in the menu.
This will reveal the following screen:
The options available are:
Block title – Here you can change the name of the block but only if you enable the checkbox below.
Override block title – Check the box to allow the block name to be changed.
Show header - Allows the name of the block to be shown.
Show border – Specify whether there is a border around the KPI block.
Dashlet Alignment - This setting will determine the alignment of the dashlets within the block. It’s set to Centre by default.
Dashlet spacing - This setting will determine the alignment of the dashlets within the block. It’s set to Centre by default.
- Dashlet Spacing: This setting can increase or reduce the space between the dashlets added to the page.
- Equal Spacing: (Default) The spacing between the dashlets will be equal.
- Fixed Spacing
Dashlet fade on hover - Adds a fade to the dashlets when a user hovers over them (disabled by default).
Caption – Add text to your button. Captions will only appear if you have chosen Button styles 2-9 on the Global settings. This is because Button style 1 does not contain any captions.
Graphics – Style and choose the icon to be used for your button or upload a new image for your button.
Audiences – An additional option that allows you to determine if individual buttons are visible to specific audiences.
Background Colour: Control the background colour of the block. You can use a hex code or open the colour picker (Default: #ffffff)
To get started you need to add a dashlet using the Add Dashlet Button.
Adding and configuring a dashlet
To get started you need to add a dashlet using the Add Dashlet button.
In the block configuration menu, you'll find these options:
- Move/Reorder: Click and hold your left mouse button on it to drag the dashlet into the order that you want.
- Edit: An option that allows you to access the editable settings of the dashlet.
- Clone: Allows you to clone the dashlet
- Delete: Allows you to delete the dashlet.
Select Edit to configure your dashlet. The right side of the screen will display the following options:
Selecting any of the headings will change the options in the right hand pane allowing to to make changes to the following elements:
Data: Choose the data that is displayed on the dashlet.
Labels: Configure the name and icon displayed on the dashlet.
Style: Change the colours and other display options of the dashlet.
Icon: Choose and configure the settings for the icon that is displayed on
the dashlet.
URL: Add a URL for the dashlet to link to.
Configuring the data settings
When you click on Data you will see the following options:
|
Data Target: Select where data should come from (courses, programmes or certifications) Data Type: Choose which status of the data target that you want to display e.g. Completed or In Progress. Content Target: Control what information is displayed within the dashlet:
Data Date Range: Control how far back the information displayed on the dashlet is taken from:
Select Data Set: Allows you to choose specific courses, programmes or certifications to be included in the report. Data font colour: A colour picker that allows you to control the dashlet. Data Font weight: Control the weight. (Normal, bold, bolder) Data font size: set the size of the font (Small, medium, large and extra large) |
Selecting Save will return you to your dashlet configuration page. You can continue editing other elements of the current dashlet before saving.
Configuring the labels settings
When you click on Labels you will see the following options:
|
The image below shows the 3 different labels that you can control on the dashlets. 'Overall completion' and the percentage is referred to as the Data Font. The two lower lables are the Primary Label and the Secondary label.
Custom Primary Label: Enabling this allows you to change the primary label. Primary Label: A free text field that allows you to change the name of the dashlet. Primary Label Font Colour: Changes the colour of the name of the dashlet. Primary label font weight: Select from normal, bold or bolder. Primary label font size: Select from small, medium, large and extra large. Secondary Label: A free text option that allows you to update/add a description to the dashlet. Secondary label font colour: Changes the colour of the secondary label Secondary label font weight: Select from normal, bold or bolder. Secondary font size: Select from small, medium, large and extra large.
|
Configuring the style settings
When you click on Style you will see the following options:
|
Dashlet Width:
Border Style:
Border radius: Allows you to control the width of the border on the dashlet (Default 1px) Border colour: Allows you to change the colour of the border on the dashlet. Background colour: Allows you to control the background colour of the dashlet. |
Configuring the icon settings
When you click on Icon you will see the following options:
|
Show Icon: This checkbox is disabled by default but when selected it opens up other options allowing you to add icons to your dashlets. Icon: An icon picker that allows you to choose the icon to be displayed on the dashlet (Disabled until the option labelled ‘Show Icon’ is enabled) Icon Colour: Choose the colour of your icon Icon Background Colour: Choose a colour for a circular background behind the icon. Any icon chosen will be placed above the other information in the dashlet. |
Configuring the URL Settings
When you click on URL you will see the following options:
|
URL Link: You can add in a URL to hyperlink to other areas on the LMS or even externally. Background Hover Colour: Choose a colour here that will be used to highlight the daslet when you hover over it. URL Open in New Tab:
|