ahaddad
February 28, 2018, 8:40am
1
Hi - I am wondering if there is a way to switch the way your table is displayed when using dynamic data. For example- I have three header cells - Deferral, Deferral % and Deferral Date. then the next row my dynamic data starts.
Deferral Deferral % Deferral Date
Roth 10% 07/01/2018
I would only have either one or two deferral types. So i wanted to display my data as such. So my dynamic data are the two columns Roth and IRA. Is this possible or is there alot of extra scripting involved?
Deferral Roth IRA
Deferral % 10% 5%
Deferral Date 07/01/2018 01/01/2020
Thank you
This should be possible in theory, but the table would need to be generated entirely through a custom script.
Whether you have a fixed number of columns and dynamically append rows, or a fixed number of rows and dynamically append columns, is dependent on how your script is set up.
I am looking for this exact same thing.
So this works vertically… adds rows as needed.
ProductName
Avg1000Price
Term
@ProductName@
@Avg1000Price@
@Term@
<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="width: 26.48%;">Avg1000Price </th>
<th style="width: 15.25%;">Term </th>
</tr>
</thead>
<tbody>
<tr data-repeat="detail">
<td data-field="Avg1000Price">@Avg1000Price@</td>
<td data-field="Term">@Term@</td>
</tr>
</tbody>
</table>
How would the data attributes look (where would the data-repeat attribute live, etc…) if you wanted to add columns based on the detail table.
@ProductName@
Avg1000Price
@Avg1000Price@
Term
@Term@
Thanks
Erik
October 21, 2022, 6:28am
4
Could you show your data model? In the current release it is possible to have multiple rows repeating over the same detail record. These will be treated as group. You can use the Dynamic Table Builder to prepare things (or do it manually in the Source view). The wizard lets you add empty fields for the first column as shown in the picture below. Add the labels after you’ve inserted the table.
Erik
<table id="table" class="table--minimalist" data-detail="" style="width :100%" data-expander="2019">
<thead>
<tr>
<th style="text-align: left; width: 8.81%;"></th>
<th style="text-align: left; width: 91.19%;"></th>
</tr>
</thead>
<tbody>
<tr class="product" data-repeat="details">
<td></td>
<td data-field="ProductName">@ProductName@</td>
</tr>
<tr data-repeat="details">
<td>Avg1000Price</td>
<td data-field="Avg1000Price">@Avg1000Price@</td>
</tr>
<tr data-repeat="details">
<td>Term</td>
<td data-field="Term">@Term@</td>
</tr>
</tbody>
</table>
detail-repeats.OL-template (9.0 KB)
Thank you both for responding.
Not quite what I am looking for. We want more of a “feature compare” type of layout …
Its a pretty common …
Does the data-expander only know how to repeat rows? or can we get creative …
<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="width: 26.48%;"></th>
<th style="width: 15.25%;" data-repeat="alternativeOffers">
<div data-field="ProductName">
@ProductName@
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Price</td>
<td data-repeat="alternativeOffers">
<div data-field="Avg1000Price">
@Avg1000Price@
</div>
</td>
</tr>
<tr>
<td>Term</td>
<td data-repeat="alternativeOffers">
<div data-field="Term">
@Term@
</div>
</td>
</tr>
</tbody>
</table>
Thanks in advance for any additional feedback.
Erik
October 24, 2022, 5:55pm
6
Thanks for clarifying. A different scenario indeed. Let me see if I can come up with a ‘creative’ way to achieve this. Which version of OL Connect are you running?
Marten
October 25, 2022, 7:10am
7
Hi @bradnowak ,
Hereby I would like to share the following three questions with you:
Do you know what the minimum and maximum number of columns can be?
Do you know what the width of each column can be? Should each column have the same width or might it happen that each column has a different width?
Erik
October 25, 2022, 1:48pm
8
Good questions, if the minimum and maximum number of columns are known/fixed, things could be as simple as preparing these tables in a snippet.
Erik
October 25, 2022, 3:31pm
9
I gave it a quick spin using the Handlebars snippets implementation of OL Connect 2022.1 (all roads lead to rome). The example assumes there are 2-5 products to compare.
For more information on the Handelbars snippets implementation see:
I hope this is of some help,
Erik
product-compare-table.OL-template (9.6 KB) product-compare-table.OL-datamapper (6.1 KB)
1 Like
Great feedback. I will take a look at the details.
FYI - currently the columns to compare is probably very close to your suggestion 2-5.
This is what I ended up doing which seems to work:
<table id="product-compare-table" class="table--grid" style="width:100%;">
<thead>
<tr id="product-row" class="heading">
<th class="product-label"></th>
</tr>
</thead>
<tbody>
<tr id="price-row" class="feature">
<td class="feature-label">Electricity Supply Price</td>
</tr>
<tr id="term-row" class="feature">
<td class="feature-label">Fixed Price Protection</td>
</tr>
<tr id="ac-protect-row" class="feature">
<td class="feature-label">A/C Protection</td>
</tr>
<tr id="heat-protect-row" class="feature">
<td class="feature-label">Furnace Protection</td>
</tr>
<tr id="cancel-fee-row" class="feature">
<td class="feature-label">Early Termination Fee</td>
</tr>
</tbody>
</table>
then have Standard Script looping through the Detail table (alternativeOffers) and programmatically adding the columns
var baseTable = loadhtml('snippets/Print/Feature-Table-Base.html');
var hasFeatureHtml = "<td class='checkmark'><b>X</b></td>";
var hasNoFeatureHtml = "<td></td>";
var altOfferCount = record.tables.alternativeOffers.length;
var colProductMax = 3;
var colPercent = (1.0 / altOfferCount) * 75.0;
for(let i = 0; i < altOfferCount; i++)
{
var offer = record.tables.alternativeOffers[i];
var row = query("#product-row", baseTable);
row.append("<th style='width: " + colPercent +"%;'>" + offer.fields.HeaderLabel + "</th>");
row = query("#price-row", baseTable);
row.append("<td>" + formatter.currency(offer.fields.Avg1000Price, "00.0¢ per kWh") + "</td>");
row = query("#term-row", baseTable);
row.append("<td>" + offer.fields.Term + " Months</td>");
row = query("#ac-protect-row", baseTable);
if (offer.fields.HasACProtection) {
row.append(hasFeatureHtml);
}
else {
row.append(hasNoFeatureHtml);
}
row = query("#heat-protect-row", baseTable);
if (offer.fields.HasHeatProtection) {
row.append(hasFeatureHtml);
}
else {
row.append(hasNoFeatureHtml);
}
row = query("#cancel-fee-row", baseTable);
if (offer.fields.AltETP > 0) {
row.append("<td class='fee'>" + formatter.currency(offer.fields.AltETP, "$0") + "</td>");
}
else {
row.append("<td class='fee'>None</td>");
}
}
results.html(baseTable);
Now that the hard work is done, hand it off for someone else to pretty it up
Thanks again for the response.
Erik
October 26, 2022, 7:02am
11
For your inspiration, the Handlebars snippet (OL Connect 2022.1 or later) variant and the CSS styles for the table cell widths
<table class="table--light products-{{products.length}}">
<thead>
<tr>
<td></td>
{{#each products}}
<td>{{name}}</td>
{{/each}}
</tr>
</thead>
<tbody>
<tr>
<td>Price</td>
{{#each products}}
<td>From: <span class="price">
{{#if price}}
{{currency price}}
{{else}}
-
{{/if}}
</span></td>
{{/each}}
</tr>
<tr>
<td>Ratings</td>
{{#each products}}
<td>{{rating}}</td>
{{/each}}
</tr>
<tr>
<td>Alexa built in</td>
{{#each products}}
<td>
{{#if alexa}}
<span class="check">✓</span>
{{/if}}
</td>
{{/each}}
</tr>
</tbody>
</table>
CSS styles
table td:first-child {
font-weight: bold;
width: 16.6% !important;
}
table.products-2 tr td {
width: 41.7%;
}
table.products-3 tr td {
width: 27.8%;
}
table.products-4 tr td {
width: 20.85%;
}
table.products-5 tr td {
width: 16.6%;
}
1 Like
…
