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

Notifications

Announcements

Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / Email Notification HTM...
Power Apps
Unanswered

Email Notification HTML Table Formatting

(1) ShareShare
ReportReport
Posted on 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:
I have the same question (0)
  • WarrenBelz Profile Picture
    153,026 Most Valuable Professional on at

    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 Profile Picture
    on at

    @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
    153,026 Most Valuable Professional on at

    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.

     

  • Jagadeeshk Profile Picture
    457 on at

    Only use table content,  html declaration not required 

  • tagustin2020 Profile Picture
    on at

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

  • RandyHayes Profile Picture
    76,297 Super User 2024 Season 1 on at

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

     

     

  • Verified answer
    WarrenBelz Profile Picture
    153,026 Most Valuable Professional on at

    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.

  • tagustin2020 Profile Picture
    on at

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

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

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Ajay Kumar Gannamaneni – Community Spotlight

We are honored to recognize Ajay Kumar Gannamaneni as our Community Spotlight for December…

Leaderboard > Power Apps

#1
WarrenBelz Profile Picture

WarrenBelz 793 Most Valuable Professional

#2
Michael E. Gernaey Profile Picture

Michael E. Gernaey 333 Super User 2025 Season 2

#3
Power Platform 1919 Profile Picture

Power Platform 1919 268

Last 30 days Overall leaderboard