Dynamic Rows: Script

Script context
this.value – cell value
this.task – cell style
this.changeDef – table and column definition
this.changeCell – cell properties
Other methods
Snippets

Besides the JSON column definition (see Variables: Dynamic Rows), a Dynamic Rows variable has its own Script. This is JavaScript code that runs in the user's browser and controls the values, appearance and behaviour of table cells while the form is in use. This article is a reference of the script methods and context in TAS 5.19.12.

Script context

In the code, the context of the current task is available under this.currentTask: this.currentTask.id (task ID), this.currentTask.items (task variables with their initial values from the database), this.currentTask.refs (references to form components) and this.currentTask.processVars (case variables). The current table data is under this.table, and the current form language is in this.language. The this.props.formIsPristine flag, or t['sloupec'][i].isPristine() (where i is the row number), tells you whether the user has changed the form or the cell since it was loaded. this.lastChangedCell refers to the cell the user changed most recently. The Lodash library is available for general helper functions.

In all methods below, t is the table context (a reference to all cells, t['sloupec'][i]) and i/rowNumber is the row number. If colName/rowNumber is null, the function applies to the whole column or the whole row.

this.value – cell value

this.value(colName, rowNumber, args);

Parameter	Description
`colName`	Column name; `null` = all columns of the row.
`rowNumber`	Row number; `null` = all rows of the column.
`args`	A value, or a function `function(t, i, original)` that returns the value. `original` is the original value of the cell.

this.value('totalPrice', null, function(t, i) {
    return t['unitPrice'][i].getValue() * t['quantity'][i].getValue();
});

// Součtový řádek (řádek 1 bývá totals)
this.value('totalPrice-total', 1, function(t, rows) {
    var total = 0;
    for (var i in rows) {
        total += t['totalPrice'][i].getValue();
    }
    return total;
});

this.task – cell style

this.task(colName, rowNumber, args);

The parameters are the same as for this.value, but args returns an object with CSS styles.

this.task('totalPrice', null, function(t, i) {
    return t['totalPrice'][i].getValue() > 10000
        ? { textAlign: 'right', color: '#c00' }
        : { textAlign: 'right', color: '#555' };
});

this.changeDef – table and column definition

this.changeDef(newDef);

newDef is an object {colName: {vlastnost: hodnota}, ..., table: {...}}. The table key changes properties of the whole table, e.g. side, showAddRemove, showTotals. Properties accumulate, so if you want to hide a column only when a condition is met, you must make it visible again in the opposite branch. Multiple changeDef calls are merged. If several calls return the same property, the value returned last applies.

this.changeDef(function() {
    return {
        totalPrice: { duty: 'readonly' },
        note: { isVisible: vSync('OrderType') === 'Goods' },
        table: { side: 'left', showTotals: false },
    };
});

this.changeCell – cell properties

this.changeCell(colName, rowNumber, args);

The parameters are the same as for this.value. args returns an object with the properties of a specific cell, e.g. duty, isValid, validationErrors, or the data source for DL/DT: dataUrl, urlFilter, colIndex.

this.changeCell('totalWithVat', null, function(t, i) {
    return t['totalPrice'][i].getValue() || t['totalPrice'][i].getValue() === 0
        ? { duty: 'mandatory' }
        : { duty: 'writeable' };
});

// Změní zdroj dat našeptávače podle zvoleného kraje
this.changeCell('city', null, function(t, i) {
    var region = t['region'][i].getValue() && t['region'][i].getValue().value;
    if (region) {
        return { colIndex: 2, dataUrl: '/dyn-table/52/values', urlFilter: 'col_1<eq>' + region };
    }
});

Other methods

Method	Signature	Description
`this.changeFormComponents`	`(componentName, value)`	Sets the value of another variable on the task form (outside the table). `componentName` is the variable name and `value` is the new value or a function.
`this.formComponentsStyle`	`(componentName, style)`	Sets the style of another form variable, typically to hide it: `this.formComponentsStyle('Sequence', {display: 'none'})`.
`this.insertHtml`	`(html)`	Inserts custom HTML below the table, e.g. total fields outside the table columns.
`this.valueHtml`	`(id, value)`	Sets the value of an inserted HTML element by its `id`.
`this.getDynTable`	`(dt_id, dtc_id)`	Loads column `dtc_id` of dynamic table `dt_id` (you can also use the table name) into `this.dynTable[dt_id]`. It is asynchronous, so the script waits for it to finish.
`this.deleteRow`	`(args)`	Deletes a row. `args` is a `boolean`, or a function `function(t, rowId)` that returns `true`/`false`.
`this.handleErrors`	`(error)`	Writes an error from `try/catch` or a rejected promise to the console and prevents the task from being completed while the error persists.

this.insertHtml('<div><span>Celkem s DPH</span><input id="totalSum" type="text" readonly></div>');
this.valueHtml('totalSum', function(t) {
    return numeral(t['totalWithVat-total'][1].getValue()).format('0,0.00 $');
});

this.getDynTable('Suppliers');
this.value('supplierVat', null, function(t, i) {
    var row = t['supplier'][i].getValue();
    if (!row) return null;
    var found = _.find(this.dynTable['Suppliers'], { dtv_index: row.value });
    return found ? found.col_4 : null;
});

watchVariables
For a column to react to changes of a form variable outside the table, the variable must be listed in table.watchVariables in the table definition and must be mapped as writable in the task. Otherwise the script is not recalculated when that variable changes. For a full list of definition properties, see the article Variables: Dynamic Rows.

Snippets

The Insert snippet button in the script editor offers ready-made call templates for the methods above (this.value, this.task, this.changeDef, this.changeCell, this.changeFormComponents, this.formComponentsStyle, this.insertHtml/this.valueHtml, this.getDynTable, this.deleteRow, this.handleErrors). The template is inserted at the cursor position, and you only need to fill in the column names and the logic.

Related: Variables: Dynamic Rows, Dynamic Conditions: Script, Dynamic Table API.

Dynamic Conditions: Script

(opens in a new tab)