Format cells in table with variable length data in them

fergal · August 11, 2023, 10:05am

Hi, just trying to get my head around pres connect Designer as we have upgraded from PP7 Designer
so its all new to me

I have the above table in Pres Connect Designer which has 4 columns and can have 1 row or any number of rows with variable length data in them depending on what’s in the data (see above 2 examples) which causes the above to happen,

if any of the address contains a lot of characters like G89, 88 and 90 addresses, then it puts it below in the cell, but if all the data is short in like the Belmont Drive address above, then each cell is spread right across the page as that is the width each of cells are set to.

is it possible to get the data in each cell and row to close up to each other like so?

3 BELOMONT DRIVE, ELLIOT STREET, LIVERPOOL, L6 7UP

G89 - GROUND FLOOR STALL 89 ST JOHN’S MARKET, ELLIOT STREET, LIVERPOOL, L1 1LQ
G89 - GROUND FLOOR STALL 89 ST JOHN’S MARKET, ELLIOT STREET, LIVERPOOL, L1 1LQ
G89 - GROUND FLOOR STALL 89 ST JOHN’S MARKET, ELLIOT STREET, LIVERPOOL, L1 1LQ

Or do I need to do it another way instead of in a table?

Thanks for looking

Marten · August 11, 2023, 10:53am

Can you let us know please which version of PReS Connect you’ve installed? You can check this by going to Designer application > Help > About PReS Connect Designer

The reason why I am asking this is because you can apply HTML code like:

<table id="detail-table" class="table--grid" data-column-resize="" data-hide-when-empty="" style="width: auto; max-width: 100%;" data-expander="2019">
    <tbody>
        <tr data-repeat="detail">
            <td style="text-align: left; width: auto;">{{COLUMN1}}</td> 
            <td style="text-align: left; width: auto;">{{COLUMN2}}</td> 
            <td style="text-align: left; width: auto;">{{COLUMN3}}</td> 
            <td style="text-align: left; width: auto;">{{COLUMN4}}</td> 
        </tr>
    </tbody>
</table>

Instead of:

<table id="detail-table" class="table--grid" data-column-resize="" data-hide-when-empty="" style="width: 100%;" data-expander="2019">
    <tbody>
        <tr data-repeat="detail">
            <td style="text-align: left; width: 25%;">{{COLUMN1}}</td> 
            <td style="text-align: left; width: 25%;">{{COLUMN2}}</td> 
            <td style="text-align: left; width: 25%;">{{COLUMN3}}</td> 
            <td style="text-align: left; width: 25%;">{{COLUMN4}}</td> 
        </tr>
    </tbody>
</table>

To accomplish this (in version 2022.1 and upwards due to the use of ‘Handlebars expressions (link)’).

Differences:

The value of the attribute style, as applied to the <table>-element, has been changed from “width: 100%;” to “width: 100%; max-width: 100%;”
The value of the attribute style, as applied to the <td>-elements, has been changed from “width: 25%;” to “width: auto;”

fergal · August 11, 2023, 11:34am

Hi Marten,

We are using Version “2022.1.4.10850”

This is what it looks like in the source at the moment

<table id="Property" data-column-resize="" data-hide-when-empty="" data-detail="" style="width :100%" data-expander="2019">
    <thead>
        <tr>
            <th style="text-align: left; width: 34.4%;">Property </th>
        </tr>
    </thead>
    <tbody>
        <tr data-repeat="detail">
            <td style="text-align: left;" data-field="PropAddr1">@PropAddr1@</td>
            <td style="text-align: left; width: 32.92%;" data-field="PropAddr2">@PropAddr2@</td>
            <td style="text-align: left; width: 16.73%;" data-field="PropAddr3">@PropAddr3@</td>
            <td style="text-align: left; width: 14.56%;" data-field="PropAddr4">@PropAddr4@</td>
        </tr>
    </tbody>
</table>

Marten · August 11, 2023, 12:37pm

I assume that you’ll have to change it to something like the following:

<table id="Property" data-column-resize="" data-hide-when-empty="" style="width: auto; max-width: 100%;" data-expander="2019">
    <thead>
        <tr>
            <th style="text-align: left; width: 100%;" colspan="4">Property</th>
        </tr>
    </thead>
    <tbody>
        <tr data-repeat="detail">
            <td style="text-align: left; width: auto;" data-field="PropAddr1">@PropAddr1@</td>
            <td style="text-align: left; width: auto;" data-field="PropAddr2">@PropAddr2@</td>
            <td style="text-align: left; width: auto;" data-field="PropAddr3">@PropAddr3@</td>
            <td style="text-align: left; width: auto;" data-field="PropAddr4">@PropAddr4@</td>
        </tr>
    </tbody>
</table>

P.S. “I assume” because I wasn’t able to test this in version 2022.1.4.

jchamel · August 11, 2023, 12:58pm

If I understand correclty, you want this:

and this is the source code in HTML:

<table id="table" data-column-resize="" data-hide-when-empty="" style="width :100%" data-expander="2019">
<thead>
    <tr>
        <th style="text-align: left; width: 99.46%;"></th>
    </tr>
</thead>
<tbody>
    <tr data-repeat="detail">
        <td style="text-align: left;">@row@</td> 
    </tr>
</tbody>

fergal · August 11, 2023, 1:38pm

Hi marten,
I tried the code and it closes the table up but it does not show the address when i preview only the @PropAddr1@ etc

and it only shows 1 row when there is 3 in one of the records of data like below

Table%20Issue_c

@jchamel
The 1st line is from another record which i used as an example to show how it looks on the page if the cells only contain a few characters
When i put your code in the source it just showed @row@ in preview not the address so i changed that part of the code to @PropAddr1@ but that is all it showed again.

Marten · August 11, 2023, 1:45pm

That is probably because I removed the attribute/value pair data-detail="" from the <table>-element.

Can you please try the following HTML code instead?

<table id="Property" data-column-resize="" data-hide-when-empty="" data-detail="" style="width: auto; max-width: 100%;" data-expander="2019">
    <thead>
        <tr>
            <th style="text-align: left; width: 100%;" colspan="4">Property</th>
        </tr>
    </thead>
    <tbody>
        <tr data-repeat="detail">
            <td style="text-align: left; width: auto;" data-field="PropAddr1">@PropAddr1@</td>
            <td style="text-align: left; width: auto;" data-field="PropAddr2">@PropAddr2@</td>
            <td style="text-align: left; width: auto;" data-field="PropAddr3">@PropAddr3@</td>
            <td style="text-align: left; width: auto;" data-field="PropAddr4">@PropAddr4@</td>
        </tr>
    </tbody>
</table>

fergal · August 11, 2023, 2:21pm

That’s seems to have cracked it

Table%20Issue_d

Just 1 last thing, how would i put a comma on the end of each data in the cell just to make it easier to read

I tried in preview mode after the @ but it disappears when i click off it, and it wont let me do it in design mode, i presume it needs adding in the source?

Thanks

jchamel · August 11, 2023, 2:22pm

You need to create the script, also shown in the screenshot that I did

To do so, in your Template, script tab, right-click on Standard->New->Text script.

Marten · August 11, 2023, 2:33pm

This can be done by applying the following HTML code instead:

<table id="Property" data-column-resize="" data-hide-when-empty="" data-detail="" style="width: auto; max-width: 100%;" data-expander="2019">
    <thead>
        <tr>
            <th style="text-align: left; width: 100%;" colspan="4">Property</th>
        </tr>
    </thead>
    <tbody>
        <tr data-repeat="detail">
            <td style="text-align: left; width: auto;" data-field="PropAddr1">@PropAddr1@,</td>
            <td style="text-align: left; width: auto;" data-field="PropAddr2">@PropAddr2@,</td>
            <td style="text-align: left; width: auto;" data-field="PropAddr3">@PropAddr3@,</td>
            <td style="text-align: left; width: auto;" data-field="PropAddr4">@PropAddr4@</td>
        </tr>
    </tbody>
</table>

Or by following the advice as suggested by @jchamel

fergal · August 11, 2023, 2:52pm

Hi Marten,

I put the code in but still no commas showing,

@jchamel
I created the script and added your code and it just showed @row@ in preview so changed it to @PropAddr1@ and it just showed @PropAddr1@

jchamel · August 11, 2023, 3:04pm

Message me in private and I will give you mty email so you can send me your Templae and Datamapper

Marten · August 11, 2023, 3:10pm

You are right. I assume that this is because in version 2022.1.4 the entire content of the <td>-elements will be replaced by the values of the record fields.

fergal · August 11, 2023, 3:23pm

Hi Marten,

So there is no way to add a comma on the end of each cell with using your code then?
if that is the case i will see what Jchamel comes up with

Thanks for all your help

@jchamel
i have sent you a pm

Marten · August 11, 2023, 3:32pm

There is, but then it’s becoming rather complicated.

You’re welcome!

jchamel · August 11, 2023, 4:01pm

What version of Connect do you use so I can save it back in that version?

fergal · August 11, 2023, 4:03pm

We are using Version “2022.1.4.10850”

jchamel · August 11, 2023, 4:04pm

Removed template at user’s request

You’ll notice that it is quite simple.

fergal · August 11, 2023, 4:10pm

It is when you know how i am new to all this

Thankyou its much appreciated

jchamel · August 11, 2023, 4:12pm

Should you be interested we provided formation on our product (check with your reseller).

We also have a lot of training videos