Closed rafaelmonteiro10 closed 5 days ago
@rafaelmonteiro10 Thank you for your question
I guess you use Every row
in Render template
option
In this case, I see one way at the current moment is to use handlebars library functionality like .registerHelper
and define the necessary keys in the data object.
Please, follow my example using your data. I'm sure it will help to solve the question
For example, I create data using Business Input Data Source
The next step is to get correct data before mapping for headers and each row.
For that, please use Before Content Rendering
Code editor. I use Custom Handlebars helper
Link to documentation: Custom Handlebars helper
Code to copy
console.log('console >> context', context)
/**
* Define the necessary header keys
*/
const tableHeaderKeys = [
'STam_Tam_1',
'STam_Tam_2',
'STam_Tam_3',
'STam_Tam_4',
'STam_Tam_5'
]
/**
* Define the necessary first row keys
*/
const tableFirstRowsKeys = [
'EEln_Qt_ACrt_1',
'EEln_Qt_ACrt_2',
'EEln_Qt_ACrt_3',
'EEln_Qt_ACrt_4',
'EEln_Qt_ACrt_5'
]
/**
* Define the necessary second row keys
*/
const tableSecondRowsKeys = [
'EPpi_Qt_Tam_1',
'EPpi_Qt_Tam_2',
'EPpi_Qt_Tam_3',
'EPpi_Qt_Tam_4',
'EPpi_Qt_Tam_5'
]
/**
* use handlebars.registerHelper to create array for table header
*/
context.handlebars.registerHelper('headersArray', (context) => {
const headersArray = tableHeaderKeys.map(key => context.data.root[key])
const newContext = Object.assign({});
newContext.value = headersArray;
return newContext;
});
/**
* use handlebars.registerHelper to create array for table row
*/
context.handlebars.registerHelper('rowOneArray', (context) => {
const headersArray = tableHeaderKeys.map(key => context.data.root[key])
const rowOneArray = tableFirstRowsKeys.map((key, index) => {
/**
* check value for appropriate header cell
*/
if (headersArray[index]) {
return context.data.root[key]
} else return ''
})
const newContext = Object.assign({});
newContext.value = rowOneArray;
return newContext;
});
/**
* use handlebars.registerHelper to create array for table row
*/
context.handlebars.registerHelper('rowTwoArray', (context) => {
const headersArray = tableHeaderKeys.map(key => context.data.root[key])
const rowTwoArray = tableSecondRowsKeys.map((key, index) => {
/**
* check value for appropriate header cell
*/
if (headersArray[index]) {
return context.data.root[key]
} else return ''
})
const newContext = Object.assign({});
newContext.value = rowTwoArray;
return newContext;
});
After that, we can use newly created helpers in Content
code editor. I am use [Built-in Helpers]
Code to copy:
<div class="card">
<div class="Title">
<strong>{{Responsavel}}</strong>
</div>
<div class="info-row">
<strong>Packing List:</strong>
{{PackingList}}
</div>
<div class="info-row">
<strong>Encomenda interna:</strong>
{{EncomendaInterna}}
</div>
<table id="infoTable">
<tr>
<th></th>
<th>Total</th>
{{#with (headersArray)}}
{{#each value}}
{{#if (eq this "")}}
{{else}}
<th>{{this}}</th>
{{/if}}
{{/each}}
{{/with}}
</tr>
<tr>
<th>Separar</th>
<td>{{EEln_Qt_Total}}</td>
{{#with (rowOneArray)}}
{{#each value}}
{{#if (eq this "")}}
{{else}}
<td>{{this}}</td>
{{/if}}
{{/each}}
{{/with}}
</tr>
<tr>
<th>Separado</th>
<td>{{EPpi_Qt_Total}}</td>
{{#with (rowTwoArray)}}
{{#each value}}
{{#if (eq this "")}}
{{else}}
<td>{{this}}</td>
{{/if}}
{{/each}}
{{/with}}
</tr>
</table>
</div>
In the result, I see 3 rows with dynamic data for the table
Is it possible to make this "column chooser" dynamic?