web
You’re offline. This is a read only version of the page.
close
Skip to main content
Community site session details

Community site session details

Session Id : 19ziJrwPYoTF4FYVOdq8eI
Power Apps - Building Power Apps
Answered

Email Notification HTML Table Formatting

Like (1) ShareShare
ReportReport
Posted on 26 Mar 2021 23:18:38 by

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

 

Email1ss.png

Email2ss.png

 

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!

 

EmailSample.png

Categories:
  • tagustin2020 Profile Picture
    on 29 Mar 2021 at 00:05:52
    Re: Email Notification HTML Table Formatting

    Thank you Warren. The dollar signs are displaying correctly now. Much appreciated!

  • Verified answer
    WarrenBelz Profile Picture
    148,894 Most Valuable Professional on 28 Mar 2021 at 20:26:50
    Re: Email Notification HTML Table Formatting

    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.

  • RandyHayes Profile Picture
    76,287 Super User 2024 Season 1 on 28 Mar 2021 at 19:00:30
    Re: Email Notification HTML Table Formatting

    @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.

     

     

  • tagustin2020 Profile Picture
    on 28 Mar 2021 at 16:49:54
    Re: Email Notification HTML Table Formatting

    @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")

     

    Email Dollar SS.png

    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"});

  • Jagadeeshk Profile Picture
    457 on 28 Mar 2021 at 14:41:31
    Re: Email Notification HTML Table Formatting

    Only use table content,  html declaration not required 

  • WarrenBelz Profile Picture
    148,894 Most Valuable Professional on 27 Mar 2021 at 00:41:38
    Re: Email Notification HTML Table Formatting

    Hi @tagustin2020 ,

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

    WarrenBelz_0-1616805661357.png

     

    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.

     

  • tagustin2020 Profile Picture
    on 27 Mar 2021 at 00:12:00
    Re: Email Notification HTML Table Formatting

    @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 Profile Picture
    148,894 Most Valuable Professional on 26 Mar 2021 at 23:48:58
    Re: Email Notification HTML Table Formatting

    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.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Announcing our 2025 Season 2 Super Users!

A new season of Super Users has arrived, and we are so grateful for…

Paul Stork – Community Spotlight

We are honored to recognize Paul Stork as our July 2025 Community…

Congratulations to the June Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
WarrenBelz Profile Picture

WarrenBelz 791 Most Valuable Professional

#2
MS.Ragavendar Profile Picture

MS.Ragavendar 410 Super User 2025 Season 2

#3
mmbr1606 Profile Picture

mmbr1606 275 Super User 2025 Season 2