Bosch IoT Insights

Table widget

Using the Table widget, data can be displayed in a table.

Example

images/confluence/download/attachments/1083888332/widget_table_example_2020_08_04.png

Proceed as follows

  1. Select the Table widget in the widget list.
    → The widget configuration page is displayed.

    images/confluence/download/attachments/1083888332/widget_table_configuration_2020_08_04.png
  2. Configure the settings as described below.

  3. Click the Add button.
    → The widget is added to the dashboard.

To create this widget, the following settings are mandatory to be configured:

  • Data Source

All other settings are optional.

Dashboard Settings

Open the Dashboard Settings pane to set how the widget is displayed in the dashboard.

  1. In the Size drop-down list, decide how much space the widget should take in the form of columns.

  2. In the Visibility drop-down list, decide whether the widget should be shown or hidden in the dashboard.

  3. In the Title field, enter a title for the widget.

General Settings

Open the General Settings pane to configure some general aspects for the widget.

  1. In the Widget Refresh Interval in Seconds field, enter a value in seconds after which the widget should be refreshed.

Tree widget

Data Sources

Open the Data Sources pane to configure the data source for the widget.

You can select a maximum of three data sources.

  1. Click the + Add Source button to add a data source.

  2. Select any of the following options further explained underneath:

Query Template

  1. In the Query Template drop-down list, select a query template that you configured under Explore > Data Explorer, refer to Creating a query template.

    A query template is a template that has been created, parameterized, and provided for others. It is similar to an SQL View and shows data in a table view.

    To connect the widget with the Filter Panel widget you created for this dashboard, click the Available references icon images/confluence/download/thumbnails/1083888325/icon_reference.png and select the Filter Panel.

    If you have a time parameter, you can choose between absolute time, relative time, and a preset by clicking the time icon images/confluence/download/thumbnails/1083888325/icon_absolute_relative_time.png .

  2. Click the Source data preview icon images/confluence/download/thumbnails/1083888325/icon_widget_refresh.png to open a preview.

  3. Click the Save Data Source button.

Single Device

  1. In the Default Device ID drop-down list, select a Device ID.

    To connect the widget with the Filter Panel widget you created for this dashboard, click the Available references icon images/confluence/download/thumbnails/1083888325/icon_reference.png and select the Filter Panel.

  2. Click the Source data preview icon images/confluence/download/thumbnails/1083888325/icon_widget_refresh.png to open a preview.

  3. Click the Update Source button.

Multiple Devices

  1. In the Select Device Types drop-down list, select a device type.

  2. Click the Advanced Settings button to narrow down the output.

  3. In the Start field, enter a value to specify the device to start with.

    Example: If you select 3, the first two devices are skipped.

  4. In the Limit field, enter a value to specify the last device.

    The maximum is 200 devices.

  5. In the Fields field, enter the fields whose information shall be retrieved from Bosch IoT Things.

  6. In the Sort field, enter a field configured in Bosch IoT Things according to which the data shall be sorted.

  7. In the Namespaces field, add namespaces separated by a comma.

  8. In the DefaultFilter field, add a filter to narrow down the search results.

    To connect the widget with the Filter Panel widget you created for this dashboard, click the Available references icon images/confluence/download/thumbnails/1083888325/icon_reference.png and select the Filter Panel.

  9. Click the Source data preview icon images/confluence/download/thumbnails/1083888325/icon_widget_refresh.png to open a preview.

  10. Click the Update Source button.

Device Count

The Device Count data source is based on the counting functionality in Bosch IoT Things and is used to count things.

  1. In the Select Device Type drop-down list, select the device types/devices to be used as data source.

    • All Devices: Counts all devices regardless of the fact that they have a device type or not

    • All Device Types: Counts the devices that have the thing attribute type which means that the device belongs to a device type

    • Without Device Type: Counts the devices without the thing attribute type

    • Device Type xy: Counts the devices of the selected device types

  2. Click the Advanced Settings button to narrow down the output.

  3. In the Namespaces field, add namespaces separated by a comma.

  4. In the DefaultFilter field, add a filter to narrow down the search results.

    To connect the widget with the Filter Panel widget you created for this dashboard, click the Available references icon images/confluence/download/thumbnails/1083888325/icon_reference.png and select the Filter Panel.

  5. Click the Source data preview icon images/confluence/download/thumbnails/1083888325/icon_widget_refresh.png to open a preview.

  6. Click the Update Source button.

Devices from Filter Selection

Devices will be loaded that match the Device filter type configured in the Filter Panel widget.

  1. In the Pagination Limit field, enter a limit of devices that shall be displayed per page.

  2. In the Sort field, enter a property according to which the devices shall be sorted.

  3. Click the Source data preview icon images/confluence/download/thumbnails/1083888325/icon_widget_refresh.png to open a preview.

  4. Click the Update Source button.

Playback: All Frames

The Playback widget must have been configured for your dashboard.

  1. Select Playback: All Frames to display all data that has been recorded.

Playback: Current Frame

The Playback widget must have been configured for your dashboard.

  1. Select Playback: Current Frame to display the data that is just being recorded.

External Data Source

Using the external data source, an external endpoint can be specified to reference data.

  1. Select an HTTP method.

  2. In the Request URL field, enter the URL of the request.

  3. If you selected the GET HTTP method:

    1. In the Headers pane, enter a key and a value to specify the header information of the external system.

    2. Activate the Secret Header checkbox to flag the header as secret.

      When editing the data source, the header information has to be provided.

    3. In the Test Parameters pane, enter a filter parameter to test it.

      This pane can be used if a filter widget is configured for the dashboard. The filter values can be referenced as described in this pane within the URL and Headers.

      Modifiers can be used to manipulate referenced filter values. The following modifiers are available:

      • noencode: Only used in URLs. The value is not encoded as it is done by default.

      • join: Concatenates multiple values in one string separating them with the provided separator.

      • queryParams: Creates an entry with the provided parameterName for each value.

      Usage examples:

      Example filter context:

      {

      "multi": ["v1", "v2"]

      }

      join:

      ${filterParams.multi | join: ','} will result in v1,v2

      queryParams:

      ${filterParams.multi | queryParams: 'multiParam'} will result in multiParam=v1&multiParam=v2

      Independently from the test parameters, user-specific information can be referenced.

  4. If you selected the PUT HTTP method:

    1. In the Body pane, select the type of data in the Type drop-down list.

    2. Activate the Secret Header checkbox to flag the header as secret.

      When editing the data source, the header information has to be provided.

    3. In the Test Parameters pane, enter a filter parameter to test it.

      This pane can be used if a filter widget is configured for the dashboard. The filter values can be referenced as described in this pane within the URL, Headers and the Body.

      Modifiers can be used to manipulate referenced filter values. The following modifiers are available:

      • noencode: Only used in URLs. The value is not encoded as it is done by default.

      • join: Concatenates multiple values in one string separating them with the provided separator.

      • queryParams: Creates an entry with the provided parameterName for each value.

      Usage examples:

      Example filter context:

      {

      "multi": ["v1", "v2"]

      }

      join:

      ${filterParams.multi | join: ','} will result in v1,v2

      queryParams:

      ${filterParams.multi | queryParams: 'multiParam'} will result in multiParam=v1&multiParam=v2

      Independently from the test parameters, user-specific information can be referenced.

  5. If you selected the POST HTTP method:

    1. In the Body pane, select the type of data in the Type drop-down list.

    2. Activate the Secret Header checkbox to flag the header as secret.

      When editing the data source, the header information has to be provided.

    3. In the Test Parameters pane, enter a filter parameter to test it.

      This pane can be used if a filter widget is configured for the dashboard. The filter values can be referenced as described in this pane within the URL, Headers and the Body.

      Modifiers can be used to manipulate referenced filter values. The following modifiers are available:

      • noencode: Only used in URLs. The value is not encoded as it is done by default.

      • join: Concatenate multiple values in one string separating them with the provided separator.

      • queryParams: Creates an entry with the provided parameterName for each value.

      Usage examples:

      Example filter context:

      {

      "multi": ["v1", "v2"]

      }

      join:

      ${filterParams.multi | join: ','} will result in v1,v2

      queryParams:

      ${filterParams.multi | queryParams: 'multiParam'} will result in multiParam=v1&multiParam=v2

      Independently from the test parameters, user-specific information can be referenced.

  6. Click the Source data preview icon images/confluence/download/thumbnails/1083888325/icon_widget_refresh.png to open a preview.

  7. Click the Save Data Source button.

Table Settings

Open the Table Settings pane to configure the table view.

  1. Deactivate the Show Table Header checkbox to hide the table header in the widget.

    If you have created query templates, the data will be taken for the table header.

  2. Activate the Enable Hovering in Table Rows checkbox to enable hovering in the table.

  3. Deactivate the Add Zebra-Striping to Any Table Row checkbox to display every row in the same color.

  4. Activate the Set fixed column width checkbox to prevent the column width from adjusting when the content changes.

  5. Activate the Custom Column Definition checkbox to define your own table heading.

    1. In the Column Name field, enter a name for the column.

    2. In the Type drop-down list, select a type for the content visualization.

    3. In the Test Parameters pane, enter filter parameters to test it.

      This pane can be used if a filter widget is configured for the dashboard.

      Independently from the test parameters, user-specific information can be referenced.

    4. Configure the column depending on the type you selected as described in the Column definition section.

    5. Open the Data type handling & formatting pane to configure the handling of the displayed value regarding the data type as described in the Data type handling & formatting section.

    6. Click the Add Column button to add another column to the table.

  6. Activate the Show Column Filter checkbox to filter each column using the added filter icon.

  7. In the Number of table rows field, specify the number of rows that shall be displayed per page.


Column definition

  • If you selected JSON Property in the Type drop-down list:

    1. In the Value drop-down list, select or enter the iterator.

  • If you selected Hyperlink in the Type drop-down list:

    1. In the URL field, enter a URL.

    2. In the Hyperlink Display Text field, enter the text that shall be displayed for the hyperlink.

    3. In the Action drop-down list, select whether the hyperlink shall be opened in the same window or a new window.

  • If you selected Action Button in the Type drop-down list:

    1. In the Button Name field, enter a name for your Action Button.

    2. Define a REST Request by following the steps indicated in the REST Request Button Options section.

  • If you selected Image in the Type drop-down list:

    1. For the Source, activate one of the radio buttons.

    2. Select either a value in the Value drop-down list or enter a URL in the URL field for the source.

    3. For the Size, enter values for the Max Height and the Max Width fields for the image in pixels.

  • If you selected Rich Text in the Type drop-down list.

    1. Enter the text to be displayed in the text box.

    2. Format the text as desired.

    3. Insert ${ to add references to data paths. A drop-down list with all possible references is displayed.

      images/confluence/download/attachments/1083888332/widget_table_rich_text.png

Data type handling & formatting

  1. In the General handling section, select a data type in Type drop-down list.

  2. In the drop-down list next to the Prefix field, select one of the following options:

    • Value
      Enter any value as a prefix, e.g., €.

    • Data Source
      Select a parameter path from the drop-down list.

    • User Context
      Select user information to be displayed as prefix, e.g., User ID, User Email, or the time zone.

    • Filter Widget
      Select the Filter widget you added to the dashboard.

  3. In the drop-down list next to the Suffix field, select one of the following options:

    • Value
      Enter any value as a suffix, e.g., %.

    • Data Source
      Select a parameter path from the drop-down list.

    • User Context
      Select user information to be displayed as suffix, e.g., User ID, User Email, or the time zone.

    • Filter Widget
      Select the Filter widget you added to the dashboard.

  4. Activate the Hide value (no text) checkbox to hide the value and only display the background color.

  5. In the Type-specific options pane, define settings depending on the data type you selected.

    1. If you selected Number in step 1, activate the Thousands separator checkbox and select the number of Decimal Digits for behind the comma.

    2. If you selected String in step 1, activate the Wrap text checkbox to add line breaks.

    3. If you selected Date/Time in step 1, activate the Disable time zone conversion (Date and time is shown as UTC) checkbox to use UTC.

  6. In the Background color pane, configure the background color of the column.

    • If you activate the Static checkbox:

      1. In the drop-down list next to the Color field, select one of the following options:

        • Value
          Click the color square to select another color or enter a color code.

        • Data Source
          Select a parameter path from the drop-down list.

        • User Context
          Select user information to be displayed, e.g., User ID, User Email, or the time zone.

        • Filter Widget
          Select the Filter widget you added to the dashboard.

    • If you activate the Range checkbox:

      1. In the drop-down list next to the Default Color field, select one of the following options:

        • Value
          Click the color square to select another color or enter a color code.

        • Data Source
          Select a parameter path from the drop-down list.

        • User Context
          Select user information to be displayed, e.g., User ID, User Email, or the time zone.

        • Filter Widget
          Select the Filter widget you added to the dashboard.

      2. Click the Add range button to set a range in which a specific color shall be displayed.

      3. In the drop-down list next to the Color field, select one of the following options:

        • Value
          Click the color square to select another color or enter a color code.

        • Data Source
          Select a parameter path from the drop-down list.

        • User Context
          Select user information to be displayed, e.g., User ID, User Email, or the time zone.

        • Filter Widget
          Select the Filter widget you added to the dashboard.

      4. If you selected Number in step 1, add values to the From and To fields to which the color applies.

      5. If you selected String in step 1, set a dynamic background color with regular expressions to have the color of the row depend on the result of the regular expressions.

      6. If you selected Date/Time in step 1, add values to the From and To fields to which the color applies.

To delete the column, click the Delete button.