Widgets
Widgets are designed to visualize data from objects and links.
Widgets can be added to any object or link using data from any object or link in the system. For example, to create dashboards or reports.
Widgets displaying
Widgets are displayed:
-
directly on the object in the Standard view:
-
directly on the object in the Table view in the column Widgets:
-
directly on the object in the Grid view (the first widget only):
-
in the link pop-up window:
-
in the section Widgets of objects and links:
Widgets creation
To create a new widget it is necessary to:
-
Open the window Add widget with one of the following ways:
-
in the object or link End view click the button in the panel Breadcrumbs;
-
in the Standard view click the icon after hovering the mouse cursor over the object, or in the link pop-up window.
-
-
Select widget type.
-
Select an object to get data from (by default it is the current object).
-
Select a metric to display.
-
Set widget specific parameters.
To edit or delete a widget it is sufficient to put the mouse cursor over the widget and click the corresponding icon.
Widgets order and size can be changed by dragging-and-dropping.
Widgets publishing on external sites
Widgets can be embedded into an external site.
To embed a widget, do the following:
-
Hover the mouse cursor over the widget.
-
Click the button (widget code).
-
Copy and paste the HTML code to your page.
Embedded widgets contain the following data:
-
time period of data showing (for charts),
-
header (label).
Embedded widgets are not updated in real time. Refresh the page to get updated data. |
The following widgets can be embedded:
Widget settings
Embedded widgets can be customized.
<iframe
src="http://192.168.1.48/embedded-widgets/html/chart.html?token=71656418-8912-42a3-b151-3b91c63df707&height=160&width=250&linkUrl=http://saymon.info/&linkName=SAYMON&duration=3600000&metricCaption=roundTripAverage"
height="215" width="262" frameborder="0">
</iframe>
Widgets parameters:
-
src
– link to metric; -
height
– height of the iframe component. Does not influence the chart height; -
width
– width of the iframe component. Does not influence the chart width; -
frameborder
– width of the border around the widget (in pixels).
Link parameters:
-
token
– API token that is used to get the metric data without additional authentication. You can find more information about using and generating those tokens in the REST API documentation; -
height
– chart height. Does not influence the widget height; -
width
– chart width. Does not influence the widget width; -
linkUrl
– URL of the widget link; -
linkName
– text of the widget link; -
duration
– amount of time for which to show the data on the chart (in milliseconds); -
metricCaption
– caption of the metric displayed on the chart. Can be different from the metric name in SAYMON object.
You can configure default values of the linkUrl
and linkName
parameters in the Web application configuration.
Examples
There are some examples of setting widgets up using different fields.
Examples of using count
Present moment
Script execution has been set and it gets the metric date (today’s date) with the value 15.
With setting up the minimum weekly value:
Result = metric value (15) - Period (7 days). The widget will display the date of 8.
Calendar period
Script execution has been set and it gets the metric date (today’s date) with the value of 15 (Thursday).
With setting up the minimum weekly value:
Result = metric value (15) - Period (Monday). The widget will display the date of 12.
Example of using period offset
Website availability is checked with the sensor Ping, and the metric packetsReceived is obtained. Its average value for the previous week can be displayed on the widget by turning the switcher For previous period into the position YES and defining "1" as the offset.
Example of using dictionary
The door open sensor sends the values "1" and "0", which corresponds to the door opening and closing respectively. To display the state of the door in a human-readable form, it is possible to add to the widget the dictionary with the values:
-
0 = the door is closed;
-
1 = the door is opened.
The sensor fixed the door opening and sent the value "1". These data are compared with the dictionary:
The value The door is opened will be displayed on the widget.
Example of using multiline text
With executing an HTTP request, the metric body is returned. The value of the metric is multiline text.
With switching the slider Multiline to the position YES and specifying the font size, the response body will be displayed on the widget fully.