A Table Repeat In An HTML Email

Yes, I’ve voted for the ability to be added to Wappler. I need another alternative or other ideas until this feature is reality. :blush:

I need the following inside an email message.

<!-- TABLE LIST -->
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-sm">
<tbody is="dmx-repeat" dmx-generator="bs4table" dmx-bind:repeat="lm_fund_request_list_ms.data.query_lm_fund_request_list_ms" id="tableRepeat1">
<tr>
<td dmx-text="school_name" class="text-capitalize"></td>
<td dmx-text="school_field" class="text-center"></td>
<td dmx-text="school_location" class="text-center text-capitalize"></td>
<td dmx-text="request_adjusted_amount.toNumber().formatCurrency('$', '.', ',', 2)" class="font-weight-bold text-center"></td>
</tr>
</tbody>
</table>
</div>
<!-- TABLE LIST -->

I wish.

Haha! It would be an awesome feature… been waiting for it for about three years.

1 Like

You cannot have a reactive dom within an email message. The best that would be possible is to use a template engine.

It’s certainly possible now, but you have to create the HTML content in server connect. Put the table row in a repeat which populates a variable and then use the variable in the mail body. The variable within the repeat might look something like:

image

1 Like

Thanks Patrick.

Being the novice that I am, I’m afraid I don’t understand what that is. Could you elaborate on a “template engine” please? Thank you.

Thank you Tom! So, I assign a variable for each row from the table:

<tr>
<td dmx-text="school_name" class="text-capitalize"></td>
<td dmx-text="school_field" class="text-center"></td>
<td dmx-text="school_location" class="text-center text-capitalize"></td>
<td dmx-text="request_adjusted_amount.toNumber().formatCurrency('$', '.', ',', 2)" class="font-weight-bold text-center"></td>
</tr>

And then place that variable in the body of the email? Wow, that sounds like an easy plan!
Thanks, I’ll give it a try.

No - you only need only variable, but in a loop:

image

… although you might also want to include a number of other variables. You can create all the variables first and then include them in the html body:

image

1 Like

I really appreciate you walking me through this.

I’m sorry, but I don’t recall if I’ve ever manually built a loop within Wappler. Unless, all of the tables that had repeaters were considered a loop.

It would be nice to see this long standing feature request (and many others) make its way into core product.

I’m sorry, I should have said ‘repeat’, not ‘loop’. You just need a standard repeat:

image

(which is a type of loop)

If you get a hang of it, you can create a custom extension for it with dynamic header names & values from a repeat and return a HTML table in response.
I have been planning to do so, but haven’t had the time… nor had a use case for any client in recent past.

3 Likes

Please bare with me, but I need to ask for clarification regarding this method of getting dynamic variables to print inside an email message. The code below is the repeat inside the generated table that displays the data inside the email.

<!-- TABLE LIST -->
<div class="table-responsive">
      <table class="table table-bordered table-hover table-sm">
             <tbody is="dmx-repeat" dmx-generator="bs4table" dmx-bind:repeat="lm_fund_request_list_st.data.query_lm_fund_request_list_st" id="tableRepeat1" dmx-animate-enter.duration:3000.delay:3000="fadeIn">
                   <tr class="font-weight-bolder text-primary" dmx-show="( request_adjusted_amount > 0 )">
                       <td class="text-capitalize w-25" dmx-text="school_field"></td>
                       <td class="text-capitalize w-25" dmx-text="school_name"></td>
                       <td class="text-capitalize" dmx-text="school_location"></td>
                       <td class="text-capitalize text-right" dmx-text="request_adjusted_amount.toNumber().formatCurrency('$', '.', ',', 2)"></td>
                   </tr>
            </tbody>
      </table>
</div>
<!-- TABLE LIST -->

My question is this:
Inside the repeat I need to Set Values for each of the dmx-text fields as seen in the code above, i.e., school_field, school_name, school_location, and request_adjusted_amount?

Would this be correct for the first variable: Set Value var_school_field = {{school_field}}
Then the others would follow this syntax below:

To display this inside the email all I have to do is place the following in their appropriate places:
{{var_school_field}} {{var_school_name}} {{var_school_location}} {{var_request_adjusted_amount}} ?

Any comments or suggestions are appreciated!

To create the variable, include the fields you need in each table row. Eg if your variable is named var_schoolDetails, the expression for the variable might be:

{{var_schools}}<tr><td width="75%" class="some_class"><span> <strong>{{school_field}}</strong> {{school_name}} [location: {{school_location}}]</span></td><td align="right" width="25%"><span class="some_class">{{request_adjusted_amount.toNumber().formatCurrency('$', '.', ',', 2)}}</span></td></tr>

… so the SA steps might like something like:

For this part of the html body, you would just include the variable in the relevant place, eg:

image

In this case, I have other rows above and below this one, which could also include variables or static content.

I think the most difficult part of creating HTML emails is none of the above, but the actual HTML. If you’re not familiar with HTML emails, you’ll need to do some research. The HTML has to look as if it was written about 20 years ago, using nested tables and limited layout (no Bootstrap etc.). It should probably look like some pretty awful code.

I would try find a template which looks close to what you want. I haven’t tried these, but they look good: https://litmus.com/community/templates

Thank you so very much Tom! I’m going to try my hand at this. I appreciate your assistance.

The info I put on this post may help re generating an html table with a repeat as a HTML email.

1 Like

Thank you Hyperbytes. I’ll take another look at your post again today…

One of my faults is that I have to understand the ‘why’ and the syntax. The older I get, the less patience I have for putting scattered puzzle pieces together. Ha!

1 Like
  1. Does the double single quotes just clear the Set Value variable?

  2. In your example, what is the purpose for the use of: $parent (I am not acquainted with the $parent use).

AH, old post so some differences
yes they are actually two single quotes and were just to set an empty string
$Parent was a term used to refer to a value in a “container” for example

So if you set value myvar = ‘’ i.e. an empty string
You then make a repeat and inside that repeat you again use a set value, say set value myvar = “hello” Wappler would treat those two variables as separate variables as they were set in a difference scope
So in the loop myvar = 'hello" and $parent.myvar refers to the one outside the repeat which still has the value of a empty string = ‘’
I believe $parent is no longer needed, Wappler handles it for you, not 100% sure to be honest as I tend to use session variables now rather than set value to simplify this very issue.

1 Like

So this is like the use of php loops as TomD was saying. Thanks Hyper!