Hi, Currently, I am working on a template which will display the dynamic table on top and bottom part of the page. I was able to create the top dynamic table by setting the header and footer of the master page and by using this method if the number of record won’t fit on the first table, then it will continue on the other page. The problem is that I can’t replicate this on the bottom table since I can only set one header and footer per master page. Is there a way I can achieve it? I tried position box but there is a problem if it will contains two or more pages. One more thing, the dynamic table on top is just the same on the dynamic table on the bottom part. Thanks.
Can you let us know please if you do have an example – some screenshots or a PDF output file, for example – of how the result should look like and, if so, can you please share this example with us?
It should like this.
So basically, these two table is the same. The record should only go inside the box and if it does not fit, the next record will be on the second page on the same location. I fixed the top table by adding header and footer on the master pages but I can’t do it the same way on the bottom one.
Hi gdejesus,
I had OL help me with this years ago. Perhaps it will suit your needs.
First create a 12 or more blank page PDF and use it as the background of your section. Set Page(s) 1 to 1 in section background properties, Absolute, 0mm, 0mm, 100%.
- Set your Master page header and footer to where you want your first table. Then insert your first dynamic table.
- Now insert the table again after element first table name.
- Right click the second table and from the context menu select Convert to Absolute.
- You can drag the table, that is now in a div, to wherever you want it to be. (Keep in mind that the overflow only works because the table is restricted to 8 rows in the scripts below.)
- Right click the second table and from the context menu select Table->Select.
- In the attributes pane uncheck boxes Expand table and Hide when empty.
- In the second table change the field name placeholders in each column so they are not the same names as the first table. Note that these name are used in the clone script below.
- Note that the second table has an ID of table2 in the clone script below.
- Add a Control script to your templates Scripts pane and add the following code.
var printSections = merge.template.contexts.PRINT.sections;
var bg = printSections["Section 1"].background;
bg.allPages = false;
bg.start = 1;
var numpages = Math.ceil(record.tables.detail.length / 8);
bg.end = numpages;- Add a Standard script to your template, give it the ID of your table (mine was #table2) in the Selector box and add the following code.
if(record.tables.detail){
results.show();
}else{
results.hide();
}- Add another Standard script, under the script above, and add the following code. The Selector of this script is body.
var $table = query('#table2');
var x = 0;
var numpages = Math.ceil(record.tables.detail.length / 8);
for (let i = 0; i < numpages; i++){
var $baseTable = $table.clone();
$baseTable.attr('id','table2_' + i);
$baseTable.attr('anchor','page_media_' + i);
var $body = query('tbody', $baseTable);
var $baseRow = query('tr', $body);
$body.html('');
var rowsStr = "";
for (let y = 0; y < 8; y++){
if (x != record.tables.detail.length){
var rowStr = $baseRow.clone().toString();
rowStr = rowStr.replace('@Number@', record.tables.detail[x].fields.ItemNumber);
rowStr = rowStr.replace('@Desc@', record.tables.detail[x].fields.ItemDesc);
rowStr = rowStr.replace('@UnitPrice@', record.tables.detail[x].fields.ItemUnitPrice);
rowStr = rowStr.replace('@Ordered@', record.tables.detail[x].fields.ItemOrdered);
rowStr = rowStr.replace('@Shipped@', record.tables.detail[x].fields.ItemShipped);
rowStr = rowStr.replace('@BO@', record.tables.detail[x].fields.ItemBO);
rowStr = rowStr.replace('@Total@', record.tables.detail[x].fields.ItemTotal);
rowsStr += rowStr;
x++;
}
}
$body.html(rowsStr);
results.append($baseTable);
}
$table.hide();You will have to change the script above to use your table name, ID, column text placeholders (that you would have renamed in the steps above) and field names.
This allows you to have overflow with two dynamic tables.
Regards,
S
Hi, Thanks for the reply, I tried following the instruction but when I check preview mode, there is no output on the second table. I even renamed my second table #table2 so that I won’t need to change anything except for the column text placeholders and fieldnames.
Hi gdejesus,
Here is my mapper and template. I will re-read my first reply and see if I skipped a step.
Double Overflow.zip (35.7 KB)
Regards,
S
I don’t see any steps missing in my first post. Take a look at the template I linked above and see if you can spot an error in your template. If you are still having issues, then perhaps you should post your code with the selectors for each script.
If my template does not work for you, then perhaps it’s a Connect version issue, but I doubt that unless you are running a very old version of Connect.
Regards,
S
Thank you for sharing your template, I found out the mistakes on my script. I thought the selector I need is for tbody. It is just body so that is why there was no output that I can generate. It is working properly now but I have one more issue, my template is duplex. I will be needing to overflow it on the front page only.
Now that one is tricky. I see the setting in “Sheet Config->Allow content on: Front Only” is ignored when using a cloned table in a div. Pity we can’t put detail tables on a master page. (I actually tried it for science and the table gets a little garbled, but the duplex works.)
I will do a little digging when I get a chance. Perhaps the OL gurus here might have an idea.
Regards,
S
Hi @Sharne,
I see the setting in “Sheet Config->Allow content on: Front Only” is ignored when using a cloned table in a div
If every other page (i.e. each backside) needs to be empty, instead of
$baseTable.attr('anchor','page_media_' + i);
your script should do:
$baseTable.attr('anchor','page_media_' + i * 2);
1 Like
Looking at the scripts in the Double Table Overflow template I figured there has to be a more elegant way to do this. I tweaked the template somewhat:
Double Table Overflow - mod.OL-template (23.7 KB)
The only relevant script is now the following post pagination script:
results.each(function() {
const clone = this.clone()
clone.css({
position: "absolute",
bottom: merge.section.margins.bottom,
left: merge.section.margins.left,
right: merge.section.margins.right,
width: "auto"
})
// Move to the corresponding master container
const masterIndex = (this.info().pageNo - 1) / 2
const container = query(".page-container")[masterIndex]
if (container != null) container.append(clone)
})
I decided to move each cloned table to the corresponding master container because it helps with positioning. If we add the cloned table to the section flow it will push down the other content.
Hi guys, It is now working for me. I`ll be trying some more testing but so far it looks good. Thanks everyone for helping me. I really appreciate it.
“*2” I’m dying 
Sander. So obvious. I will be sure to check out your other solution. Thanks.
Regards,
S
Hi, Thanks again for this. This is the solution that worked for me. I just have additional question. Can I add condition on rowStr? Where I can hide the field if it is equal to zero? I have been trying it but it seems it is ignoring the condtion. Also, I just noticed something that when I tried testing it for 50+ pages, the designer becomes unresponsive… and after couple of minutes/hours. it is returning an error NS_ERROR_FAILURE but when I proof print it on designer mode it generates the correct output.
Thanks in advance.
Also, I tried recreating the template using this new method you propose, but it is not displaying any output when I tried to replicate it. I think I can use this method and easily apply conditions on fields but as you can see I don’t have output. Also, how can I move the clone table on my preferred location?
Thanks…
Hi @gdejesus,
I should have explained this better, sorry. The post pagination script in my template relies on a container element with the class “page-container”. This is not something that is readily available, I added that myself.
Open the master page in the template I attached and click somewhere in the middle. Notice there is a div that covers the page with the class “page-container”. You could also switch to the Source tab to see it more clearly. If your master page doesn’t have that element you will not see the cloned table.
You can recreate that div in your own template as follows, in the master page editor:
- Insert Positioned Box
- Resize the box to cover the page (it should automatically snap to the page edges)
- In the Attributes panel, add the class “page-container”
Thank you very much, I tried it and it worked for me. The only problem is that the cloned table is not in the place I want it to be. How can we set the position of the cloned table correctly? I tried resizing the container but it does not work. Also, it seems that when I change record, the td size is not the same with the original table…
I tried both of these things in the template I attached, but I can’t reproduce what you’re seeing. Resizing the container changes the position of the cloned tables, and navigating to a different record doesn’t change the td sizes.
There must be something in your template that I’m not aware of. If you can attach a simplified template that shows these issues (anonymized) I can take a look.
