Change detail line formatting based upon a data field value

This How-To will show you how to change the formatting of a row or cell in a detail table based upon a data field.

Note: If you don’t already have any dynamic table to work with, you can go ahead and download the following sample data mapping configuration: OLSG_transactional_XML.zip. Open it in Connect Designer. Then create a new Print template (File > New > Template > Print template) and add a Dynamic Table following the steps in the online help: Creating a Dynamic_Table.

Each item in the detail table has back order information given by the data field BackOrder that indicates the quantity returned. We would like the format of one cell in the line item to be changed depending on the value of this field. Here’s what our results would look like:

To achieve this, we will write a script that tests the data field’s value and changes the line item format if the value is positive (indicating there are some back order items).

Quick steps

We want the script to apply to cells in the Shipped column. In order to make that work, we have to give those cells a class.

1. In Design mode, select the cell in the Shipped column. You could click in it, or use the Outline tab at the left, or the breadcrumbs at the top.
2. Type a class in the Attributes pane, for example: shipped. Remember to put a space between the new class that you enter, and any existing classes which belong to the selected table style.

Now we can create the script.

1. Click on the “New” button in the Scripts pane.
2. Enter a meaningful name for the script, such as Change Item Format.
3. In the Selector field, enter the CSS selector of the fields that we want the script to apply to: .shipped. (Class selectors start with a dot.)
4. Enter the following script to change the line item’s CSS when the corresponding data field BackOrder is higher than 0:

results.each(function(index){ 
	var backOrder = record.tables.item[index].fields.BackOrder; 
	if (backOrder > 0){ 
	this.css({'color':'red','font-style':'italic','font-weight':'bold'});  				
	} 
});

Save the script and switch to Preview mode to see the result.

API features used in this example

• record.fields
• results.css()
• results.each()