OL Learn

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

Hello

I need a help with my problem which was not resolved before.

I have nested detail tables where we have 1 main table like Service and each service have nested Details table inside with details record.

Each service can have much details record (unknown total number)

Example drawing to show this:

I recived some example from OL support but this doesn’t helped me much.

I would like to understand or see example how to make it on simple detail table to think later how to adapt this inside scripted table.

Adam

Or maybe is there a way to start new detal record of main table always from new page?

Can you anonymized a datamapper sample and share it so we can provide you with an example?

Sure I will send You on private message data mapper and some template with table script example.

Thanks

I hope this is what you want/need so I will show how to build a detail table with a sub-detail table in it. Look at the screenshot below. I have used the detailS and nested detailDetails as they represent what I think you want:

I first Inserted a dynamic table on a new section using the grid like ison in the top banner with a yellow arrow in it:

Then I selected all the fields I wanted at the first level of my detail table (it could look like it is hanging while you go from step to steps but it is normal, you have LOT of fields, so be patient ;):

Atfer that I added a new row by clicking on the upper right green plus sign in the previous image which will display a list of availalble detail table (sorry, unable to do a screenshot of the pop-up choices) and I chose detailS.detailDetails. I then proceed by adding the fields, from that nested detail table that I wanted by clicking on the green plus sign on the same newly added row (at the moment of this writing, it seems to display a list of the fields available from that nested detail table but in reverse order :frowning: , I will open a ticket for that but thought you should know):

Once you have done thatm the rest is up to you with CSS. Of course in my example I only select 2 fields from each detail but that is to keep the example simple.

Hope that it helps you.

Thank You Hamel

I think i understand how standard detail table can be inserted but try Your way also today.

My question is, how to make the table header (in our example the service header) to move to next page when there are more records then we can fit on page 1. Like service header should be carried forward next page.

Thinking about this article: https://learn.objectiflune.com/howto/creating-dynamic-tables-builder/

Repeating a line in case of a page break

You may want a product line to be repeated when its attributes run over multiple pages. In order to get that repetition, first add an extra row in the Dynamic Table Builder, and link it to the detail table. Then change the “Initial” setting to Before a page break, After a page break, or before and after a page break (All).

Adam

Ok i was able apply Your idea to and it seems like the header is carried forward next page as it should be. @hamelj

Unfortunatelly i will have to rebuild/recreate whole my script table inside this.

What I need to understand now, to continue working on that is how to replace this dynamic table record depending of data mapper field. This is regarding inner detailS.details table.

For example i can have many type of record depending of “RecordType” field inside data mapper.
For example when “RecorType” will have “D” then i will have to display 5 fields and apply other styling.
For example when “RecorType” will have “DH” then i will have to display 2 fields and apply other styling.

etc

Thank You for Your help
Adam

Once you have done the basic for you detail table, the best way is to go on the source tab and edit your detail table.

Manually reproduce the nested row and adapt it to what you want display when it fits your RecordType. See code below as an example. You 'll notice i make use of HTML tag colspan which allow for a field to span across multiple ones.

<table id="table" class="table--grid" data-column-resize="" data-detail="" data-hide-when-empty="" 
style="width :100%" data-expander="2019">
<thead>
    <tr>
        <th style="text-align: left; width: 55.89%;">DocumentNo </th>
        <th colspan="4" style="text-align: left;">Currency </th>
    </tr>
</thead>
<tbody>
    <tr data-repeat="detailS">
        <td style="text-align: left;" data-field="Indicator">@Indicator@</td>
        <td colspan="4" style="text-align: left;" data-field="Net">@Net@</td>
    </tr>
    <tr class="DType" data-repeat="detailS.detailDetails">
        <td style="text-align: left;" data-field="DocumentNo">@DocumentNo@</td>
        <td style="text-align: left; width: 11.99%;" data-field="Currency">@Currency@</td>
        <td style="text-align: left; width: 11.99%;" data-field="Distchl">@Distchl@</td>
        <td style="text-align: left; width: 11.48%;" data-field="InvMaint">@InvMaint@</td>
        <td style="text-align: left; width: 14.39%;" data-field="NetDueDate">@NetDueDate@</td>
    </tr>
    <tr class="DHType" data-repeat="detailS.detailDetails">
        <td style="text-align: left;" data-field="DocumentNo">@DocumentNo@</td>
        <td colspan="4" style="text-align: left;" data-field="Currency">@Currency@</td>
    </tr>
    <tr class="OtherType" data-repeat="detailS.detailDetails">
        <td colspan="3" style="text-align: left;" data-field="DocumentNo">@DocumentNo@</td>
        <td style="text-align: left;" data-field="Currency">@Currency@</td>
        <td style="text-align: left;" data-field="Distchl">@Distchl@</td>
    </tr>
</tbody>

As you see, I have setup 3 rows, each with their own class that i will use (the class) to remove the row I don’t need at run time (script below). Each row has its own number of fields and use colspan to compensate for the difference between the highest number of fields VS the others.

This is a script that looks for class DType. I couldn’t find your RecordType so i use the BillType but the idea remains.

results.each(function(index){
    if(record.tables.detailS[index].fields.BillType  != 'D') this.remove();
});
1 Like

Sorry the data mapper field was called “Indicator” not “RecordType” (RecordType just as example)

So i will just apply some class name to my record which i develop and add standard script based on class selector and show/hide them depending of data mapper field? Looks good, need to try this tomorrow.

I just want to add that if you change the scope of the script to “each matched element” (in the options panel at the bottom of the script editor) you only need the following:

if (this.record.fields.BillType != 'D') this.remove();

Note that “this” represents a table row, and “this.record” represents the detail record associated with that table row. What makes this especially useful is the fact that it also works for rows in nested tables.

2 Likes

FYI, if you start typing the code provided by @Sander, once you type the this.remove();, the auto complete will not propose the remove() option. I will report this. I know it did made me beleive that it wasn’t an option.

1 Like

Ok it seems like when I use option “Each Matched elemnts” then works better.

For example now I have 3 types of records created with 3 different classess.

 <tr class="RecordD" colspan="5" data-repeat="detailS.detailDetails">
        <td style="text-align: left;" data-field="Indicator">@Indicator@</td>
        <td style="text-align: left; width: 21.32%;" data-field="Currency">@Currency@</td>
        <td style="text-align: left; width: 20.76%;" data-field="Distchl">@Distchl@</td>
        <td style="text-align: left; width: 11.48%;" data-field="InvMaint">@InvMaint@</td>
        <td style="text-align: left; width: 14.39%;" 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="4" style="text-align: left;" data-field="ContainerLocation">@ContainerLocation@</td>
    </tr>
    <tr class="RecordDP" data-repeat="detailS.detailDetails">
        <td colspan="3" 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>

And 3 scripts which will display/remove this records based on 3 classess

logger.info(this.record.fields.Indicator);

if (this.record.fields.Indicator != 'D') 
	this.remove();

Seems to work ok but it seems like he sometimes copy some records and display them few times:

In my data mapper I have for example:

But when I preview this in template he duplicate some records like DH

Any idea why this hapepen?

Sorry @Sander @hamelj for spam but I really need help with that.

I noticed that when table breaks over next pages, the details record order totally mess up.
If its only on single page then there is right.

UPDATE:

  1. The reason why that happend it seems like is this.remove() because it changes something inside DOM.
  2. When I use this.hide() instead of this.remove() then records are fine (order is also fine)

I can’t explain why hide() behaves differently than remove() in this particular case, but I’m happy to hear that you managed to figure out what was going on and that you found a workaround.

Thank You @hamelj and @Sander for Your patience. I have no idea also but maybe its a bug.

I suggest you open a ticket with our support department via our website. Then support will be able to look at why .remove() causes an issue with our R&D dept.

@hamelj @Sander

I would like to ask You one more question regarding this dynamic table.

I have table which already looks like this:

<p>
    <br>
</p>
<br>
<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 style="width: 100%;" data-show-row="all" data-repeat="detailS">
            <td style="width: 72.93%;">
                <span class="serviceHeader" style="padding-left: 10px;">SERVICE ADDRESS #: </span><span class="Customer_ZO" data-field="Customer_ZO">@Customer_ZO@</span>
            </td>
            <td colspan="0" style="width: 27.32%;">
                <span class="serviceHeader" style="padding-left: 10px;">PO #: </span><span class="SAPO" data-field="SAPO">@SAPO@</span>
            </td>
        </tr>
        <tr style="width: 100%;" data-show-row="all" data-repeat="detailS">
            <td 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" style="width: 100%" data-show-row="all" data-repeat="detailS">
            <td><span>REF#</span></td>
            <td><span>DESCRIPTION</span></td>
            <td style="width: 3.52%;"><span>SERVICE DATE/PERIOD</span></td>
            <td style="width: 3.52%;"><span>WO#</span></td>
            <td style="width: 3.52%;"><span>QTY</span></td>
            <td style="width: 3.52%;"><span>UNIT</span></td>
            <td style="width: 3.52%;"><span>RATE</span></td>
            <td style="width: 3.52%;"><span>AMOUNT</span></td>
            <td style="width: 3.52%;"><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>

When I change the width of REF# column then the Service Name # column size is also changed.

So when I try to change the width of REF# colum in designer, then automatically the size of Service Name also change to same width. It seems to be related but how to change that to different sizes

How to set whole table columns size to be independent?

Adam

You can’t. By default, the first displayed row will set the width for all columns.

I suggest you you had a <th> row that will define the width of all columns. You can make it with no height so it doesn’t show. That is the one that’ll define the width of all your column.

Now if you really need to have various size columns that have each their own width and arrangement separate from other row, then you’ll have to programatically build your table as to have multiple tables inside the original table. But by doing this, you won’t be ble to use the table population automation of Connect. You will be the one building the whole layout for each row.

What I need to do is to set the other width for Service cells and other with for REF# header.

Later under REF# I will have to adjust inner details columns.

Could You please show me how to do this? (Or can we open some technical session for tomorrow)

First, why do you have a colspan=“0” in your first row?
As for opening a technical session, I already propose you open a support ticket with one of our technicians in a previous post.