Hey
I created huge and complex detail table using template script.
I want to fit this table on section 1 (Some margin)
If this table is too big, I want this table to break and go to next page.
I try to use data-breakable=“” but its not working
Thanks
Which OL Connect version are you using?
Hi @Odyn,
Is the detail table wrapped inside another HTML element like for example another TABLE- or a DIV-element?
I am using Connect version 2020.2.1.9
No, I have just one section like “Invoice” and inside I have only:
<table id="dynamicTableServiceID" class="table--grid"></table>
My script replace table content by this ID id=“dynamicTableServiceID”
Note that Connect cannot split tables inside tables. As you are on 2020.2 you may be interested in the following articles describing the new Insert Dynamic Tables wizard:
Erik
My example is a more complex.
I have details inside main detail.
So main detail is one table and inside of it I have records other details.
Well it does split when doing using Wizard but not when doing using script
Try adding the following attributes: data-detail=“” data-expander=“2019”
<table id="dynamicTableServiceID" class="table--grid" data-detail="" data-expander="2019"></table>
Would also be interesting to see what your <tr> and <td> elements look like. Could you share?
I tried to use this attributes, also data-break attribute and no success.
This is my table in template script:
var field, result = "";
var serviceDetail = record.tables.detailS;
var innerDetails = "";
var serviceCustomerZO, serviceSAPO, serviceNameZO, serviceStreetZO, serviceCityZO, serviceRegionZO;
result += "<tbody>";
for (var i = 0; i < serviceDetail.length; i++)
{
serviceCustomerZO = serviceDetail[i].fields.Customer_ZO;
serviceSAPO = serviceDetail[i].fields.SAPO;
serviceNameZO = serviceDetail[i].fields.Name_ZO;
serviceStreetZO = serviceDetail[i].fields.Street_ZO;
serviceCityZO = serviceDetail[i].fields.City_ZO;
serviceRegionZO = serviceDetail[i].fields.Region_ZO;
result += "<tr>";
result += "<td colspan='6' style='text-align: left;'>"
result += "<span class='serviceHeader'>SERVICE ADDRESS #: </span><span class='Customer_ZO'>"+serviceCustomerZO+"</span>";
result += "</td>"
result += "<td colspan='3' style='text-align: left;'>"
result += "<span class='serviceHeader'>PO #: </span><span class='SAPO'>"+serviceSAPO+"</span>";
result += "</td>"
result += "</tr>";
result += "<tr>";
result += "<td colspan='9' style='text-align: left;'>"
result += "<span class='serviceHeader'>SERVICE ADDRESS: </span><span class='Name_ZO'>"+serviceNameZO+"</span>, <span class='Street_ZO'>"+serviceStreetZO+"</span>, <span class='City_ZO'>"+serviceCityZO+"</span>, <span class='Region_ZO'>"+serviceRegionZO+"</span><br>";
result += "</td>"
result += "</tr>";
result += "<tr class='tabServiceTableDetHeader'>";
result += "<td style='width: 5%;'>"
result += "<span>#</span>";
result += "</td>"
result += "<td style='width: 40%;'>"
result += "<span>DESCRIPTION</span>";
result += "</td>"
result += "<td style='width: 20%;'>"
result += "<span>SERVICE DATE/PERIOD</span>";
result += "</td>"
result += "<td style='width: 5%;'>"
result += "<span>WO#</span>";
result += "</td>"
result += "<td style='width: 5%;'>"
result += "<span>QTY</span>";
result += "</td>"
result += "<td style='width: 5%;'>"
result += "<span>UNIT</span>";
result += "</td>"
result += "<td style='width: 5%;'>"
result += "<span>RATE</span>";
result += "</td>"
result += "<td style='width: 10%;'>"
result += "<span>AMOUNT</span>";
result += "</td>"
result += "<td style='width: 5%;'>"
result += "<span>*</span>";
result += "</td>"
result += "</tr>";
innerDetails = serviceDetail[i].tables.detailDetails;
for (var j = 0; j < innerDetails.length; j++)
{
var indicator = innerDetails[j].fields.Indicator;
var numItem = innerDetails[j].fields.LineItem;
var description = innerDetails[j].fields.ServiceDescription;
var containerLocation = innerDetails[j].fields.ContainerLocation;
var settDateA = innerDetails[j].fields.A_SettDate;
var settDateB = innerDetails[j].fields.B_SettDate;
var singleServiceDate = innerDetails[j].fields.SrvDr1T;
var woNumber = innerDetails[j].fields.WR1WorkOrderNumber;
var targetQTY = innerDetails[j].fields.TargetQty;
var targetUnit = innerDetails[j].fields.Salesunit;
var targetRate = innerDetails[j].fields.Rate;
var netAmount = innerDetails[j].fields.Net;
var dcIndicator = innerDetails[j].fields.DCIndic;
var noChargePerContract = innerDetails[j].fields.NoChargePerContract;
var tax = innerDetails[j].fields.Tax;
// extract additional fields for extended detail line
var woInteractions = innerDetails[j].fields.WorkOrderInteractions;
var woPoNum = innerDetails[j].fields.WOPO;
var scTicNum = innerDetails[j].fields.ScTicNo;
var scaleTTime = innerDetails[j].fields.ScaleTTim;
var truckNum = innerDetails[j].fields.TruckNo;
// DP fields
var serviceDescription = innerDetails[j].fields.ServiceDescription;
var slsUnDs = innerDetails[j].fields.SlsUnDs;
var serviceRate = innerDetails[j].fields.Rate;
var seriviceNet = innerDetails[j].fields.Net;
var seriviceDCIndicator = innerDetails[j].fields.DCIndic;
// if dcIndicator == "H" add double quotes around net amount for DP also
var finalserviceNetAmount = "";
if(seriviceDCIndicator == "H")
{
finalserviceNetAmount = '"' + seriviceNet + '"';
}
else
{
finalserviceNetAmount = seriviceNet;
}
// here we have special logic implemented for Service Date column
// if this is monthly service (settDateA != "" && settDateB != "") then display both date fields
// else its single service then display just one date
var serviceDate = "";
if(settDateA != "" && settDateB != "")
{
serviceDate = settDateA +"-"+ settDateB;
}
else
{
serviceDate = singleServiceDate;
}
// if dcIndicator == "H" add double quotes around net amount
var finalNetAmount = "";
if(dcIndicator == "H")
{
finalNetAmount = '"' + netAmount + '"';
}
else
{
finalNetAmount = netAmount;
}
var asterisks = "";
// additional logic for asterisks creation
// set ** if chargPerContrct = "Y" or tax amount < 0 value
if(noChargePerContract.toUpperCase() == "Y" || tax < 0)
{
asterisks = "**";
}
else
{
asterisks = "*";
}
result += "<tr class='detailRecord'>";
// if record indicator = "DH" then display other record mapping with continer location and other styling
if(indicator == "DH")
{
result += "<td class='containerRow' colspan='9' style='width: 100%;'>"+containerLocation+"</td>"
}
else if(indicator == "DP")
{
result += "<td class='detailPricingContainer' id='dp1ID' style='width: 6.38%;'></td>";
result += "<td class='detailPricingContainer' id='dp2ID' style='width: 26.38%;'>"+serviceDescription+"</td>";
result += "<td class='detailPricingContainer' id='dp3ID' style='width: 11.24%;'></td>";
result += "<td class='detailPricingContainer' id='dp4ID'style='width: 12.58%;'></td>";
result += "<td class='detailPricingContainer' id='dp5ID'style='width: 14.99%;'></td>";
result += "<td class='detailPricingContainer' id='dp6ID'style='width: 10.17%;'>"+slsUnDs+"</td>";
result += "<td class='detailPricingContainer' id='dp7ID'style='width: 8.84%;'></td>";
result += "<td class='detailPricingContainer' id='dp8ID' style='width: 8.84%;'>"+serviceRate+"</td>";
result += "<td class='detailPricingContainer' id='dp9ID' style='width: 8.84%;'>"+finalserviceNetAmount+"</td>";
}
else
{
result += "<td class='detailRow' id='detNumItemID' style='width: 6.38%;'>"+numItem+"</td>";
result += "<td class='detailRow' id='detDescID' style='width: 26.38%;'>"+description+"</td>";
result += "<td class='detailRow' id='detServDateID' style='width: 11.24%;'>"+serviceDate+"</td>";
result += "<td class='detailRow' id='detWoNumID' style='width: 12.58%;'>"+woNumber+"</td>";
result += "<td class='detailRow' id='detQtyID' style='width: 14.99%;'>"+targetQTY+"</td>";
result += "<td class='detailRow' id='detUnitID'style='width: 10.17%;'>"+targetUnit+"</td>";
result += "<td class='detailRow' id='detRateID' style='width: 8.84%;'>"+targetRate+"</td>";
result += "<td class='detailRow' id='detNetAmountID' style='width: 8.84%;'>"+finalNetAmount+"</td>";
result += "<td class='detailRow' id='detAsteriskID' style='width: 8.84%;'>"+asterisks+"</td>";
}
result += "</tr>";
}
// do not remove this record, this is separator empty row between service tables
result += "<tr class='separatorRow'>";
result += "<td class='separatorCell' colspan='9'></td>"
result += "</tr>";
}
result += "</tbody>";
results.html(result);
Inside section I have just
with ID selector.Thats it
What happens when you only add the following attribute to the table element: data-detail=“detailS”
<table id="dynamicTableServiceID" class="table--grid" data-detail="detailS"></table>
When I do this, the table will start always from third page, not from first Invoice page
Hi @Odyn,
You’re still facing the same issue when you add the attribute data-expander="2019" to your TABLE-element and at the attribute data-breakable=""' to each TR-element, or only the attribute data-breakable=""?
Still the same issue, table dont want to break on first page zone.
Well i just want to understand why, but currently work around this using current data table wizard.
The Selector of your Standard Script is a TABLE-element which hasn’t been wrapped inside another HTML element, isn’t it?
Unfortunately I wasn’t able to test it yet in version 2020.2.1, but the following HTML and JavaScript code did result in a Table which has been spread out over multiple pages, in version 2021.1.1 of PReS Connect:
Print Context Section > Source:
<table id="custom-table" data-expander="2019" cellpadding="0" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td>Hello World!</td>
</tr>
</tbody>
</table>
Standard Script:
Selector: table#custom-table
var result = "";
result += "<tbody>";
for (var i = 0; i < 100; i++) {
result += "<tr data-breakable=\"\">";
result += "<td>Hello World! (" + i + ")</td>";
result += "</tr>";
}
result += "</tbody>";
results.html(result);
But You are producing 100 records for 1 dynamic table.
I have multiple details tables which have multiple detail records inside.
Can you please share a part of your HTML code to which you’re adding the TBODY-element by the shared JavaScript code?
Quickly looked at the template you provided. I believe things work as expected when you add the data-breakable attribute to all <tr> elements in your script.
Erik
I do not try to add this to all elements but maybe this is a case.
Thanks
Erik
I am sorry but this solution also do not work in my case.
This is my template script with data-breakable attributes inside all
var field, result = "";
var serviceDetail = record.tables.detailS;
var innerDetails = "";
var serviceCustomerZO, serviceSAPO, serviceNameZO, serviceStreetZO, serviceCityZO, serviceRegionZO;
result += "<tbody>";
for (var i = 0; i < serviceDetail.length; i++)
{
serviceCustomerZO = serviceDetail[i].fields.Customer_ZO;
serviceSAPO = serviceDetail[i].fields.SAPO;
serviceNameZO = serviceDetail[i].fields.Name_ZO;
serviceStreetZO = serviceDetail[i].fields.Street_ZO;
serviceCityZO = serviceDetail[i].fields.City_ZO;
serviceRegionZO = serviceDetail[i].fields.Region_ZO;
result += "<tr data-breakable=''>";
result += "<td colspan='6' style='text-align: left;'>"
result += "<span class='serviceHeader'>SERVICE ADDRESS #: </span><span class='Customer_ZO'>"+serviceCustomerZO+"</span>";
result += "</td>"
result += "<td colspan='3' style='text-align: left;'>"
result += "<span class='serviceHeader'>PO #: </span><span class='SAPO'>"+serviceSAPO+"</span>";
result += "</td>"
result += "</tr>";
result += "<tr data-breakable=''>";
result += "<td colspan='9' style='text-align: left;'>"
result += "<span class='serviceHeader'>SERVICE ADDRESS: </span><span class='Name_ZO'>"+serviceNameZO+"</span>, <span class='Street_ZO'>"+serviceStreetZO+"</span>, <span class='City_ZO'>"+serviceCityZO+"</span>, <span class='Region_ZO'>"+serviceRegionZO+"</span><br>";
result += "</td>"
result += "</tr>";
result += "<tr class='tabServiceTableDetHeader' data-breakable=''>";
result += "<td style='width: 5%;'>"
result += "<span>#</span>";
result += "</td>"
result += "<td style='width: 40%;'>"
result += "<span>DESCRIPTION</span>";
result += "</td>"
result += "<td style='width: 20%;'>"
result += "<span>SERVICE DATE/PERIOD</span>";
result += "</td>"
result += "<td style='width: 5%;'>"
result += "<span>WO#</span>";
result += "</td>"
result += "<td style='width: 5%;'>"
result += "<span>QTY</span>";
result += "</td>"
result += "<td style='width: 5%;'>"
result += "<span>UNIT</span>";
result += "</td>"
result += "<td style='width: 5%;'>"
result += "<span>RATE</span>";
result += "</td>"
result += "<td style='width: 10%;'>"
result += "<span>AMOUNT</span>";
result += "</td>"
result += "<td style='width: 5%;'>"
result += "<span>*</span>";
result += "</td>"
result += "</tr>";
innerDetails = serviceDetail[i].tables.detailDetails;
for (var j = 0; j < innerDetails.length; j++)
{
var indicator = innerDetails[j].fields.Indicator;
var numItem = innerDetails[j].fields.LineItem;
var description = innerDetails[j].fields.ServiceDescription;
var containerLocation = innerDetails[j].fields.ContainerLocation;
var settDateA = innerDetails[j].fields.A_SettDate;
var settDateB = innerDetails[j].fields.B_SettDate;
var singleServiceDate = innerDetails[j].fields.SrvDr1T;
var woNumber = innerDetails[j].fields.WR1WorkOrderNumber;
var targetQTY = innerDetails[j].fields.TargetQty;
var targetUnit = innerDetails[j].fields.Salesunit;
var targetRate = innerDetails[j].fields.Rate;
var netAmount = innerDetails[j].fields.Net;
var dcIndicator = innerDetails[j].fields.DCIndic;
var noChargePerContract = innerDetails[j].fields.NoChargePerContract;
var tax = innerDetails[j].fields.Tax;
// extract additional fields for extended detail line
var woInteractions = innerDetails[j].fields.WorkOrderInteractions;
var woPoNum = innerDetails[j].fields.WOPO;
var scTicNum = innerDetails[j].fields.ScTicNo;
var scaleTTime = innerDetails[j].fields.ScaleTTim;
var truckNum = innerDetails[j].fields.TruckNo;
// DP fields
var serviceDescription = innerDetails[j].fields.ServiceDescription;
var slsUnDs = innerDetails[j].fields.SlsUnDs;
var serviceRate = innerDetails[j].fields.Rate;
var seriviceNet = innerDetails[j].fields.Net;
var seriviceDCIndicator = innerDetails[j].fields.DCIndic;
// if dcIndicator == "H" add double quotes around net amount for DP also
var finalserviceNetAmount = "";
if(seriviceDCIndicator == "H")
{
finalserviceNetAmount = '"' + seriviceNet + '"';
}
else
{
finalserviceNetAmount = seriviceNet;
}
// here we have special logic implemented for Service Date column
// if this is monthly service (settDateA != "" && settDateB != "") then display both date fields
// else its single service then display just one date
var serviceDate = "";
if(settDateA != "" && settDateB != "")
{
serviceDate = settDateA +"-"+ settDateB;
}
else
{
serviceDate = singleServiceDate;
}
// if dcIndicator == "H" add double quotes around net amount
var finalNetAmount = "";
if(dcIndicator == "H")
{
finalNetAmount = '"' + netAmount + '"';
}
else
{
finalNetAmount = netAmount;
}
var asterisks = "";
// additional logic for asterisks creation
// set ** if chargPerContrct = "Y" or tax amount < 0 value
if(noChargePerContract.toUpperCase() == "Y" || tax < 0)
{
asterisks = "**";
}
else
{
asterisks = "*";
}
result += "<tr class='detailRecord' data-breakable=''>";
// if record indicator = "DH" then display other record mapping with continer location and other styling
if(indicator == "DH")
{
result += "<td class='containerRow' colspan='9' style='width: 100%;'>"+containerLocation+"</td>"
}
else if(indicator == "DP")
{
result += "<td class='detailPricingContainer' id='dp1ID' style='width: 6.38%;'></td>";
result += "<td class='detailPricingContainer' id='dp2ID' style='width: 26.38%;'>"+serviceDescription+"</td>";
result += "<td class='detailPricingContainer' id='dp3ID' style='width: 11.24%;'></td>";
result += "<td class='detailPricingContainer' id='dp4ID'style='width: 12.58%;'></td>";
result += "<td class='detailPricingContainer' id='dp5ID'style='width: 14.99%;'></td>";
result += "<td class='detailPricingContainer' id='dp6ID'style='width: 10.17%;'>"+slsUnDs+"</td>";
result += "<td class='detailPricingContainer' id='dp7ID'style='width: 8.84%;'></td>";
result += "<td class='detailPricingContainer' id='dp8ID' style='width: 8.84%;'>"+serviceRate+"</td>";
result += "<td class='detailPricingContainer' id='dp9ID' style='width: 8.84%;'>"+finalserviceNetAmount+"</td>";
}
else
{
result += "<td class='detailRow' id='detNumItemID' style='width: 6.38%;'>"+numItem+"</td>";
result += "<td class='detailRow' id='detDescID' style='width: 26.38%;'>"+description+"</td>";
result += "<td class='detailRow' id='detServDateID' style='width: 11.24%;'>"+serviceDate+"</td>";
result += "<td class='detailRow' id='detWoNumID' style='width: 12.58%;'>"+woNumber+"</td>";
result += "<td class='detailRow' id='detQtyID' style='width: 14.99%;'>"+targetQTY+"</td>";
result += "<td class='detailRow' id='detUnitID'style='width: 10.17%;'>"+targetUnit+"</td>";
result += "<td class='detailRow' id='detRateID' style='width: 8.84%;'>"+targetRate+"</td>";
result += "<td class='detailRow' id='detNetAmountID' style='width: 8.84%;'>"+finalNetAmount+"</td>";
result += "<td class='detailRow' id='detAsteriskID' style='width: 8.84%;'>"+asterisks+"</td>";
}
result += "</tr>";
}
// do not remove this record, this is separator empty row between service tables
result += "<tr class='separatorRow' data-breakable=''>";
result += "<td class='separatorCell' colspan='9'></td>"
result += "</tr>";
}
result += "</tbody>";
results.html(result);
And this is what I have inside my section:
<br>
<table id="dynamicTableServiceID" class="table--grid" data-detail="" data-breakable="" data-expander="2019"></table>
I would love to understand why this dont want to break over all pages and do not start from begining of invoice section.
Thats weird but it seems like Your solution did the job 
| Hello World! |
I think this was caused because was missing? I dont know
Now table using script breaks correctly.