Back to all How-tos

Change detail line formatting based upon a data field value

This How-To will show you how to change a line item detail formatting based upon a data field.

Note: If you don’t already have any detail table to work with, you can go ahead and create a basic data mapping configuration as well as a Print context (using Connect Designer) containing a Dynamic Table using the following sample data resource: testdata.

Introduction

We use an invoice template. Each item in the invoice has back order information given by the data field ItemBO that indicates the quantity returned. We would like the line items format to be changed depending on the value of the field. Here’s what our results would look like:

Back ordered items highlighted in red in a dynamic table

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

Quick steps

  1. Create a new standard script in the Scripts pane and double-click on it.
  2. Enter a meaningful name for the script, such as Change Item Format.
  3. In the Selector field, enter the css selector of dynamic table rows. We suppose that our table is identified by the id table_1, so the css selector for body rows is: #table_1 tbody tr.
  4. Enter the following script to change the line item’s css when the corresponding data field ItemBO is higher than 0:
results.each(function(index){ 
	var backOrder = record.tables.detail[index].fields.ItemBO; 
	if (backOrder > 0){ 
	this.css({'color':'red','font-style':'italic','font-weight':'bold'});  				
	} 
});

API features used in this example

Solution

Here is a Connect resource package to test out this method.

Click on the Preview tab to view the Dynamic Table and the lines to which the script applies.

Tags
Designer

Leave a Reply

Your email address will not be published. Required fields are marked *

All comments (1)

  • Fredrik

    To only affect for example the fourth column in the table change the selector in step 3 to: #table_1 tbody tr td:nth-child(4)