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:

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

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.

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	rowStart	1	This value represents the row where the KPI will be placed in the Dashboard.
Custom Property 2	columnStart	1	This value represents the column where the KPI will be placed in the Dashboard.
Custom Property 3	height	1x	This value represents desired height of the box that contains the KPI.
Custom Property 4	width	50%	This value represents the desired width of the box that contains the KPI.
Custom Property 5	objectMetaID	KPI ID of the object in question.	Copy the KPI ID from the KPI Model of the object.
Custom Property 6	widgetType	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.

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 the Profile Group and Profile you just created in DataStudio and click Select.

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

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	widgetType	Group List, Group Geo, Group Map, Group Block.
KPI	widgetType	KPI Block, KPI List, KPI Bullet, KPI Geo, KPI Map, KPI Trend, KPI Summary History, KPI Status History, KPI Notification History.
Tables	widgetType	Table List, Table Geo, Table Data.
Charts	widgetType	Chart List, Chart Geo, Managed Trend, Bar Chart, Pareto Chart, Pie Chart, XY Plot, Embedded Content.
Links	widgetType	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	widgetType	Dashboard Link
Widget Options	widgetOptions	dashboardMetaID=<KPI ID of the Dashboard in question>

Table 4. For Generic Links
Custom Property	Property Name	Property Value
Widget Type	widgetType	Generic Link
Widget Options	widgetOptions	url=<the url in question>

How to Create a VisualKPI Widget

Create KPI Widget

Configuring KPI Widget

Visualization in Visual KPI

Property: widgetTypes