OL Learn

Table overflow using script

Hi all,

A JavaScript novice is in need of direction.

I know table overflows have been covered before on here and I’ve used those posts to start me off. But I’ve hit a brick wall and need a wisened hand to wave me in the right direction.

I’m using script to create the effect of a detailed table using the table#custom-table selector.

The data is not in a detailed table, I am using csv records and the fields involved stretch to 300+. I have used the data-breakable attribute as some records need to span multiple pages.

The table layout works great until the overflow kicks in. When I produce PDF’s of the output, records with one page appear fine. Any page that overflows after an initial overflowing page duplicates the data of the first overflowing page.

I have included my script below as I’m sure this is causing the issue.
Any help will be most appreciated.

var result, lineitem, lineVAT, lineAMT = “”;

result += “

”;

for (var i = 1; i < 105; i++) {

lineitem = record.fields["Line_item"+i];
lineVAT = record.fields["Line_item_VAT"+i];
lineAMT = record.fields["Line_item_AMT"+i];

result += "<tr data-breakable=\"\">";
result += "<td style=\"width: 64.76%; height: 0mm; vertical-align: top;\">";
result += "<span style=\"font-size: 12pt; color: Black;\">" + lineitem + "</span>";
result += "</td>";

result += "<td style=\"width: 17.27%; vertical-align: top; text-align: center;\">";
result += "<span style=\"font-size: 12pt;\">" + lineVAT + "</span>";
result += "</td>";

result += "<td style=\"width: 17.97%; vertical-align: top; text-align: center;\">";
result += "<span style=\"font-size: 12pt;\">" + lineAMT + "</span>";
result += "</td>";
result += "</tr>";

}

result += “

”;

results.html(result);

Hi @SCCDav,

Can you let us know please if your selector is table#custom-table or table#custom-table tbody? Based on the shared JavaScript code I suppose that it is the last one, is that correct?

Can you also please share the source code of your table#custom-table table element?

Thanks for looking at this Marten,

My selector is table#custom-table

Apologies, tbody is included in my script and it seems it was omitted from the original post.

My original source code is:

<table id="custom-table" data-column-resize="" cellpadding="0" cellspacing="0" style="width: 100%; margin-top: 0mm; page-break-before: avoid;">
<tbody>
    <tr>
        <td style="width: 64.76%; height: 0mm; vertical-align: top;">
            <span style="font-size: 12pt; color: Black;">@LineItem@</span>
        </td>
        <td style="width: 17.27%; vertical-align: top; text-align: center;">
            <span style="font-size: 12pt;">@LineItemVAT@</span>
        </td>
        <td style="width: 17.97%; vertical-align: top; text-align: center;">
            <span style="font-size: 12pt;">@LineItemAMT@</span>
        </td>
    </tr>
</tbody>

Hi @SCCDav,

Can you let us know please which version of the PReS Connect Designer you are using? You can find this via: PReS Connect Designer > Help > About PReS Connect Designer. The reason why I am asking you this is because I cannot reproduce the issue in version 2021.1.1 of the PReS Connect Designer when I use the shared HTML and JavaScript code in a new Print Template.

I assume that the table-element isn’t wrapped in another HTML element like for example a Positioned Box (an absolute positioned div-element)?

Thanks @Marten.

We are running 2021.1.1

You are correct. The table-element isn’t wrapped in another element.

Could this be related to the fix mentioned in the 2021.2 release notes?

• Fixed an issue where detail table data from a previous run/record showing up in the next run/record, when a scripted table was included that did not use the standard table expander.

Believe you only need to add the data-detail attribute to your table.

I created a slightly different script, which in my opinion simplifies maintenance. It copies the row from the table and uses the JS replace() method to inject data. This way there is no need to replicate the HTML in your script.

<table id="custom-table" data-detail="" style="width: 100%">
<tbody>
    <tr data-breakable="">
        <td style="width: 64.76%; height: 0mm; vertical-align: top;">
            <span style="font-size: 12pt; color: Black;">@LineItem@</span>
        </td>
        <td style="width: 17.27%; vertical-align: top; text-align: center;">
            <span style="font-size: 12pt;">@LineItemVAT@</span>
        </td>
        <td style="width: 17.97%; vertical-align: top; text-align: center;">
            <span style="font-size: 12pt;">@LineItemAMT@</span>
        </td>
    </tr>
</tbody>

With the following script (simplified version):
Selector:

var htmlStr = "";

// Copy the row from the table.
// This is the base for our dynamically added rows.
var baseRow = query('tr', results);

// Loop your data here.
for (var i = 1; i <= 29; i++) {

	// Clone the row to a string, we are going to use replace() to inject data.
	let tableRow  = baseRow.clone().toString(); 
	
	// Replace the markers.
	let lineItem = 'item' + i;
	let lineVAT = 'vat' + i;
	let lineAMT = 'amt' + i;
	tableRow = tableRow.replace('@LineItem@', lineItem);
	tableRow = tableRow.replace('@LineItemVAT@', lineVAT );
	tableRow = tableRow.replace('@LineItemAMT@', lineAMT );
	
	// Append the personalized string to the HTML string.
	htmlStr += tableRow;
	
}

results.html(htmlStr);

Hope this helps,

Erik

Brilliant!

Come back from annual leave to find that not only has my query been answered, but my code optimised, and knowledge of JavaScript expanded.

Works perfectly.

Really appreciate your help and input @Erik and @Marten.

Continually impressed by the support and helpfulness of this forum.

Much obliged.

3 Likes