Three tables on one page, 10 rows each, multi-page

OL Connect Professional
1

edit: Version 2024.1.2.21227

i have a working solution in principle – but something is not right and I cannot figure out what it is: me, the way I solved it or connect

Situation
Data: We have records (customers) each with three detail tables (numbers and dates).
(Print)-Context: on the media is room for all three tables but only for a maximum of 10 rows. if any table has more than 10 rows, we will need another page.

Solution

  1. Check how many pages we need and clone the print context – works fine
var printSections = merge.template.contexts.PRINT.sections;

if (printSections["myContext 1"].enabled) {
	var iPagesL = record.tables.ZertJ0 ? Math.ceil(record.tables.ZertJ0.length / 10) : 0;
	var iPagesJ1 = record.tables.ZertJ1 ? Math.ceil(record.tables.ZertJ1.length / 10) : 0;
	var iPagesJ2 = record.tables.ZertJ2 ? Math.ceil(record.tables.ZertJ2.length / 10) : 0;
	var pages = Math.max(iPagesL, iPagesJ1, iPagesJ2)	
	if (pages > 1) {
		for (var i = 2; i <= pages; i++) {
			var clone = printSections["myContext 1"].clone();
			clone.name = " myContext " + i.toString();
			printSections["myContext 1"].addAfter(clone);
		}
	}
}
  1. put the three tables in the source
<br>
<div anchor="page_media_0"
style="position: absolute; overflow: visible; box-sizing: border-box; width: 274px; height: 124px; top: 161.983px; left: 230.283px;" offset-x="230.283" offset-y="161.983">
    <table id="table_J0" data-detail="" style="font-family: Arial Narrow; font-size: 6.5pt; letter-spacing:-0.00em; width :100%">
        <tbody>
            <tr style="line-height: 6px;">
                <td style="text-align: left; width: 16%;">@Num0@</td> 
                <td style="text-align: left; width: 33%;">@Span@</td> 
                <td style="text-align: left; width: 23%;">@An@</td> 
                <td style="text-align: left; width: 28%;">@Ab@</td> 
            </tr>
        </tbody>
    </table>
</div>
<br>
<br>
<div contenteditable="true" anchor="page_media_0"
style="position: absolute; overflow: visible; box-sizing: border-box; width: 133px; height: 116px; top: 161.983px; left: 502.647px;" offset-x="502.647" offset-y="161.983">
    <table id="table_J1" data-detail="" style="font-family: Arial Narrow; font-size: 6.5pt; letter-spacing:0.00em; width :100%">
        <tbody>
            <tr style="line-height: 6px;">
                <td style="text-align: left; width: 35%;">@Num1@</td> 
                <td style="text-align: left; width: 65%;">@Span@</td> 
            </tr>
        </tbody>
    </table>
</div>
<br>
<br>
<div contenteditable="true" anchor="page_media_0"
style="position: absolute; overflow: visible; box-sizing: border-box; width: 133px; height: 116px; top: 161.983px; left: 646.677px;" offset-x="646.6772" offset-y="161.983">
    <table id="table_J2" data-detail="" style="font-family: Arial Narrow; font-size: 6.5pt; letter-spacing:0.00em; width :100%">
        <tbody>
            <tr style="line-height: 6px;">
                <td style="text-align: left; width: 35%;">@Num2@</td> 
                <td style="text-align: left; width: 65%;">@Span@</td> 
            </tr>
        </tbody>
    </table>
</div>
<br>
  1. Standard Scripts to fill each of the tables according to the page we are on – the scripts are basically the same for each table. For example, for selector #table_j1 and scope resultset:
var htmlStr = "";

var numOfElements = 10;

// on which page are we?
var currSection = parseInt(merge.section.name.slice(-1));

if (record.tables.ZertJ1 && currSection) {

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

	// Loop your data here.
	var start = numOfElements * (currSection - 1);
	var end = ((numOfElements * currSection) >= record.tables.ZertJ1.length) ? record.tables.ZertJ1.length : (numOfElements * currSection);
	for (var i = start; i < end; 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 nummer = record.tables.ZertJ1[i].fields.lp1
		tableRow = tableRow.replace(/@num1@/g, losnummer.replace(/\B(?=(\d{3})+(?!\d))/g, "."));
		tableRow = tableRow.replace(/@span@/g, record.tables.ZertJ1[i].fields.lpSpan);		
		
		// Append the personalized string to the HTML string.
		htmlStr += tableRow;
	}
}
results.html(htmlStr);

That’s it. It does work for one page. And it works for multi page except for the table_j1 which adds the correct rows multiple times, although logging shows that “htmlStr” has the correct number of lines.

Example: table0 has 4 rows, table1 has 23 row, table2 has 28 rows → 3 pages

example.pdf (15.3 KB) edit 2:-> on page 1 everything is ok, on page 2 the middle table (j1) repeats itself after 10 rows, on page 3 the middle table (j1) repeats itself (2 times) after the last 3 rows

I hope you can follow? If it is too complex, I will try it with support. But I like the forum to talk about these things. I have most of those ideas from here :blush:

2

The same issue also occurs when you remove the attribute-value data-detail="" from the <table>-element(s) that will be populated with data by a Standard Script? If yes, would you be able to also share the Template (from which the sensitive information has been removed)?

3

Yes, it is the same when I remove data-detail="" from the tables. But:

When I stripped the template of all other information (contexts, scripts,…), i realized it worked as expected. And I think I found the issue.

I have another similar context which has the same table (J1) with the same id and the same standard-script as a selector. But because the other context is disabled and the script is in a folder which is not activated for the current context, I was sure, it could not interfere (can it?). But it seems it can interfere, because when I change the selector name and table id everything works as expected.

So, thank you for pushing me on the right path.

1 Like