Solved: Re: Email Notification HTML Table Formatting

tagustin2020 · ‎03-26-2021

Hello everyone,

I'm trying to create a table like email notification based on a Collection of items. The code pictured below isn't throwing any errors, but it also isn't working so something must be wrong. Can anyone spot my mistake? I've attached an editable doc version in addition to these screenshots that show the formula editor color coded version. Thank you! Teresa

The end goal is to have the email look something like this. This email went out on form success versus a Collection so I'm having a hard time converting it to the Collection use case. Can't wait until I'm not so green and this modifications come more naturally! Thanks in advanced for your help!

WarrenBelz · ‎03-28-2021

HI @tagustin2020 ,

As @RandyHayes has pointed out, you need neither Value or ThisItem - just

Text(ExpenseAmount,"[$-en-US]$#,###.00")

The collection field is already numeric (so no Value conversion required) and ThisItem is not required in Concat() functions - you are already referring to the collection and dealing with each item.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

View solution in original post

WarrenBelz · ‎03-26-2021

Hi @tagustin2020 ,

I cannot immediately see anything wrong except you have no headers on the table. The one thing different to your example however is that your Concat() code will produce a horizontal table (record per row) - not the headers at the left in your post. I cannot however open your Word document to properly lay it out. If you post it as text, it would be far easier to examine properly.

Also, have you tried putting the code in a HTML Text box (you can hide it later) and getting it formatted correctly (you see the result immediately) and then send the content as the email body.

tagustin2020 · ‎03-26-2021

@WarrenBelz

Hi Warren,

Thanks for getting back to me. Here is a copy/paste of the code. Sorry that the email screenshot was misleading, I should have clarified that I am looking to create a table with headers at the top of each column (e.g. Category, Sub-Category, etc.), followed by repeating rows of the data inputs from the Collection. Teresa

Office365.SendEmailV2(varUser.Email,"Test Notification Email","
<!DOCTYPE html>
<html>
<head>
<style>
Table {
font-family:arial,sans-serif;
border-Bottom: 1px solid #ddd;
width: 50%;
border-collapse: collapse;
border-spacing: 5px;
}
td {
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
font-size: 12px;
border-collapse: collapse;
}
th {
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
font-size: 12px;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Budget Expense Notification Details</h2>
<p>The following expenses were submitted today.</p>
<table>
<tr>
<th>Transaction Date</th>
<th>Budget Category</th>
<th>Sub-Category</th>
<th>Merchant</th>
<th>Expense Amount</th>
<th>Description</th>
</tr>"
&
Concat(colExpenses, "<tr>
<td>" & TransDate & "</td>
<td>" & BudgetCategory & "</td>
<td>" & SubCategory & "</td>
<td>" & ExpenseAmount & "</td>
<td>" & Description & "</td></tr>") &
"</table></body></html><p>Total: " & lblCollectionSum.Text, {IsHtml: true, Importance: "Normal"});

This abbreviated version isn't working either:

Office365.SendEmailV2(varUser.Email,"Test Email",
"<table><tr>
<th>Transaction Date</th><th>Budget Category</th><th>Sub-Category</th><th>Merchant</th><th>Expense Amount</th><th>Description</th></tr>"
& Concat(colExpenses,
"<tr><td>" & TransDate & "</td>
<td>" & BudgetCategory & "</td>
<td>" & SubCategory & "</td>
<td>" & ExpenseAmount & "</td>
<td>" & Description & "</td>
</tr></table>",
{IsHtml: true, Importance: "Normal"});

WarrenBelz · ‎03-26-2021

Hi @tagustin2020 ,

You might try Office365Outlook.SendEmailV2 - I just sent myself the mail below using your code and a list of PCs I have.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

Jagadeeshk · ‎03-28-2021

Only use table content, html declaration not required

tagustin2020 · ‎03-28-2021

@WarrenBelz

@Jagadeeshk

Hello,

A big thank you to the both of you for your advice! I really appreciate it. As you can see, the email formatting is really starting to take shape. Warren, I was able to get the email going with your suggestion to switch over to Office365Outlook.SendEmailV2. I do have a follow-up question for the both of you when it comes to displaying dollar signs in HTML. Here is what the email currently looks like. As you can see, the Total below the table displays as currency, but the figures within the table do not. I tried entering double quotes around the dollar sign and single quotes, but can't seem to get it right. Can you help me? If you scroll down, you'll see the revised table code. I've colored the Amount line red.

For the sake of reference the currency formulas in the app are:

Text property of the amount in the Collection is:

Text(Value(ThisItem.ExpenseAmount),"[$-en-US]$#,###.00")

Text property for the Total label in the app (the one outside the Collection) is:

"Total: " & Coalesce(Text(Sum(colExpenses,ExpenseAmount),"[$-en-US]$#,##0.00"),"$0.00")

Here is my revised HTML code. Jag, can you confirm I pared down the html code per what you had in mind?

Office365Outlook.SendEmailV2(varUser.Email,"418001 Admin Budget Expense Confirmation","
<html>
<head>
<style>
Table {
font-family:arial,sans-serif;
border-Bottom: 1px solid #ddd;
width: 50%;
border-collapse: collapse;
border-spacing: 5px;
}
td {
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
font-size: 12px;
border-collapse: collapse;
}
th {
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
font-size: 12px;
border-collapse: collapse;
}
</style>
</head>
<body>
<h3>Thank you for your report submission.</h3>
<p>Here is a summary of the expenses you entered into the budget tracking tool today. You can view or edit your submission at any time within the app: <a href='https://apps.powerapps.com/play/123?tenantId=123&hidenavbar=true'>418001 Admin Budget Tracking App</a>.</p>
<table>
<tr>
<th>Transaction Date</th>
<th>Budget Category</th>
<th>Sub-Category</th>
<th>Merchant</th>
<th>Amount</th>
<th>Description</th>
</tr>"
&
Concat(colExpenses, "<tr>
<td>" & TransDate & "</td>
<td>" & BudgetCategory & "</td>
<td>" & SubCategory & "</td>
<td>" & Title & "</td>
<td>'$' " & ExpenseAmount & "</td>
<td>" & Description & "</td></tr>") &
"</table></body></html><p>" & lblCollectionSum.Text, {IsHtml: true, Importance: "Normal"});

RandyHayes · ‎03-28-2021

@tagustin2020

You are trying to put a label value into your html that ends up outside of the html tags. Also, if you want to format your amount, just do those in the Html with the normal Text function.

Consider the following Formula (also note, I placed all the html in a with variable as it makes it a little easier to work with when it is outside of the total formula - also note, with V2, IsHtml is no longer needed):

With({_html:
"<html>
    <head>
      <style>
         Table {
            font-family:arial,sans-serif;
            border-Bottom: 1px solid #ddd;
            width: 50%;
            border-collapse: collapse;
            border-spacing: 5px;
           }
         td {
            text-align: left;
            padding: 8px;
            border-bottom: 1px solid #ddd;
            font-size: 12px;
            border-collapse: collapse;
           }
         th {
            text-align: left;
            padding: 8px;
            border-bottom: 1px solid #ddd;
            font-size: 12px;
            border-collapse: collapse;
           }
      </style>
   </head>
   <body>
      <h3>Thank you for your report submission.</h3>
      <p>Here is a summary of the expenses you entered into the budget tracking tool today. You can view or edit your submission at any time within the app: <a href='https://apps.powerapps.com/play/86532347-f5a-4552-3e55-456789f12347?tenantId=4ab32336-e567-324a-32c... Admin Budget Tracking App</a>.</p>
      <table>
         <tr>
           <th>Transaction Date</th>
           <th>Budget Category</th>
           <th>Sub-Category</th>
           <th>Merchant</th>
           <th>Amount</th>
           <th>Description</th>
         </tr>" &
         Concat(colExpenses, "<tr>
             <td>" & TransDate & "</td>
             <td>" & BudgetCategory & "</td>
             <td>" & SubCategory & "</td>
             <td>" & Title & "</td>
             <td>" & Text(ExpenseAmount, "$#,##0.00") & "</td>
             <td>" & Description & "</td></tr>"
         ) &
     "</table>" &
     lblCollectionSum.Text & "     
  </body>
</html>"},


    Office365Outlook.SendEmailV2(
        varUser.Email,
        "418001 Admin Budget Expense Confirmation",
        {Importance: "Normal"}
    )
)

I hope this is helpful for you.

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
NOTE: My normal response times will be Mon to Fri from 1 PM to 10 PM UTC (and lots of other times too!)
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes
Really want to show your appreciation? Buy Me A Cup Of Coffee!

WarrenBelz · ‎03-28-2021

HI @tagustin2020 ,

As @RandyHayes has pointed out, you need neither Value or ThisItem - just

Text(ExpenseAmount,"[$-en-US]$#,###.00")

The collection field is already numeric (so no Value conversion required) and ThisItem is not required in Concat() functions - you are already referring to the collection and dealing with each item.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.