Using scripts in Dynamic Tables

In most cases you don't need a script to change the content or style of rows or cells in a Dynamic Table.
However, if the contents or style of cells or rows in a Dynamic Table need to be personalized based on the value of a field, you will need a script.

This topic gives some information that will help you to write a script for (an element in) a Dynamic Table.
It is assumed that you are familiar with the scripting basics; see Writing your own scripts.

Quick-start a script with the Create script button

The easiest way to add a script that targets a specific element (usually a cell or span) that is linked to a data field in a detail table, is this:

1. In Design mode, select the element.
2. Click the Create Script button next to the Field drop-down on the Attributes pane.
3. Click Yes.

As a result:

• The element's data-field attribute will be renamed to data-script.
• If the element had a data-format attribute, that attribute will be removed.
• A new script will be created and opened in the Script Editor.

The selector of the new script is the data-script attribute with the name of the data field that the element was linked to as its value. For example: table [data-script='ID'].

The code of the script replaces the contents of the element with the current value of the data field:

var field = this.record.fields['ID'];

if (field) {

this.text(formatter.upperCase(field));

}

The scope of the script is set to Each matched element (see Setting the scope of a script). This means that in the code, this refers to the element that matches the selector, and this.record refers to the current (nested) detail record (see this).

Writing scripts for a Dynamic Table

If you're going to create your own scripts for Dynamic Tables, there are a few things you need to know.

Selectors

Scripts that target (an element in) a Dynamic Table can use the same types of selectors as other scripts. In the output, Dynamic Table rows are repeated including any classes that are set on the row and on its contents.

In addition, Dynamic Tables and their rows and cells have some special data- attributes that can be used as selector. See: A Dynamic Table's data- attributes.
Note however, that the data-repeat attribute cannot be used as a selector for template scripts, since it gets removed when the table is expanded, which happens before template scripts run.
The data-script attribute is used if you let the Designer create a script for you (see Quick-start a script with the Create script button).

How the scope of a script can simplify code

It is recommended to set the scope of a script that targets (an element in) dynamically added rows to Each matched element.

The selector of a script that targets (something in) a row that is linked to a detail table will probably match multiple elements.
By setting the scope of a script you can determine whether you want to run the script once, or once for each element that matches the selector. (See Setting the scope of a script.)

If a script runs once, accessing the detail data and dynamically added rows tends to be bit complicated, especially when they are nested, since it involves looping over the results and record objects (see results and record).

If a script targets (something in) a row that is bound to a detail table, and runs once for each matched element, the current element is accessible via the this object (see this) and the current detail record is accessible via this.record.

The advantage of the latter approach is demonstrated in the example below.

Example: Styling a row based on a value in a detail table

Here are two scripts that have the same effect: if in a row, the value of the field Shipped is 1, it colors the text of that row green.

The first script targets a cell in a Dynamic Table row that is bound to a detail table. The script has its scope set to "Each matched element", so it can use this (see this) to access the selected cell and this.record to access the current detail record, without performing any loops.

Selector: table [data-script='Shipped'].
Scope: Each matched element

var field = this.record.fields['Shipped'];
if (field) {
	this.text(formatter.upperCase(field));
	if (field == 1)
		this.parent().css('color', 'green');
}

The following script targets the table, and has its scope set to "Result set". This script loops over the detail table in the record, evaluating the field Shipped. If the value of that field is 1, it looks up the corresponding row in the results (the selected Dynamic Table).

Selector: #table_1 tbody
Scope: Result set

for(var i = 0; i < record.tables.detail.length; i++){
	if(record.tables.detail[i].fields['Shipped'] == 1)
	query("tr:nth-child(" + (i+1) + ")", results).css('color','green');
}