Widgets

Overview of the Widget Editor

  1. Select the type of widget you want to create. In "General" you can find text, table, progress bar, map, overview and image widgets and in "Charts" you can find the classics such as line, bar, scatter, and other charts.

  2. Additional settings like copying or duplicating your existing widget (see Copy / Duplicate elements.)

  3. Reset your widget.

  4. If you change something, the save button will be enabled (green) and will save the current settings of your widget.

  5. Define the name of your widget and describe it in detail. The name and description will be shown in the overview screen for the widgets. The description will also be shown in the widget description on a dashboard.

  6. Here you can define various settings for the widget header, described in more detail here.

  7. Linked Dashboards & External Links, details on this area in the section below.

Building a Widget

In the following, we will walk through the steps necessary to create a simple line chart. The basic steps are the same for almost all widget types. For more details on a specific widget please go to the respective page.

In the following, you see how a line chart is created which displays the data from a script. 1. Select the widget type 2. Give the widget a name. 3. Write a header for the widget. 4. Go to the "Chart" tab and select "Script" as the data source type. 5. Select the desired script (in our example "Example Script") as input. 6. Select the x-axis values ("timestamp") and then the y-axis data for each series. In the example below, we are creating 2 series using the data of the script output variables "speed1" and "speed2". 7. Save the widget.

Widget Header Settings

In the general tab of your widget editor, you will find a few settings that will change the way the header of your widget looks and behaves.

Show header

This toggle lets you define if you want to display a header on your widget or not. A header is basically like a headline, where you can define in a few words what your widget shows for better understandability.

Widget header

As described in the Show header field, here you can define what your widget header should be. As a default, you get a text box for setting your widget header to any text you want.

But there's also an arrow icon on the right of the text box, which, when clicked, will give you a few advanced options. Here you can, instead of using a static text as the widget header, set a string column from any of your datasets or scripts to appear as your widget header instead.

Note that when using a dataset or a script, the widget will get the value to display from the first row that the dataset or script returns.

Show menu in dashboard

When hovering over your widget in the widget editor, you will notice that a three dotted icon will appear in the top right corner of your widget, this is what we call the menu. Clicking on it reveals a few additional options like "Edit", or options to download a chart as a PNG file.

The show menu in dashboard basically decides if the menu of a widget should be displayed in dashboard view mode or not. That means, if the setting is toggled on, you can add your widget to a dashboard and still see the menu of the widget in dashboard view mode when you hover over it. If this setting is toggled off hover, the menu of the widget will only appear when you are in dashboard edit mode, but not in dashboard view mode.

As this setting only affects how your widget will behave when it is displayed in a dashboard, changing this setting in the widget editor will have no impact on the widget preview.

After selecting the widget type, you can define a link to a dashboard and/or an external link to a website to the regarding menu points.

The resulting widget could look like this,

The dashboard link will link to the same dashboard no matter where you use your widget. Note that you can also define a dashboard link for your widget in the dashboard edit mode. This link will then be used only on this dashboard.

Last updated