Unable to break detail table created by template script

[Erik]

You will need to remove the data-detail, data-breakable and data-expander attributes from the table. The data-expander attributes belongs to the new dynamic table logic. In your case you are doing your own expanding (adding rows to the table via a script). The only attribute you need is the data-breakable attribute on the table rows (there is no need to add a sequence number to this attribute). Data breakable is used by the initial table splitter algorithm to decide where page breaks should happen. This attribute belongs to the original dynamic table logic.

When inserting a table via the Insert Dynamic Table wizard you will get the attributes belonging the new implementation as described in the links I posted in an earlier comment. The goal of the new implementation is to remove scripting required to create dynamic tables based on nested detail data (sub detail records).

Hope this helps,

Erik

[Odyn]

Thank You Erik for all Your help and input

I removed data-* attributes from my table

<br>
<table id="dynamicTableServiceID" class="table-grid" cellpadding="0" cellspacing="0">
    <tbody>
        <!--  <tr>
            <td>Dynamic table placeholder here!</td>
        </tr>-->
    </tbody>
</table>

I found also one more bug inside, there was problem with displaying some records (some kinds of records do not appear on the form)

When i ignored hardocded inside, it starts displaying this correctly.

[Odyn]

I found one more issue with detail table.

When I have a detail table with huge amount of detai lines, this table with some reason goes up (moves up). Its not stuck between master page margins.

Everything is right for example on pages from 1 to 51 but at the end whole overlay is moving up.

Do You know maybe why this happen?
Please help

[Marten]

Hi @Odyn,

I suppose that this is about the same issue as the one you’ve reported via the OL Learn forum post ‘Table overlay floats at the end of multipage invoice’, is that correct?

[edanting]

Hi guys,

Im sorry for necroing the post but didnt want to double post of this similar issue.
Im currently on PresConnect 2022.2

From screenshot below

The green box is the printable area but as you can see the content does not appear to the next page.
The 2nd page is getting created but the content still goes to the bottom. All other content is currently set in the master page, so basically I only have this hello world table generated in the section. I really dont understand why the content does not appear on to the next page? Ive tried what suggested here still no luck.

[edanting]

Im just going to answer this, as I think I have found the issue.

In your content area make sure there is no other content that is competing with the space of where the table is going to be. In my case, it started working when I removed rogue div.

thanks!

[Odyn]

This is what I did long time ago and working fine:

var field, result = "";
var myDetails = record.tables.detailS;
var innerDetails = "";


result += "<tbody>";

for (var i = 0; i < myDetails.length; i++) 
{
	exampleField = myDetails[i].fields.Customer_ZO;
	
   
   result += "<tr class='someClass' data-breakable=\"\">";
		result += "<td style='width: 0.3in !important;'>"
   			result += "<span>COLUMN NAME STRING HEADING</span>";
   		result +=  "</td>"
   result += "</tr>";
   
   innerDetails = myDetails[i].tables.detailDetails;
   
   for (var j = 0; j < innerDetails.length; j++) 
   {
   
   		var descInnerField = innerDetails[j].fields.descInnerField.trim();
	
   		result += "<tr class='detailRecord' data-breakable=\"\">";
   		
			result += "<td class='detailRow' id='someID' style='width: 0.3in !important;'>"+descInnerField+"</td>";
   		result += "</tr>";   		
   }
   innerDetails = "";

}
myDetails = "";

result += "</tbody>";

results.html(result);

Place this inside Standard Script of Your template.

After that inside Your section keep some div with ID or directly to Table.
In my Case I had

and

inside my template section not in script.

Here also You have detail with details inside which cause this more complex a little.

[edanting]

Thank you I got it working.

Maybe it could help others as well with my findings, I have the script window open and every changes I made I would just go hit apply while in preview mode(I like working in preview, as I can see my changes live) I noticed the content still gets printed through the bottom and a second page gets created but no continuing content there.

But when I closed out of the script window, I go to “design” mode and switch back to “preview” mode. It works! So I go to the script window again to add more content and styling. I hit apply while in preview mode, and suddenly it stopped working.

I thought that was weird, so I closed the script window, changed design and back to preview again. And it works.

My take away from this and noticed this while working in design vs preview mode. Some quirkiness/bug happening there.

Maybe dynamic content works differently when in preview mode applying the changes to your script versus doing it in design mode and changing to preview.

Anyways thanks again for this post.

[Sander]

If you can describe what stopped working and provide a step-by-step to reproduce the issue, I would be happy to look into it.

[edanting]

Hi Sander,

If you like to investigate this “bug/quirkiness”, Im happy to walk you through it

Basically I have a template that print charge lines and if it goes beyond the boundary of the bottom margin, it creates a new page and so forth. Very basic for overflow stuff.

Below is the screenshot in preview mode, at the moment as you can see the custom html table is breaking the page correctly. But as soon as I edit my script, then hit apply (while in preview mode) …

As you can see here it, the only change I made is add a space before </tbody> in the script.

I rely on preview, to see if my script is really working. But if I close down my script window now, and go to design mode, then switch back to preview. It all looks normal and correct again.

This simple quirk like this, while working on my script for hours made me think my script isnt working, hence I came to this post about overflow. When in reality it does work.

Also another thing I noticed too, in my source all I have is this:

but when I add additional content , the overflow fails. So even as simple as adding a space

And I noticed too. If I rebirth it back and remove the space to make it working again. Switch to preview mode, then jump straight to source mode

It automatically adds a <br>

Although there maybe a reason for that, but the designer seems bit quirky that way

There is also a case of adding <tfoot><tr data-show-row=""><td>Continued - 2</td></tr></tfoot> in my custom html table. That does not work as it only display at the end of the page no matter what value I give it all , before-break or after-break. But since I couldnt get this to work, I just had to rely on the pagination script to create this, which I think works.

Anyways thank you

[Sander]

Hi @edanting,

The problem is that table breaking won’t work properly if the table is inside a span.

For a search-and-replace query like @chargesTable@ we add a span under the hood if the text we’re trying to find is not completely enclosed within an element. We do this because a query result can only consist of elements, it cannot consist of ranges in text nodes.

This is the reason why table breaking fails after adding a space next to @chargesTable@. The DOM in preview mode then looks like this:

<body><span>(table here)</span> </body>

Something similar happens if you click Apply when editing a script in preview mode. If the DOM only consists of a table and nothing else, the internal browser automatically adds a br at the end to facilitate editing. The text we’re trying to find is then no longer completely enclosed within body, we add a span, and table breaking fails. I’m afraid we have no control over this particular browser behavior.

One possible workaround would be to change your DOM to:

<span>@chargesTable@</span>

and instead of results.html(tbl) do results.replaceWith(tbl) so that the span is replaced by the table.

Alternatively, change the last line of your script to:

query("body").html(tbl);

[edanting]

Hi Sander,

I see, that is what its doing under the hood. <span>@chargesTable@</span> this works with results.replaceWith(tbl).

Thank you for taking the time, will keep this in mind for future reference. As I cant just @selector@ but needs to be wrapped in an element and use results.replaceWith(content) for table breaking.

Cheers