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.

Sample data resource: testdata

Introduction

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

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

Back ordered items highlighted in red in a dynamic table

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

Quick steps

  1. Create a new script in Script 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 enter the body rows css selector: #table_1 tbody tr
  4. Enter the following script to change line item css when the 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 file to test this method: detail_formatting

Click on the Preview tab to view the detail 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)