Column Configuration

Expand the Column Configuration section.
→ The available configuration options are displayed.

Proceed as follows:

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

2. Click the EN drop-down list and select Add DE: German to add the German equivalent for the label.

3. In the Button Name field, enter text that shall be displayed on the button.

4. If you need to define multiple action buttons in this column, click the Add Action option on the right, under the language option. Then for each button, enter a unique name in the Button Name field and repeat the steps described below.

5. In the Action Type field, define whether the action button will be primary (default) or secondary. Primary actions will be displayed directly in the table, whereas secondary actions will be hidden in a context menu.

6. In the icon area:

   1. Click the Select Icon button to select an icon different from the default one.

   2. Click the Reset to Default button to reset to the default icon.

   3. In the Type drop-down list on the right, select how the icon should be displayed:

      1. Only icon - with this option, only the icon will be displayed on the button, whereas the label defined for the button will be displayed only as a tooltip

      2. Only label - with this option, only the label defined for the button will be displayed, whereas the selected icon will not be displayed

      3. Icon and label - with this option, the button will display both the icon and the defined label

7. In the Request timeout in seconds field, specify the maximum time in seconds that the system will wait for a response from the REST API before timing out.
   

   This helps in managing the duration of the API request and handling potential delays.

8. In the Queuing timeout in seconds field, specify the maximum time in seconds that the system will wait to acquire a read ticket before timing out. This can be individually overridden if needed.

9. In the Duration in seconds field, define the caching duration in seconds, which must be at least 5 seconds. A value of 0 deactivates the cache explicitly.
   

   This option helps in optimizing the performance by storing the API response for a specific period, and thus reducing the need for repeated API calls.

10. In the Tooltip text field, specify the text that will be displayed as a tooltip when hovering over the values in this column.
    

    You can use placeholders to enrich the tooltip text with data, e.g. 'My Tooltip value ${[i].payload.value}'.

HTTP Method

Expand the HTTP Method section.
→ The available configuration options are displayed.

Proceed as follows:

1. Select the relevant HTTP Method.

2. In the Request URL field, enter the Request URL to the third-party system.
   

   In the URL, you can refer to entries from the data source, with a path to the data element in the nested structure.

3. In the Body tab:

   1. In the Body Type field, select the relevant body type: Raw Data, Form Data, or Document.

      The Body type option allows you to specify the format of the request body when making requests to the REST API. It is not available for the GET and DELETE HTTP methods.

      1. For Raw Data, enter the request body.

      2. For Form Data, enter a key-value pair.

      3. For Document, the system will send the matched document (defined in the data source) to the HTTP endpoint.

   2. In the Authorization Type drop-down list, select the type of authorization to be used when making requests to the REST API.
      

      1. The default option is Without Authentication.

      2. For Basic Auth:

         1. In the Username field, enter the username.

         2. In the Password field, enter the password.

      3. For OAuth 2.0:

         1. In the Grant Type drop-down list, select the type of credentials.

         2. Enter the Access Token URL.

         3. Enter the Client ID.

         4. Enter the Client Secret.

         5. If you selected Password Credentials as Grant Type, also enter the Username and the Password.

      4. For OAuth 2.0 Bearer Token, enter the token.

      5. For Current User Session, be aware that this option only works for service domains that belong to the current project and not 3rd party applications.

4. In the Headers tab:

   1. Enter a Key and a Value.

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

      When editing the REST request, the header information has to be provided.

   3. Click the + Add Header button to add another row.

      To remove a row, click the the Remove icon .

5. In the Test Parameters tab, enter a filter parameter 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.

Response Trigger

Expand the Response Trigger section.
→ The available configuration options are displayed.

Proceed as follows:

1. In the Default Trigger URL field, configure a URL that will be triggered if no other trigger matches the response from the REST API.
   This provides a fallback action in case no specific triggers are met.

2. In the Action drop-down list, select whether the link shall be opened in the same tab, opened in a new tab, or copied to clipboard.

3. In the Response Code field, enter a response code.

4. In the Trigger URL field, enter a URL that will be opened automatically upon receiving the respective response code from the REST API.
   

   This can be used to initiate additional actions or processes based on the API response.

5. In the Action drop-down list, select whether the link shall be opened in the same tab or in a new tab.

6. Тo add a trigger for another response code, click the Add Trigger button.

7. To configure the newly added trigger, repeat the steps from 3 to 5.

Disable on Condition

Expand the Disable on Condition section.
→ The available configuration options are displayed.

Proceed as follows:

If you need to disable the button when the configured conditions apply:

1. In the Property Path field, enter a property path where a condition shall be set.
   

   The property can be a data or context path (e.g. 0.device.color or filterParams.url or inputFields.id). The value can be any string; if it is left empty or set to undefined, then the action will be disabled if no value is found for the property.

2. In the operator area, click the operator icon to select from the available operator options.

3. From the Data Type drop-down list, select the relevant data type.

4. In the Value field, enter any value at which the button shall be disabled.

   This field can be left empty or set to undefined to disable the button if there is no value available.

5. To add the condition, click the Add button.

Styling

Expand the Styling section.
→ The available configuration options are displayed.

Proceed as follows:

1. Activate the Hide column checkbox if you need to hide the column in the table.
   

   Even if you choose to hide this column, the Enable column selection option described earlier will still allow you to select and unselect the column and thus to show and hide it in the table, respectively.

2. Activate the Stick column horizontally checkbox if you need to fix the column in a horizontal position while scrolling through the table.
   When the box is checked, the column will be kept in place. When the box is not checked, the column will scroll horizontally with the rest of the table.

3. Activate the Hide column name in table header checkbox to not display the column name in the table.

4. Activate the Hide cell values checkbox to hide the cells text, for example to only show a background color.

5. In the Minimal column width in px field, you can manually set the minimal column width to avoid word breaks in the column, ensuring that the column does not become narrower than the specified value. This can help maintain readability and prevent excessive compression of the column.

6. From the Apply background as drop down list, select one of the following options:

   • Chip (default) - applies color to a chip around the value only

   • Cell - applies color to the entire cell
     If a cell has no value, then the entire cell will be colored, regardless of the choice.

7. In the Background color field, click on the default color icon to configure the background color of the column.

   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 a filter from the Filter widget you added to the dashboard.

      • Input Widget
        Select the input field from the Input widget you added to the dashboard.

8. In the Text color field, define the text color as described above for Background color.

Column Configuration

Expand the Column Configuration section.
→ The available configuration options are displayed.

Proceed as follows:

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

2. Click the EN drop-down list and select Add DE: German to add the German equivalent for the label.

3. In the URL field, enter a URL or a file link.

   As opening a file link is considered a potential security risk, it is restricted by modern web clients.

   Therefore, in order to open this link from the widget later on, you can copy it from the dialog which appears when the link is clicked, and then paste it into your file explorer.

   Make sure that the link is trustable and correct before using it.

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

• In the Action drop-down list, select whether the hyperlink shall be opened in the same tab, opened in a new tab, or copied to clipboard.

• In the Tooltip text field, specify the text that will be displayed as a tooltip when hovering over the values in this column.

  You can use placeholders to enrich the tooltip text with data, e.g. 'My Tooltip value ${[i].payload.value}'.

Column Configuration

Expand the Column Configuration section.
→ The available configuration options are displayed.

Proceed as follows:

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

2. Click the EN drop-down list and select Add DE: German to add the German equivalent for the label.

3. In the Tooltip text field, specify the text that will be displayed as a tooltip when hovering over the values in this column.
   

   You can use placeholders to enrich the tooltip text with data, e.g. 'My Tooltip value ${[i].payload.value}'.

Image Source

Expand the Image Source section (also visible on the screenshot above).
→ The available configuration options are displayed.

Proceed as follows:

1. For the source type, activate one of the radio buttons:

   1. Device image

   2. Base 64 image

   3. From URL

2. For the option Device image, the Device property path field allows you to specify the path to the image within the device data that should be displayed in the corresponding column of the table.

3. For the option Base 64 image, the Base 64 property path field allows you to specify the path to the image base 64 within the data source that should be displayed in the corresponding column of the table.

4. For the option From URL, the URL field allows you to specify the url to the image that should be displayed in the corresponding column of the table.

5. In the fields Image max height and Image max width, enter values for the maximum image size in pixels.

Column Configuration

Expand the Column Configuration section.
→ The available configuration options are displayed.

Proceed as follows:

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

2. Click the EN drop-down list and select Add DE: German to add the German equivalent for the label.

3. In the Values data path drop-down list, select or enter the iterator.

4. Select the Multiple values (array) checkbox to have all values of an array displayed in a table row.

5. When the Multiple values (array) checkbox is selected, the Array value separator field is displayed.
   Use its drop-down list to specify how the values in that table row shall be separated from each other, e.g. Line break, Comma, Semicolon, White space, or List based.

6. 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 a filter from the Filter widget you added to the dashboard.

   • Input Widget
     Select the input field from the Input widget you added to the dashboard.

7. 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 a filter from the Filter widget you added to the dashboard.

   • Input Widget
     Select the input field from the Input widget you added to the dashboard.

8. In the Tooltip text field, specify the text that will be displayed as a tooltip when hovering over the values in this column.
   

   You can use placeholders to enrich the tooltip text with data, e.g. 'My Tooltip value ${[i].payload.value}'.

Data Type Handling

Expand the Data Type Handling section.
→ The available configuration options are displayed.

Proceed as follows:

The Value Type option allows you to specify the data type of the values in the corresponding column of the table. This lets you define how the data will be displayed on the basis of its type.

1. In the Value Type drop-down list, select one of the available options:

   • Boolean,

   • Number,

   • String,

   • Date/Time,

   • JSON

2. Depending on the data type you selected, define the following:

1. 1. For Boolean:

      1. In the Enter text to be shown instead of "true" field, enter a value that is displayed instead of true.

      2. In the Enter text to be shown instead of "false" field, enter a value that is displayed instead of false.

   2. For Number:

      1. Activate the Thousands separator checkbox to format numbers.

      2. Select the number of Decimal Digits for behind the comma.

   3. For String, activate the Wrap text checkbox to add line breaks.
      Checking the box will wrap the text within the column, while unchecking it will display the text on a single line without wrapping.

   4. For Date/Time:

      1. Activate the Disable time zone conversion (Date and time is shown as UTC) checkbox to use UTC.

      2. In the Time format drop-down list, select a format in which the date and time shall be displayed.

   5. For JSON:

      1. Activate the Autoformat checkbox to automatically indent the formatting of the JSON.

      2. Activate the Show in popover checkbox to activate the inline view which provides the first 50 characters of the JSON in the form of a hyperlink.

      3. In the Maximum lines of JSON editor field, define the number of rows to be displayed before scrolling is necessary.

Styling

Expand the Styling section.
→ The available configuration options are displayed.

Proceed as follows:

1. Activate the Hide column checkbox if you need to hide the column in the table.
   

   Even if you choose to hide this column, the Enable column selection option described earlier will still allow you to select and unselect the column and thus to show and hide it in the table, respectively.

2. Activate the Stick column horizontally checkbox if you need to fix the column in a horizontal position while scrolling through the table.
   When the box is checked, the column will be kept in place. When the box is not checked, the column will scroll horizontally with the rest of the table.

3. Activate the Hide column name in table header checkbox to not display the column name in the table.

4. Activate the Hide cell values checkbox to hide the cells text, for example to only show a background color.

5. In the Minimal column width in px field, you can manually set the minimal column width to avoid word breaks in the column, ensuring that the column does not become narrower than the specified value. This can help maintain readability and prevent excessive compression of the column.

6. From the Apply background as drop down list, select one of the following options:

   • Chip (default) - applies color to a chip around the value only

   • Cell - applies color to the entire cell
     If a cell has no value, then the entire cell will be colored, regardless of the choice.

7. In the Background color field, configure the background color of the column.
   You can choose between a Default color and a Conditional color by means of the square icon and the plus icon in the field, respectively.
   You can define different rules based on which different colors can be displayed.
   

   

8. If you selected the Default color icon, the Default color dialog is displayed, where you can proceed as follows:
   

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

      1. Value
         Enter your color value manually by using a HEX code or use the color picker.

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

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

      4. Filter Widget
         Select a filter from the Filter widget you added to the dashboard.

      5. Input Widget
         Select the input field from the Input widget you added to the dashboard.

   2. Click the Apply button.

9. If you selected the Conditional color icon, the Conditional color dialog is displayed, where you can proceed as follows:

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

      1. 1. Value
            Enter your color value manually by using a HEX code or use the color picker.

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

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

         4. Filter Widget
            Select a filter from the Filter widget you added to the dashboard.

         5. Input Widget
            Select the input field from the Input widget you added to the dashboard.

   2. In the drop-down list next to the condition field, which depends on the value type (see below), select one of the following options:

      1. Value
         You can enter your condition manually depending on the value type, as described in point c. below.

      2. Data Source
         Select a parameter path from the drop-down list referring to this condition.

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

      4. Filter Widget
         Select a filter from the Filter widget you added to the dashboard.

      5. Input Widget
         Select the input field from the Input widget you added to the dashboard.

   3. Click the condition field and fill in the condition based on which the specified color shall be displayed, as follows:

      1. If you have selected Boolean as Value Type in Data Type Handling section, select either true or false. You can define another conditional color for the other value as well.
         

         

      2. If you have selected Number as Value Type in Data Type Handling section, add values to the From and To fields.

      3. If you have selected String as Value Type in Data Type Handling section, set a dynamic background color with regular expressions to have the color of the row depend on the result of the regular expressions.

      4. If you have selected Date/Time as Value Type in Data Type Handling section, choose between the options in the Absolute, Relative, and Presets tabs.
         

         

   4. Confirm by clicking the Apply button.

10. In the Text color field, define the text color.
    Follow the same steps as described for Background color above.

Column Configuration

Expand the Column Configuration section.
→ The available configuration options are displayed.

Proceed as follows:

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

2. Click the EN drop-down list and select Add DE: German to add the German equivalent for the label.

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

4. Format the text as desired.

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

Data Type Handling

Expand the Data Type Handling section (as on the screenshot above).

1. Activate the Wrap text checkbox to add line breaks.
   Checking the box will wrap the text within the column, while unchecking it will display the text on a single line without wrapping.