View script function - tables
On this page
mySCADA uses a slickgrid JavaScript library to render tables. You can use any functionality slickgrid library provides, but most of the functions are packed into simple to use mySCADA functions. For more information about slickgrid JavaScript library, please look here: https://github.com/6pac/SlickGrid/wiki
Showing CSV File in a Table
You can show a table inside Active Area, file will be read from User Files
var options={};
options.file=‘soubor.csv’;
options.editable=true; //whether you want to make final table editable by user
options.areaId=1; //ID of active area where to render table
options.textSize=200; //text size in percent
options.selectedRowColorBackground=‘green’; //background color of selected row
options.rowSelect=false; //if true, table will be created with added first column to select rows by check box
options.singleSelection=true; //allow to select single row by user
options.multipleSelection=false; //allow to select multiple rows by user
myscada.showCsvFromUserFilesInTable(options);
You can show a table inside Active Area, file will be read from from User Data folder (files saved in runtime)
var options={};
options.file=‘soubor.csv’;
options.editable=true; //whether you want to make final table editable by user
options.areaId=1; //ID of active area where to render table
options.textSize=200; //text size in percent
options.selectedRowColorBackground=‘green’; //background color of selected row
options.rowSelect=false; //if true, table will be created with added first column to select rows by check box
options.singleSelection=true; //allow to select single row by user
options.multipleSelection=false; //allow to select multiple rows by user
myscadaShowCsvInTable(options);
Showing Generic Tables
You can easily show tables filled with data you provide in any active area you choose.
1. First of all, create an options object with required parameters
var options={};
options.file=‘soubor.csv’;
options.editable=true; //whether you want to make final table editable by user
options.areaId=1; //ID of active area where to render table
options.textSize=200; //text size in percent
options.selectedRowColorBackground=‘green’; //background color of selected row
options.rowSelect=false; //if true, table will be created with added first column to select rows by check box
options.singleSelection=true; //allow to select single row by user
options.multipleSelection=false; //allow to select multiple rows by user
2. Now create column definitions
options.columns = [
{id: “title”, name: “Title”, field: “title”},
{id: “duration”, name: “Duration”, field: “duration”}
];
Each column can have following parameters
| Id | Unique ID or the column |
| name | Name of column. Shown in column header |
| field | To retrieve a column back, use the filed parameter |
| width | Width of column in pixels |
| require | true/false if the column must have a value |
| default | Default value |
| editor | How the value will be edited by user. See next part for explanation. |
| editorOptions | Additional options for conditional editor |
3. You can also provide a custom cell editor for any column you choose. To do so, add option “editor” to the column definition:
Example: {id: “name”, name: “name”,field: “name”, width: 200, editor: Slick.Editors.Text}
Following types are supported: Slick.Editors.TextEditor Basic text editor (default option if you don’t choose any other) Slick.Editors.IntegerEditor For editing whole numbers Slick.Editors.DateEditor For editing dates Slick.Editors.YesNoSelectEditor Boolean editor Slick.Editors.CheckboxEditor Check box editor Slick.Editors.PercentCompleteEditor Percentage editor Slick.Editors.LongTextEditor Long text editor
Aside of basic editors, there is a complex editor which allows you to pass multiple options and limit what exactly can user enter.
Slick.Editors.ConditionalCellEditor for this editor, you can provide additional parameters using editorOptions parameter
example: {id: “age”, default: 20, name: “Age”, field: “age”, editor:Slick.Editors.ConditionalCellEditor, editorOptions:{min:0 , max:120, msg:“Must be a valid number 0 - 120”, type:‘number’, decimalPlaces:0}}
editorOptions can have following parameters:
| Type | number/string Specify if edited value is a number or string |
| decimalPlaces | Maximum number of decimal places to enter (enter 0 for integer type) |
| min | Minimum limit value can have |
| max | Maximum limit value can have |
| minLength | Minimum number of characters value can have |
| maxLength | Maximum number of characters value can have |
| required | true/false If true value cannot be empty |
| pattern | Provide a regular expression against which will be user input tested |
4. And finally pass some data. Passed data is array of objects
options.data = [];
for (var i = 0; i < 500; i++) { //creating 500 rows
data[i] = {
title: “Task ” + i,
duration: “5 days”
};
}
//the table will be created and rendered inside Active Area with given id
myscada.createTable(options);