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> cssTable | Css for table design. Adapt the table design to your requirements. (color, font, padding, ...) |
| Code Manager> Local-Scripts> tableGenerators | Contains functions to create tables. See function headers for documentation |
| Code Manager> Local-Scripts> autoUpdateTable | Autom. 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
