HowTo display content in a table

History

27 Feb 2023 Update webIQ project for esier usage with PLC data exchange
24 Feb 2023 Initial release

Prerequisites

WebIQ Designer version 2.13 or higher (project is created with 2.13)
Basic knowledge of WebIQ Designer
Basic JavaScript know how

Introduction

In version 2.13 WebIQ does not provide a table control, but with the attached example you can easy create a table with content provided within string or structure arrays. This arrays can be filled e.g. by your PLC program. No deep JavaScript know how is necessary, to use the functions. Section "Use table functionality in your project " describe the step, for using the table functionality in your WebIQ project.

Helpful links

CSS table styler https://divtable.com/table-styler/
CSS selectors: https://www.w3schools.com/cssref/css_selectors.asp https://developer.mozilla.org/en-US/docs/Web/CSS
CSS predefined colors: https://www.w3schools.com/cssref/css_colors.asp

Usage of demo project

The demo programme enables the table display of data stored in string and struct arrays.
In most cases, the data to be displayed is collected in the PLC and then copied into the array. In addition, the PLC programme must transmit the first and last array index to be displayed. In order for the project to work without a PLC, all data is displayed in WebIQ and can be edited. In a real project you would only display the table, but not the data for editing. Change the "Horizontal Alignment" (Left,Center,Richt,Strech ) of box-output for a different table alignment.

Click buttons "Init Struct" and "Init Strings"
Click buttons "Table Right", "Table Left" and "Table Big" for both sections: struct and strings to display table
Change data to see change in table
Click buttons "Table ..." to display changed data
Change item "iRowLast" to update the table (to simulate a new value sent by PLC)

Use table functionality in your project

Right now, you have to create the following files in your project and copy the content via Copy & Paste from the demo project. For easy usage a WebIQ package, will be shipped until Q2 2023. This package will include dialog boxes (info,warning,error) table creating,...

Code Manager> Stylesheets> cssTableCss for table design.
Adapt the table design to your requirements. (color, font, padding, ...)Code Manager> Local-Scripts> tableGeneratorsContains functions to create tables.
See function headers for documentationCode Manager> Local-Scripts> autoUpdateTableAutom. updates table when item iRowLast changes.
Adapt the item, to the items you are using in your project. Adapt digits for floats.
Insert this local script to the screen where you display the table.

All other files in the Code Manager, are only used for running the demo.

Requested features next version

Format functions (e.g. format numbers as date, time or leading "0" e.g. "003", Text lists)
Table header which is always visible (even when table spreads over multiple pages)
Table with controls to edit items
Create WebIQ table widget