Variable Columns in Detail Table

OL Connect Professional Designer
1

I have a detail table set up with 9 columns for 9 of the fields in the detail table. Occasionally, there are note lines in the data that I have extracted into a different field in the detail table. When that variable in not equal to nothing, I would like that note field to span the entire length of the table so that the note lines are not broken up into columns.

How would I go about doing that?

I have attached a screen shot.

2

You would need to add a conditionnnal TR. It will contains a single TD containing your field (note field).

You will apply the colspan attribute to your TD.

Ex:

<tr>
<td colspan=“9”>@noteField@</td>
</tr>

This way, that TD will span accross all 9 field from previous TR.

3

Thank you for the reply. I do know how to do a colspan, it is the conditional TR that I do not know how to write out for a detail table in Connect.

Can you help with that?

4

In your “Outline” tab, right-click on your TR and select “Make conditionnal”.

5

Here is a way to achieve things:

    1. Assign the respective table cell a css class (.e.g. <td class=“note”></td>)
    1. Create a new script in the Scripts panel and set it selector to something like this:
      #mytable tbody td.note
    1. Create a script that iterates over the result set
    1. Populate the table cell with data from the respective data field.
    1. Create a condition in this loop to set the ‘colspan’ attribute. Subsequently remove the remaining columns. The easiest solution I found was querying for the respective table cell using the nth-child selector in the parent of the current of the table cell (e.g. within the row of the current table cell).

Below a sample script. Hope this is of some help,

Erik

// iterate over the result set
results.each(function(index) {

  // populate our table cell
  var description = record.tables["detail"][index].fields["ItemDesc"];
  this.html( description );
  
  // some condition, in this check the value of a different data field.
  var shipped = record.tables["detail"][index].fields["ItemShipped"];
  if( shipped > 10 ) {
    this.attr('colspan', 4);
    this.css('font-weight', 'bold');
    query('td:nth-child(2)', this.parent()).remove();
    query('td:nth-child(3)', this.parent()).remove();
    query('td:nth-child(4)', this.parent()).remove();
  }

});