Tables

An array from a structure can be quickly visualized using a table. Columns and rows are created according to the configuration.

Adding a table.

1. Open the server configuration page.
2. Go to the configuration of TcHmiReporting.
The General tab opens.
3. Open the path. If not available, create the path Reports/{Reportname}/Tables.
4. Click on Add to create a new table and enter the following values:
Name: Name of the table (taken as default if no title is active).
Symbol: Symbol from which the data is read.
Filter (optional): Filter on specific values.
Limit (Optional): Maximum number of data to be displayed (number of rows).
Sort by (Optional): Specifies a sort order within the table.
Title (Optional): Heading of the table.
The table is created but does not yet show any values.
5. Open the path Reports/{report name}/Tables/{table name}/columns.
6. Click on Add to create a new column and enter the following values:
Name: Name of the column (If this name corresponds to the variable name, it is automatically displayed. Taken as default if no title is active.)
Column order (optional): Specifies the order in which the columns are arranged.
Title (optional): Name of the column that is displayed in the header.
The table is now configured appropriately and displays the values of the configured symbol.

Use of HTML/JavaScript/CSS in a column

It is possible to execute HTML/JavaScript/CSS within a column. This may be necessary, for example, to round values.

1. Go to the configuration of the column.
2. Open the subitem Values.
3. Click Add to create a new entry and enter the following values:
Name: Name of the function
Value (optional): Editor for adding HTML code
If a filter is required, it can be found and edited as a subitem.
You can now execute the desired code under Value.
Tables 1:

If an array consists of a data type, such as a string, no column can be assigned. If you still want it to be displayed, you must proceed as described under Using HTML/JavaScript/CSS in a column. Here, however, it is sufficient to simply enter the placeholder {value}. The value is overwritten with the current value.

Sample HTML code (value rounded to 2 decimal places)

In the first step, the element in which the JavaScript code is executed is retrieved. This is required to write the result in the appropriate place. The placeholder is integrated with {value}. As a direct allocation is not necessarily possible here, the entire value of the series is shown. Find the corresponding value and process it. In the sample, the code block at the end is overwritten by the result of the function.

<script>
    var scriptTag = document.getElementsByTagName('script');
    var parent = scriptTag[scriptTag.length - 1].parentNode;
    
    var valueFull = {value};
    parent.innerHTML = valueFull.nValue.toFixed(2);
</script>
Tables 2: