Upland OL User community

ahaddad · October 6, 2018, 1:31am

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

Stephen_Gleeson-Roy · October 6, 2018, 1:34am

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.

bradnowak · October 20, 2022, 10:11pm

I am looking for this exact same thing.
It has been a couple years, besides a custom script has any additional functionality been built out?
Any chance someone could put together how the HTML would look…?

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

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)

bradnowak · October 23, 2022, 6:28am

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

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

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:51pm

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

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)

bradnowak · October 25, 2022, 5:47pm

Great feedback. I will take a look at the details.
We are currently running 2020.1 but are looking to upgrade probably by EOY.

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:
Created a Snippet defining the first column…

<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, 10:21am

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">&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%;
}

Is there a way to switch the way dynamic data is displayed horizontally instead of vertically?