OL Learn

Repeat table header if there are more details then we can fit on page

@hamelj this is acctual table:

<p>
    <br>
</p>
<table id="table" class="table--grid" data-column-resize="" data-detail="" data-hide-when-empty="" cellpadding="0"
cellspacing="0" style="width :100%; table-layout: fixed !important;" data-expander="2019">
    <thead>
    </thead>
    <tbody>
        <!-- Service header rows -->
        <tr class="serviceMainRow" data-show-row="all" data-repeat="detailS">
            <td class="serviceRow" colspan="1" style="width: 72.66%;">
                <span class="serviceHeader" style="padding-left: 10px;">SERVICE ADDRESS #: </span><span class="Customer_ZO" data-field="Customer_ZO">@Customer_ZO@</span>
            </td>
            <td class="serviceRow" colspan="8">
                <span class="serviceHeader" style="padding-left: 10px;">PO #: </span><span class="SAPO" data-field="SAPO">@SAPO@</span>
            </td>
        </tr>
        <tr class="serviceMainRow" data-show-row="all" data-repeat="detailS">
            <td class="serviceRow" colspan="9" style="text-align: left;">
                <span class="serviceHeader" style="padding-left: 10px;">SERVICE ADDRESS: </span><span class="Name_ZO" data-field="Name_ZO">@Name_ZO@</span>, <span class="Street_ZO" data-field="Street_ZO">@Street_ZO@</span>, <span class="City_ZO" data-field="City_ZO">@City_ZO@</span>,<span class="Region_ZO" data-field="Region_ZO">@Region_ZO@</span><span class="Postal_ZO" data-field="Pst_Cd_ZO">@Pst_Cd_ZO@</span><span class="Country_ZO" data-field="Country_ZO">@Country_ZO@</span>
            </td>
        </tr>
        <tr class="tabServiceTableDetHeader" data-show-row="all" data-repeat="detailS">
            <td><span>REF#</span></td>
            <td style="width: 4.06%;"><span>DESCRIPTION</span></td>
            <td style="width: 4.06%;"><span>SERVICE DATE/PERIOD</span></td>
            <td style="width: 4.06%;"><span>WO#</span></td>
            <td style="width: 4.06%;"><span>QTY</span></td>
            <td style="width: 4.06%;"><span>UNIT</span></td>
            <td style="width: 4.06%;"><span>RATE</span></td>
            <td style="width: 4.06%;"><span>AMOUNT</span></td>
            <td style="width: 4.06%;"><span>&nbsp;</span></td>
        </tr>
        <!-- END Service header rows -->
        <tr class="RecordD" data-repeat="detailS.detailDetails">
            <td style="text-align: left;" data-field="Indicator">@Indicator@</td>
            <td style="text-align: left;" data-field="Currency">@Currency@</td>
            <td style="text-align: left;" data-field="Distchl">@Distchl@</td>
            <td style="text-align: left;" data-field="InvMaint">@InvMaint@</td>
            <td colspan="5" style="text-align: left;" data-field="NetDueDate">@NetDueDate@</td>
        </tr>
        <tr class="RecordDH" data-repeat="detailS.detailDetails">
            <td style="text-align: left;" data-field="Indicator">@Indicator@</td>
            <td colspan="8" style="text-align: left;" data-field="ContainerLocation">@ContainerLocation@</td>
        </tr>
        <tr class="RecordDP" data-repeat="detailS.detailDetails">
            <td colspan="7" style="text-align: left;" data-field="Indicator">@Indicator@</td>
            <td style="text-align: left;" data-field="Currency">@Currency@</td>
            <td style="text-align: left;" data-field="Distchl">@Distchl@</td>
        </tr>
        <tr class="separatorRow" data-repeat="detailS">
            <td class="separatorCell" colspan="9">&nbsp;</td>
        </tr>
    </tbody>
</table>

I am using colspan=“1” and colspan=“8” because I need to merge all cells in right column of service.

Any better way doing this? @hamelj

That is the way of doing it but there is no need for colspan=“1”, it is the default value so you can remove that.

Also I don’t see your Service Name column.

This is related to Service Address # column.

When I try to change something on REF# (Set the different width) then Service Address # width also change.

How to make this Service Header to be not dependent of the rest (This header).

I created ticket to support, any chance that You can look into this with me? @hamelj

If you change the first column’s width of the first row then all other row will have their first column also changed.

The only way to prevent this is like I answered in previous post: have another table build inside you table.

As an example, in your <tr class=“tabServiceTableDetHeader”, have only one <td colspan=“9”> which will hold your other table. That table will have 1 row wich will be the content of your current <tr class=“tabServiceTableDetHeader”. This way, you can make any changes to your REF# and it will not impact another other rows. I cannot garantee that the Connect auto-building of table will work as expected, you 'll have to try. if it doens’t work, then you will have to build your table manually using a script.

Unfortunately, I no longer work at our support departement but they are most capable of helping you with this.

1 Like

Thank You @hamelj for You patience.

I think I understand a little more now, I add some new table into row which You point out and now I can control the width independently.

Code looks like this:

<p>
    <br>
</p>
<table id="table" class="table--grid" data-column-resize="" data-hide-when-empty="" data-detail="" cellpadding="0"
cellspacing="0" style="width :100%; table-layout: fixed !important;" data-expander="2019">
    <thead>
    </thead>
    <tbody>
        <!-- Service header rows -->
        <tr class="serviceMainRow" data-show-row="all" data-repeat="detailS">
            <td class="serviceRow" style="width: 62%;">
                <span class="serviceHeader" style="padding-left: 10px;">SERVICE ADDRESS #: </span><span class="Customer_ZO" data-field="Customer_ZO">@Customer_ZO@</span>
            </td>
            <td class="serviceRow" colspan="8">
                <span class="serviceHeader" style="padding-left: 10px;">PO #: </span><span class="SAPO" data-field="SAPO">@SAPO@</span>
            </td>
        </tr>
        <tr class="serviceMainRow" data-show-row="all" data-repeat="detailS">
            <td class="serviceRow" colspan="9" style="text-align: left;">
                <span class="serviceHeader" style="padding-left: 10px;">SERVICE ADDRESS: </span><span class="Name_ZO" data-field="Name_ZO">@Name_ZO@</span>, <span class="Street_ZO" data-field="Street_ZO">@Street_ZO@</span>, <span class="City_ZO" data-field="City_ZO">@City_ZO@</span>,<span class="Region_ZO" data-field="Region_ZO">@Region_ZO@</span><span class="Postal_ZO" data-field="Pst_Cd_ZO">@Pst_Cd_ZO@</span><span class="Country_ZO" data-field="Country_ZO">@Country_ZO@</span>
            </td>
        </tr>
        <tr data-show-row="all" data-repeat="detailS">
            <td colspan="9">
                <table id="tableInner" class="table--grid" data-column-resize="" data-hide-when-empty="" data-detail="" cellpadding="0"
                cellspacing="0" style="width :100%;" data-expander="2019">
                    <thead></thead>
                    <tbody>
                        <tr class="tabServiceTableDetHeader" data-repeat="detailS.detailDetails">
                            <td style="width: 5.54%;"><span>REF#</span></td>
                            <td style="width: 36.31%;"><span>DESCRIPTION</span></td>
                            <td style="width: 11.12%;"><span>SERVICE DATE/PERIOD</span></td>
                            <td style="width: 7.7%;"><span>WO#</span></td>
                            <td style="width: 7.46%;"><span>QTY</span></td>
                            <td style="width: 7.28%;"><span>UNIT</span></td>
                            <td style="width: 7.37%;"><span>RATE</span></td>
                            <td style="width: 16.15%;"><span>AMOUNT</span></td>
                            <td style="width: 2.48%;"><span>&nbsp;</span></td>
                        </tr>
                        <!-- END Service header rows -->
                        <tr class="RecordD" data-repeat="detailS.detailDetails">
                            <td style="text-align: left;" data-field="Indicator">@Indicator@</td>
                            <td style="text-align: left;" data-field="Currency">@Currency@</td>
                            <td style="text-align: left;" data-field="Distchl">@Distchl@</td>
                            <td style="text-align: left;" data-field="InvMaint">@InvMaint@</td>
                            <td colspan="5" style="text-align: left;" data-field="NetDueDate">@NetDueDate@</td>
                        </tr>
                        <tr class="RecordDH" data-repeat="detailS.detailDetails">
                            <td style="text-align: left;" data-field="Indicator">@Indicator@</td>
                            <td colspan="8" style="text-align: left;" data-field="ContainerLocation">@ContainerLocation@</td>
                        </tr>
                        <tr class="RecordDP" data-repeat="detailS.detailDetails">
                            <td colspan="7" style="text-align: left;" data-field="Indicator">@Indicator@</td>
                            <td style="text-align: left;" data-field="Currency">@Currency@</td>
                            <td style="text-align: left;" data-field="Distchl">@Distchl@</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <!-- END Service header rows -->
        <!-- <tr class="RecordD" data-repeat="detailS.detailDetails">
            <td style="text-align: left;" data-field="Indicator">@Indicator@</td>
            <td style="text-align: left; width: 4.49%;" data-field="Currency">@Currency@</td>
            <td style="text-align: left; width: 4.49%;" data-field="Distchl">@Distchl@</td>
            <td style="text-align: left; width: 4.49%;" data-field="InvMaint">@InvMaint@</td>
            <td colspan="5" style="text-align: left;" data-field="NetDueDate">@NetDueDate@</td>
        </tr>
        <tr class="RecordDH" data-repeat="detailS.detailDetails">
            <td style="text-align: left;" data-field="Indicator">@Indicator@</td>
            <td colspan="8" style="text-align: left;" data-field="ContainerLocation">@ContainerLocation@</td>
        </tr>
        <tr class="RecordDP" data-repeat="detailS.detailDetails">
            <td colspan="7" style="text-align: left; width: 91.01%;" data-field="Indicator">@Indicator@</td>
            <td style="text-align: left; width: 4.49%;" data-field="Currency">@Currency@</td>
            <td style="text-align: left; width: 4.49%;" data-field="Distchl">@Distchl@</td>
        </tr>-->
        <tr class="separatorRow" data-repeat="detailS">
            <td class="separatorCell" colspan="9">&nbsp;</td>
        </tr>
    </tbody>
</table>

Now I lost access to my inner details records, can You please look and tell me why we are displaying only record for Indicator S which is Service not other D, DP and DH?

At this point, better you rely on support technical people as it will be easier for them to help you than though this medium.

Well I created ticket before and support help was not so good to me.

Only hope in Your knowledge :confused:

What is your ticket number with us?

Your reference number is # 208584. @hamelj

When a ticket is opened via the web, the technician has up to 4 opened hours to contact you back. Maybe wait until you have made a first contact.

Yes he contact me yesterday and I uploaded him presets and also describe the need late evening.

Do not received any resolution yet. @hamelj

@hamelj

Meanwhile I was working on this inner table inside and it seems to be ok, i can change the size of columns as needed there.

Current code here:

<p>
    <br>
</p>
<table id="table" class="table--grid" data-column-resize="" data-detail="" data-hide-when-empty="" cellpadding="0"
cellspacing="0" style="width :100%; table-layout: fixed !important;" data-expander="2019">
    <thead>
    </thead>
    <tbody>
        <!-- Service header rows -->
        <tr class="serviceMainRow" data-show-row="all" data-repeat="detailS">
            <td class="serviceRow" style="width: 57.15%;">
                <span class="serviceHeader" style="padding-left: 10px;">SERVICE ADDRESS #: </span><span class="Customer_ZO" data-field="Customer_ZO">@Customer_ZO@</span>
            </td>
            <td class="serviceRow" colspan="8">
                <span class="serviceHeader" style="padding-left: 10px;">PO #: </span><span class="SAPO" data-field="SAPO">@SAPO@</span>
            </td>
        </tr>
        <tr class="serviceMainRow" data-show-row="all" data-repeat="detailS">
            <td class="serviceRow" colspan="9" style="text-align: left;">
                <span class="serviceHeader" style="padding-left: 10px;">SERVICE ADDRESS: </span><span class="Name_ZO" data-field="Name_ZO">@Name_ZO@</span>, <span class="Street_ZO" data-field="Street_ZO">@Street_ZO@</span>, <span class="City_ZO" data-field="City_ZO">@City_ZO@</span>,<span class="Region_ZO" data-field="Region_ZO">@Region_ZO@</span><span class="Postal_ZO" data-field="Pst_Cd_ZO">@Pst_Cd_ZO@</span><span class="Country_ZO" data-field="Country_ZO">@Country_ZO@</span>
            </td>
        </tr>
        <!-- Inner table which holds main details header only -->
        <tr data-show-row="all" data-repeat="detailS">
            <td colspan="9" style="padding: 0px; margin: 0px;">
                <table id="tableInner" border="0" data-column-resize="" data-detail="" data-hide-when-empty="" cellpadding="0"
                cellspacing="0" width="100%" data-expander="2019">
                    <!--  <table id="tableInner" border="0" cellpadding="0" cellspacing="0" width="100%">-->
                    <thead></thead>
                    <tbody>
                        <tr class="tabServiceTableDetHeader">
                            <td style="width: 5.68%;"><span>REF#</span></td>
                            <td style="width: 31.13%;"><span>DESCRIPTION</span></td>
                            <td style="width: 17.15%;"><span>SERVICE DATE/PERIOD</span></td>
                            <td style="width: 7.01%;"><span>WO#</span></td>
                            <td style="width: 10.08%;"><span>QTY</span></td>
                            <td style="width: 8.64%;"><span>UNIT</span></td>
                            <td style="width: 6%;"><span>RATE</span></td>
                            <td style="width: 12.09%;"><span>AMOUNT</span></td>
                            <td style="width: 2.22%;"><span>&nbsp;</span></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <!-- END of Inner table  -->
        <!-- Record D standard -->
        <tr class="RecordD" data-repeat="detailS.detailDetails">
            <td style="text-align: left;" data-field="Indicator">@Indicator@</td>
            <td style="text-align: left; width: 5.1%;" data-field="Currency">@Currency@</td>
            <td style="text-align: left; width: 5.1%;" data-field="Distchl">@Distchl@</td>
            <td style="text-align: left; width: 5.1%;" data-field="InvMaint">@InvMaint@</td>
            <td colspan="5" style="text-align: left;" data-field="NetDueDate">@NetDueDate@</td>
        </tr>
        <!-- Record DH -->
        <tr class="RecordDH" data-repeat="detailS.detailDetails">
            <td id="containerLocID" class="containerRow" colspan="9" style="text-align: left;" data-field="ContainerLocation">
                @ContainerLocation@ 
            </td>
        </tr>
        <!-- Record DP -->
        <tr class="RecordDP" colspan="9" data-repeat="detailS.detailDetails">
            <td class="detailPricingContainer" colspan="9">
                <span class="servDescItem" data-field="ServiceDescription">@ServiceDescription@</span><span class="slsUnDsItem" data-field="SlsUnDs">@SlsUnDs@</span><span class="rateFieldItem" data-field="Rate">@Rate@</span>
            </td>
        </tr>
        <!-- Service separator blank row -->
        <tr class="separatorRow" data-repeat="detailS">
            <td class="separatorCell" colspan="9">&nbsp;</td>
        </tr>
    </tbody>
</table>

The problem now again is that the order of records displayed inside detail are not right, its right on first service but its not right on second service box with some reason.

Data mapper:

image

Output:

So as You can see the order of details displayed is not right. The amount is right but order not.
Any ideas why that happend? @hamelj @Sander

Hi @Odyn,

Can you let me know please if it would be possible for you to share a anonymized version (with all sensitive information removed) of both the applied Data Mapping Configuration and Template with the rest of us?

1 Like

Sure @Marten I will share it if needed.

I found rootcause of this.

Inside record DP I am using spans like that:

<span class="servDescItem" data-field="ServiceDescription">@ServiceDescription@</span>

When I remove that then the record order back and there is no issue.

Is this forbidden to use data-field and span? @hamelj @Sander

@Odyn data-field on a span should work fine. I’m also interested in the template and data mapper (anonymized).

Sent presets for review to @Sander and @Marten

What i check now for example, this code is working fine and shows proper records for each service:

<p>
    <br>
</p>
<table id="table" class="table--grid" data-column-resize="" data-detail="" data-hide-when-empty="" cellpadding="0"
cellspacing="0" style="width :100%; table-layout: fixed !important;" data-expander="2019">
    <thead>
    </thead>
    <tbody>
        <!-- Service header rows -->
        <tr class="serviceMainRow" data-show-row="all" data-repeat="detailS">
            <td class="serviceRow" style="width: 57.15%;">
                <span class="serviceHeader" style="padding-left: 10px;">SERVICE ADDRESS #: </span><span class="Customer_ZO" data-field="Customer_ZO">@Customer_ZO@</span>
            </td>
            <td class="serviceRow" colspan="8">
                <span class="serviceHeader" style="padding-left: 10px;">PO #: </span><span class="SAPO" data-field="SAPO">@SAPO@</span>
            </td>
        </tr>
        <tr class="serviceMainRow" data-show-row="all" data-repeat="detailS">
            <td class="serviceRow" colspan="9" style="text-align: left;">
                <span class="serviceHeader" style="padding-left: 10px;">SERVICE ADDRESS: </span><span class="Name_ZO" data-field="Name_ZO">@Name_ZO@</span>, <span class="Street_ZO" data-field="Street_ZO">@Street_ZO@</span>, <span class="City_ZO" data-field="City_ZO">@City_ZO@</span>,<span class="Region_ZO" data-field="Region_ZO">@Region_ZO@</span><span class="Postal_ZO" data-field="Pst_Cd_ZO">@Pst_Cd_ZO@</span><span class="Country_ZO" data-field="Country_ZO">@Country_ZO@</span>
            </td>
        </tr>
        <!-- Inner table which holds main details header only -->
        <tr data-show-row="all" data-repeat="detailS">
            <td colspan="9" style="padding: 0px; margin: 0px;">
                <table id="tableInner" border="0" data-column-resize="" data-detail="" data-hide-when-empty="" cellpadding="0"
                cellspacing="0" width="100%" data-expander="2019">
                    <!--  <table id="tableInner" border="0" cellpadding="0" cellspacing="0" width="100%">-->
                    <thead></thead>
                    <tbody>
                        <tr class="tabServiceTableDetHeader">
                            <td style="width: 5.68%;"><span>REF#</span></td>
                            <td style="width: 31.13%;"><span>DESCRIPTION</span></td>
                            <td style="width: 17.15%;"><span>SERVICE DATE/PERIOD</span></td>
                            <td style="width: 7.01%;"><span>WO#</span></td>
                            <td style="width: 10.08%;"><span>QTY</span></td>
                            <td style="width: 8.64%;"><span>UNIT</span></td>
                            <td style="width: 6%;"><span>RATE</span></td>
                            <td style="width: 12.09%;"><span>AMOUNT</span></td>
                            <td style="width: 2.22%;"><span>&nbsp;</span></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <!-- END of Inner table  -->
        <!-- Record D standard -->
        <tr class="RecordD" data-repeat="detailS.detailDetails">
            <td style="text-align: left;" data-field="Indicator">@Indicator@</td>
            <td style="text-align: left; width: 5.1%;" data-field="Currency">@Currency@</td>
            <td style="text-align: left; width: 5.1%;" data-field="Distchl">@Distchl@</td>
            <td style="text-align: left; width: 5.1%;" data-field="InvMaint">@InvMaint@</td>
            <td colspan="5" style="text-align: left;" data-field="NetDueDate">@NetDueDate@</td>
        </tr>
        <!-- Record DH -->
        <tr class="RecordDH" data-repeat="detailS.detailDetails">
            <td id="containerLocID" class="containerRow" colspan="9" style="text-align: left;" data-field="ContainerLocation">
                @ContainerLocation@ 
            </td>
        </tr>
        <!-- Record DP -->
        <tr class="RecordDP" data-repeat="detailS.detailDetails">
            <td class="detailPricingContainer" colspan="9" style="text-align: left;" data-field="Indicator">@Indicator@ </td>
        </tr>
        <!-- Service separator blank row -->
        <tr class="separatorRow" data-repeat="detailS">
            <td class="separatorCell" colspan="9">&nbsp;</td>
        </tr>
    </tbody>
</table>

But when I try to add spans to DP record or use more tds then it seems to change the order and make chaos inside records. @hamelj @Sander @Marten

@Odyn that looks like a bug to me. If you set the scope to “each matched element” and also use data-hide-when-empty, “this.record” can have the wrong value.

We were supposed to fix this long ago but it seems to have slipped through the cracks. I’ll make sure we have a ticket for it and I’ll try to prioritize it.

In the meantime you can use the following workaround. In the scripts where you currently use “this.record”, add the following:

let ref = this.attr("data-record-reference") || "";
let parts = ref.split("_");
let detailRecord = record;
for (let i = 0; i < parts.length - 1; i += 2) {
	detailRecord = detailRecord.tables[parts[i]][parts[i + 1]];
}

and then use “detailRecord” instead of “this.record”.

1 Like

Love Your answer @Sander, it works like a charm,

I will test it deeply to make sure it will not have more “surprise” inside.

Now the order of records are proper even when I change something the preview is right.

Thank You!

One more question @Sander

How using this work around, I can access field from Service table, not only inner Details?