I'm using html templates to deliver email to my customers. The template holds a table, and I need this table to show or hide rows based on the data it's receiving. The data is injected to the HTML using handlebars.
I tried to add conditional if to the table, which works fine on the browser, but not when seeing the email:
<table class="tg">
<thead>
<tr>
<th class="tg-0pky">Name</th>
<th class="tg-0pky">{{ recipientName }}</th>
</tr>
</thead>
<tbody>
{{#if recipientId}}
<tr>
<td class="tg-0pky">ID</td>
<td class="tg-0pky">{{ recipientId }}</td>
</tr>
{{/if}}
{{#if recipientBank}}
<tr>
<td class="tg-0pky">Bank</td>
<td class="tg-0pky">{{ recipientBank }}</td>
</tr>
{{/if}}
{{#if recipientBranch}}
<tr>
<td class="tg-0pky">Branch</td>
<td class="tg-0pky">{{ recipientBranch }}</td>
</tr>
{{/if}}
{{#if recipientAccountNumber}}
<tr>
<td class="tg-0pky">Account number<br/></td>
<td class="tg-0pky">{{ recipientAccountNumber }}</td>
</tr>
{{/if}}
{{#if recipientAccountType}}
<tr>
<td class="tg-0pky">Account type</td>
<td class="tg-0pky">{{ recipientAccountType }}</td>
</tr>
{{/if}}
<tr>
<td class="tg-0pky">Amount to receive</td>
<td class="tg-0pky">{{ recipientReceive }}</td>
</tr>
</tbody>
</table>
When receiving the email:
When I receive the email, the rows are shown or not based on the data injected, but the table loses its formatting.
I've read that using a script is not the best way to handle this, because it's not a good practice to use scripts in email.
How can I dynamically show or hide the rows if the variable is present or not?
Related
Hi all I would like to extract 25.8 value from this html block using xpath
the html code is from a weather website, https://app.weathercloud.net/
"<div id=""gauge-rainrate""><h3>Intensidad de lluvia</h3><canvas id=""rainrate"" width=""200"" height=""200""></canvas><div class=""summary"">
<table>
<tbody><tr>
<th> mm/h</th>
<th class=""max""><i class=""icon-chevron-up icon-white""></i> Máx </th>
</tr>
<tr>
<td class=""grey"">Diaria</td>
<td><a id=""gauge-rainrate-max-day"" rel=""tooltip"" title="""" data-original-title=""22/04/2022 00:00"">0.0</a></td>
</tr>
<tr>
<td class=""grey"">Mensual</td>
<td><a id=""gauge-rainrate-max-month"" rel=""tooltip"" title=""21/04/2022 02:15"">25.8</a></td>
</tr>
<tr>
<td class=""grey"">Anual</td>
<td><a id=""gauge-rainrate-max-year"" rel=""tooltip"" title=""21/04/2022 02:15"">25.8</a></td>
</tr>
</tbody></table>
</div></div>"
I use this expression to extract in a google spreadsheet cell
=IMPORTXML("https://app.weathercloud.net/d5044837546#current";"//a[#id='gauge-rainrate-max-month']")
apparently the code is correct but my output is always
-
I don't understand why...
I'm trying to display an HTML DataTables URL to the actual image in an Excel column.
Right now, when I export the DataTable to Excel it populates the corresponding column with the URL itself, what I want to achieve is to actually populate the Excel column with the Image, not the Image URL.
Right now, I can see the image for the comment.screenshot variable into HTML, but in Excel, it is blank, while for the rest of comment.screenshot1,comment.screenshot2 and comment.screenshot3, only the URL is populated in Excel.
jQuery:
$("#tableComments").DataTable({
stripHtml: !1,
dom: "Bfrtip",
buttons: ["copyHtml5", "excelHtml5", "csvHtml5", "pdfHtml5"]
})
HTML:
<table id="tableComments" class="display table table-info table-striped">
<thead>
<tr>
<th>User</th>
<th>Version</th>
<th>Round</th>
<th>Comment</th>
<th>Screenshot #1</th>
<th>Screenshot #2</th>
<th>Screenshot #3</th>
<th>Screenshot #4</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{% for comment in comments %}
<tr>
<td>{{ comment.user.username }}</td>
<td>{{ comment.versionName }}</td>
<td>{{ comment.round }}</td>
<td>{{ comment.comment }}</td>
<td><img src="{{ comment.screenshot }}" /></td>
<td>{{ comment.screenshot1 }}</td>
<td>{{ comment.screenshot2 }}</td>
<td>{{ comment.screenshot3 }}</td>
<td>{{ comment.approved }}</td>
</tr>
{% endfor %}
</tbody>
</table>
I highly appreciate your help!
Instead of Datatables export buttons you may use a different approach using encodeURIComponent:
The snippet:
$("#tableComments").DataTable({
stripHtml: !1,
dom: 'Bfrtip',
buttons: ['copyHtml5', 'csvHtml5', 'pdfHtml5']
})
$('button').on('click', function(e) {
window.open('data:application/vnd.ms-excel,' + encodeURIComponent( document.getElementById('tableComments').outerHTML));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js"></script>
<button>Export To Excel</button>
<table id="tableComments" class="display table table-info table-striped">
<thead>
<tr>
<th>User</th>
<th>Version</th>
<th>Round</th>
<th>Comment</th>
<th>Screenshot #1</th>
<th>Screenshot #2</th>
<th>Screenshot #3</th>
<th>Screenshot #4</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>username1</td>
<td>versionName</td>
<td>round</td>
<td>comment </td>
<td><img src="https://dummyimage.com/100x100/000/fff&text=1"/></td>
<td>screenshot1</td>
<td>screenshot2</td>
<td>screenshot3</td>
<td>approved</td>
</tr>
<tr>
<td>username2</td>
<td>versionName</td>
<td>round</td>
<td>comment </td>
<td><img src="https://dummyimage.com/100x100/000/fff&text=2"/></td>
<td>screenshot1</td>
<td>screenshot2</td>
<td>screenshot3</td>
<td>approved</td>
</tr>
<tr>
<td>username3</td>
<td>versionName</td>
<td>round</td>
<td>comment </td>
<td><img src="https://dummyimage.com/100x100/000/fff&text=3"/></td>
<td>screenshot1</td>
<td>screenshot2</td>
<td>screenshot3</td>
<td>approved</td>
</tr>
</tbody>
</table>
I want to create a table that its data is a Map< String, List < Object> >.
So the table has one header that and the rows should have the exact data.
Map.key
Object.item1
Object.item2
Object.item3
So since it is a List of Object i want one row for every Object of the List and the Map.key to be repeated.
So i need to iterate through keys like
<table>
<thead>
<tr>
<th>Code</th>
<th>Status</th>
<th>Flag</th>
<th>Message</th>
</tr>
</thead>
<tbody>
<tr th:each= "result : ${myMap}">
<td th:text="${result.key}"></td>
<td><table>
<tr th:each="obj: ${result.value}">
<td th:text="${not #lists.isEmpty(obj.errorList)}?'Error':'Warning'"></td>
<td th:text="${obj.flag}==true?'YES':'NO'"></td>
<td th:text="${not #lists.isEmpty(obj.errorList)}?${obj.warningList}:${obj.errorList}"></td>
</tr>
</table></td>
</tr>
</tbody>
</table>
but this solution places a table in a table. I want to use one header and iterate the lists and place the variables in the main table .
I think you're looking for a structure like this:
<table>
<thead>
<tr>
<th>Code</th>
<th>Status</th>
<th>Flag</th>
<th>Message</th>
</tr>
</thead>
<tbody>
<th:block th:each= "result : ${myMap}">
<tr th:each="obj: ${result.value}">
<td th:text="${result.key}" />
<td th:text="${not #lists.isEmpty(obj.errorList)}?'Error':'Warning'" />
<td th:text="${obj.flag}==true?'YES':'NO'" />
<td th:text="${not #lists.isEmpty(obj.errorList)}?${obj.warningList}:${obj.errorList}" />
</tr>
</th:block>
</tbody>
</table>
What would be the best way to dynamically add an HTML element, such as another column onto a basic HTML table?
I want to have a button below the table, and if the user were to click the button, the event would add the same amount of rows already in the table and add another column. I would want to support about 5 extra columns being added to the table.
Here's my HTML table as of right now:
<table>
<thead>
<tr>
<th id="row-tag"></th>
<th id="option-column">Option 1</th>
</tr>
</thead>
<tbody>
<tr>
<td id="row-tag">P</td>
<td id="option-column">{{ p }}</td>
</tr>
<tr id="row-tag">
<td>
<app-a-p (saveButtonClick)="toggleAP($event)"
[modModalValues]="modModalValues">
</app-a-p>
</td>
<td id="option-column">
<div class="input-group input-group-sm">
$<input
*ngIf="toggleAP==true"
type="text"
name="aP"
size="10"
disabled
value=""
/>
<input
*ngIf="toggleAP==false"
type="text"
name="aP"
size="10"
[ngModel]="con.pA"
(ngModelChange)="con.pA = $event" appFormatP
(blur)="checkAP($event.target.value);
inputTracker.addModifiedValue('Option 1', $event.target.value)"
/>
</div>
</td>
</tr>
<tr>
<td id="row-tag">L</td>
<td id="option-column">${{l}}</td>
</tr>
<tr>
<td id="row-tag">R</td>
<td id="option-column">${{r}}</td>
</tr>
</tbody>
</table>
I think in Angular, you define table based on your data. for example, you have fields array defining columns, and data array defines the what's actually in the table.
<table >
<thead>
<tr>
<th *ngFor='let key of this.fields'>{{key}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let row of this.data ' >
<td scope="row" *ngFor='let key of this.fields'> {{row[key]}} </td>
</tr>
</tbody>
</table>
when you need a new column, just push a new field into fields. like
fields.push('newcolumn');
when you need a new row, just do:
data.push({col1: '', col2:'', newcolumn: ''});
Look into the insertRow() and insertCell() functions in JavaScript. This alongside an onClick function that you write will let you edit the table.
A good way of generating a table on UI when using angular would be to use 2D-array (row*column) use can have a button using which you can dynamically add values to this array and have another row/column to the table.
I want to make a table like below:
<table>
<thead>
<tr>
<th rowspan="2" ng-repeat="item in someitems">{{ item.title }}</th>
<th colspan="{{ group.items.length }}" ng-repeat="group in some_item_groups">{{ group.title }}</th>
</tr>
<tr>
<th ng-repeat="item in (group in some_item_groups).items">{{ item.title }}</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
(I tried to add table pic here but don't have enough reputation points.)
Is there any way to draw this type of table with angular ng-repeat?