Tutorial: Displaying Array Variables in Tables Permalink

A frequently required function of a user interface is the display of data arrays. CODESYS Visualization provides the “Table” element for this purpose.

In the configuration of the “Table” element, you specify an array variable in the “Data array” property. The array elements are displayed in the rows and columns of the table.

Subsequent instructions describe an example of how an array of a structure is displayed in a table. As a preparation, create the ‎MYSTRUCT‎ DUT and the declarations in the ‎PLC_PRG‎ program.

TYPE MYSTRUCT :
STRUCT
    iNo : INT;
    bOnStock : BOOL;
    strPartNumber : STRING;
END_STRUCT
END_TYPE

PROGRAM PLC_PRG
VAR
    arrStruct : ARRAY[0..6] OF MYSTRUCT;
    iSelectedColumn : INT;
END_VAR              
  1. Drag the “Table” visualization element to the visualization editor.

  2. Assign the array variable ‎arrStruct‎ to the “Data array” property.

    The structure members are displayed as column headings and the array index as row headings.

  3. Change the “Columns  Column  [0]  Column header” property to an informative heading (example: ‎Number‎).

  4. Change the heading of column [1] to ‎in stock‎ and column [2] to ‎Part number‎. Adjust the column width.

  5. Assign a color to the “Selection  Selection color” property.

  6. Define the “Selection  Selection type” property as ‎Row selection‎.

  7. In the “Selection  Variable for selected row” property, define the ‎PLC_PRG.iSelectedColumn‎ variable.

    The following display results in online mode:

    _visu_img_element_table_online.png