How to script the appearance of data in a dynamic table

There are a several ways to change the appearance of data in a dynamic table. This article explains how to colorize negative numbers for a total line item amount in an invoice using a User Script.

Important! The technique shown applies to tables created using the Dynamic Table wizard. These tables make use of OL Connect’s table expander algorithm, which provides User Scripts with access to the detail record used to render the respective row and cells.

Steps

Labelling the table cell

The easiest way to target a table cell is by assigning it a class name. This can be used as the selector for the script, which allows it to perform certain tasks for the matched elements.

To assign a class name to the table cell:

  1. Select the respective table cell. Most of the time it is enough to put the text cursor in the cell. Alternatively select the cell from the breadcrumbs path at the top of the editor after placing the text cursor in the cell.
  2. Enter a name in the Class field of the Attributes panel. In the image below we’ve entered the text: total.
  1. Click the Class label in the Attributes panel to create a new User Script. The script editor appears. The selector of the script is automatically set to the specified classname.

Creating the script

The script needs iterate over all tables cells with the .total class name. The easiest way is to change the scope to Each matched element. This way the script runs once for each element that matches the selector (in this case every cell with the .total class name). This makes the current element accessible via the this object (see this) and as we are targetting cells/rows bound to a detail table, the data of the respective detail record is accessible via this.record.

  1. Change the Scope of the script to Each matched element. This feature is found in the Options section at the bottom of the Edit Script dialog.
  2. Add an if statement to check if the total field is negative. As stated above, the current detail record is stored in this.record so the value is read from this.record.fields.total.
  3. Next set an inline style using this.css('color','red') or add a CSS class name using this.addClass('highlight'). In case of the latter you’ll need to add a CSS rule for the respective class name to a CSS stylesheet.

Scripting the row

The example could be extended by adding a background color to the entire table row. As the script targets the table cell we could add styling to its parent, the table row (<tr>). The following script sets the color to the table cell and adds a background color to its parent (the table row).

if( this.record.fields.total < 0 ) {
	this.css('color','red')
	this.parent().css('background-color','#FFCCCB')
}