Skip to main content

Tutorial: Displaying Array Variables in Tables

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).

    Change the ColumnsColumn[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 SelectionSelection color property.

  6. Define the Selection Selection type property as Row selection.

  7. In the SelectionVariable for selected row property, define the PLC_PRG.iSelectedColumn variable.

    The following display results in online mode:

    _visu_img_element_table_online.png