How to Create a VisualKPI Widget

This section explains how to create a VisualKPI Widget using DataStudio. A Visual KPI Widget can be used to configure displayed objects on Visual KPI’s web interface.

Before we begin with the configuration, check that the Web API Service is installed properly and running and that the Web API Server object in the Server model is enabled. Also, Visual KPI should be already installed and configured, for instructions on how to do this please read the Installing Visual KPI Jump Start document.
To create a Widget in DataStudio, you should first have created a Visual KPI Dashboard. If you have not already done this, please follow the instructions here.

The Widget object is created in the Server Model underneath the KPI Dashboard object following the hierarchy shown below:

Configuration of the widget overview
The Visual KPI Widget will only work with versions of Visual KPI Server Manager from 5.66.4 onwards.

Create KPI Widget

After creating the hierarchy of objects we can now create the Widget Object, Right click on the Dashboard Object and select Admin  New  Widget, name the Widget and click Create.

Create Widget Object

Configuring KPI Widget

For the configuration of the Widget, in this example we will be using a series of Custom Properties that are essential for the visualization of Widgets in VisualKPI.

The table below outlines the necessary custom properties to display a KPI Block in the dashboard. Th Visual KPI Remote Context Server will read these properties and display the widget accordingly on the web interface.

Table 1. Custom Properties for the Widget
Property Name Property Value Notes

Custom Property 1



This value represents the row where the KPI will be placed in the Dashboard.

Custom Property 2



This value represents the column where the KPI will be placed in the Dashboard.

Custom Property 3



This value represents desired height of the box that contains the KPI.

Custom Property 4



This value represents the desired width of the box that contains the KPI.

Custom Property 5


KPI ID of the object in question.

Copy the KPI ID from the KPI Model of the object.

Custom Property 6


KPI Block

This property defines what type of Widget the item is. See the section below for other Widget types

The following image shows what these Custom Properties will look like in DataStudio.

Widget Custom Properties
Different Widget types have limitations on what property values can be accepted by Visual KPI. If non-accepted values are used then Visual KPI will just use a default value for that property (for example KPI Block Widget types can only display height values of 1x and 2x, if another value is entered then Visual KPI will use a default 1x value).

Visualization in Visual KPI

After configuring the Dashboard and Widget you can now visualize it in VisualKPI.

Browse your VisualKPI from the Visual KPI Server Manager (right click on Admin  VisualKPI  Browse). Once there, in the upper right corner click on the profile icon and select Profile DataStudio (corresponding to the name of the Profile object you created in DataStudio)

Select Profile

Select the Profile Group and Profile you just created in DataStudio and click Select.

Select Profile Group and Profile

After selecting the Profile Group and the Profile you just created, the Widget previously configured in DataStudio will be displayed, in this example we used the representation of the Flow of a Generic KPI.

Visualization of the Widget on VisualKPI

Property: widgetTypes

This property defines the type of widget that is displayed. The following a table that describes these types:

Table 2. widgetType Property
Property Name Property Value



Group List, Group Geo, Group Map, Group Block.



KPI Block, KPI List, KPI Bullet, KPI Geo, KPI Map, KPI Trend, KPI Summary History, KPI Status History, KPI Notification History.



Table List, Table Geo, Table Data.



Chart List, Chart Geo, Managed Trend, Bar Chart, Pareto Chart, Pie Chart, XY Plot, Embedded Content.



Generic Link, Dashboard Link.

For Dashboard Links and Generic Links, the Custom properties: widgetType and widgetOptions need to be added and configured as shown in the tables below. The width, height, rowStart and columnStart custom properties can also be used in the same way as the with the KPI Block widget configuration.

Table 3. For Dashboard Links
Custom Property Property Name Property Value

Widget Type


Dashboard Link

Widget Options


dashboardMetaID=<KPI ID of the Dashboard in question>

Table 4. For Generic Links
Custom Property Property Name Property Value

Widget Type


Generic Link

Widget Options


url=<the url in question>