I am putting together an email template for electronic deposits. All the email will do is let students and customers know that an electronic payment has been made out to them and display the items. The information should look like this:
Date | Invoice# | Description | Amount
12/20/2019 | 01 | Refund | $33
| 02 | Refund | $44
(Since the Date is the Date of Deposit, it will be the same for all the listed invoices.)
There can be up to 30 potential rows like this, one for each invoice number. The trouble is, though, that not all of those rows will have values.
So, for a student or customer that is receiving payment for nine invoices (nine rows), we wouldn't want to show the remaining twenty-one empty rows.
The question, then, is how might we hide these remaining empty rows? Since this will be an email template, I don't know if JavaScript or jQuery would work, since from what I've read, they get blocked by the email system for security reasons.
I thought I might also try converting it from HTML to .NET, and seeing if I could use a Repeater, but I don't know if that would work either.
If the information can be of any use, this email is getting it's information using a T-SQL query. I imagine I can modify it to just not return NULL results, but that still leaves the issue of the empty rows on the front-end side...
Any assistance or insight would be appreciated. I'll post URLs for resources I've read so far below. :)
Thanks!
Resources:
- hide table rows if empty
- Generating row dynamically in javascript?
- Is JavaScript supported in an email message?
- https://kb.mailchimp.com/campaigns/design/limitations-of-html-email
Updated - 3/19/2018
Below is the function I am using:
<script>
$(function(){
$('.row').each(function(){
if($(this).val().trim()=='')
$(this).hide();
})
});
</script>
Since the HTML file is quite long, I don't know that I should post the whole thing inline. Below is the HTML for the first three rows in the table:
<table class="w580" border="0" cellpadding="0" cellspacing="0" width="580">
<tbody><tr>
<td class="w580" width="580">
<div class="article-content" align="left">
<multiline label="Description">
<p style="text-align: center; color: #e54a3d; font-size: larger;">
<strong>
Accounts Receivable Hold Notice
</strong></p>
<hr style="margin: 0 0 1.625em;"/>
<p>Dear firstname,</p>
<p></p>
<p>If you have any questions, you may call the Office of Student Financial Services at 573.592.1793</p>
<p>Have a great day!</p>
<p><strong>Check Date:</strong> checkdate</p>
<table width="580" border="1">
<thead>
<tr>
<th width="145" >Invoice</th>
<th width="145" >Description</th>
<th width="145" >Amount</th>
</tr>
</thead>
<tbody>
<tr class="row">
<td>
@@invoicenum1@@
</td>
<td>
@@desc1@@
</td>
<td>
@@amount1@@
</td>
</tr>
<tr class="row">
<td>
@@invoicenum2@@
</td>
<td>
@@desc2@@
</td>
<td>
@@amount2@@
</td>
</tr>
<tr class="row">
<td>
@@invoicenum3@@
</td>
<td>
@@desc3@@
</td>
<td>
@@amount3@@
</td>
</tr>
All of the items surrounded with @@s (for example, @@invoicenum1@@ ) are the "potential values" that get populated by the results from the database.
So, theoretically, if a field is NULL in the database, it won't put anything there. Then, the jQuery in the head will see that nothing is there and simply hide the row.
My concern, though, is that, if JavaScript and jQuery are blocked by the email clients, that this functionality won't perform.
Updated - 3/21/2018
I've confirmed that the jQuery won't work. I've got the desired visual effect through inline styles - just setting "border: none;" on the individual rows and cells. That way, if it's empty, it just doesn't show...
This works for us, since we have a set maximum number of potential rows (30).
If we wanted to set up a system, though, where the number of rows was determined by the actual number of results returned, any idea how we might do that?
Or do the big companies like Amazon also have a set number of items they'll show when they email you your order details? Maybe they just show you five or six items and tell you "To view your complete order, visit the Orders Page", or something...
