Create email using PowerApps data

[Anonymous]

Hi there everyone!

My current project using PowerApps is to create an "E-Thank You" card (ala o365 Praise) that is sent to users via email.

What I would like to do is have checkboxes and text fields to tailor the email to the user, then on the next page of the PowerApp, have a "FROM:" and a "TO:" field to enter email addresses, then click a "SEND" button to trigger the email.

I have a lot of the scructure of the PowerApp built, and I am even able to trigger the email using the "Office365.SendEmail". However, I am having a tough time figuring out how to add the text fields and the checkbox selections to the email, and stylizing the email so it looks less like text and more like a thank you card.

Any tips, tricks, thoughts, or feedback?

Thanks!

[Meneghino · Accepted solution]

Hi @Anonymous

I have done a fair bit of work on this and you can get some great results by using HTML in your email, including tables with data from your data sources and collections.

Basically just have a formula create the HTML text and set the email HTML to true, like this for the send button OnSelect property:

Office365.SendEmail(TextInputEmailTo.Text, TextInputEmailSubject.Text, HtmlTextEmail.HtmlText, {IsHtml: true}); Navigate(ScreenConfirmation, ScreenTransition.None, {MessageText: "The email was sent."})

Where in my case HtmlText and the email subject are set by this button OnSelect:

Navigate(ScreenEmail,ScreenTransition.None,
	{EmailSubject: DropdownEntity.Selected.Entity_name&" - Report for "&DropdownInstrument.Selected.Instrument_name,
    
    EmailHtml:
"<p style='font-weight:bold'>Loan report to "&

Right(Text(LoanAnalysisFinalDateInteger),2)&"/"&
Mid(Text(LoanAnalysisFinalDateInteger),5,2)&"/"&
Left(Text(LoanAnalysisFinalDateInteger),4)

&" for "& DropdownEntity.Selected.Entity_name &"</p>
<p style='font-weight:bold'>Instrument: "& DropdownInstrument.Selected.Instrument_name &"</p>
"
&

"
<p style='font-weight:bold'>Summary</p>
<table border='1'>
  <tr>
    <th style='width:1em; padding-left:1em; padding-right:1em; white-space: nowrap'>Start date</th>
    <th style='width:1em; padding-left:1em; padding-right:1em; white-space: nowrap'>End date</th>
    <th style='width:1em; padding-left:1em; padding-right:1em; white-space: nowrap'>Days</th>
    <th style='width:1em; padding-left:1em; padding-right:1em; white-space: nowrap'>Closing balance</th>
    <th style='width:1em; padding-left:1em; padding-right:1em; white-space: nowrap'>Interest accrued</th>
    <th style='width:1em; padding-left:1em; padding-right:1em; white-space: nowrap'>Interest paid</th>
  </tr>"

&

"<tr>
    <td style='text-align:center; padding-left:1em; padding-right:1em; white-space: nowrap'>"& Last(GalleryLoanReport.AllItems).TextBoxGallStartDate.Text &"</td>
    <td style='text-align:center; padding-left:1em; padding-right:1em; white-space: nowrap'>"& First(GalleryLoanReport.AllItems).TextBoxGallEndDate.Text &"</td>
    <td style='text-align:right; padding-left:1em; padding-right:1em; white-space: nowrap'>"& Text(Sum(GalleryLoanReport.AllItems, TextBoxGallCountOfDays ), "[$-en-GB]#,##0") &"</td>
    <td style='text-align:right; padding-left:1em; padding-right:1em; white-space: nowrap'>"& Text(Sum(GalleryLoanReport.AllItems, TextBoxGallAmountChange ), "[$-en-GB]#,##0.00") &"</td>
    <td style='text-align:right; padding-left:1em; padding-right:1em; white-space: nowrap'>"& Text(Sum(GalleryLoanReport.AllItems, TextBoxGallInterestAccrued ), "[$-en-GB]#,##0.00") &"</td>
    <td style='text-align:right; padding-left:1em; padding-right:1em; white-space: nowrap'>"& Text(Sum(GalleryLoanReport.AllItems, TextBoxGallInterestPaid ), "[$-en-GB]#,##0.00") &"</td>
  </tr>"

&

"</table>" & "<p></p>"

&

"
<p> <span style='font-weight:bold'>Details</span> (in reverse chronological order)</p>
<table border='1' style='width:100%'>
  <tr>
    <th style='width:1em; padding-left:1em; padding-right:1em; white-space: nowrap'>Start date</th>
    <th style='width:1em; padding-left:1em; padding-right:1em; white-space: nowrap'>End date</th>
    <th style='width:1em; padding-left:1em; padding-right:1em; white-space: nowrap'>Days</th>
    <th style='width:1em; padding-left:1em; padding-right:1em; white-space: nowrap'>Change in balance</th>
    <th style='width:1em; padding-left:1em; padding-right:1em; white-space: nowrap'>Closing balance</th>
    <th style='width:1em; padding-left:1em; padding-right:1em; white-space: nowrap'>Applicable rate</th>
    <th style='width:1em; padding-left:1em; padding-right:1em; white-space: nowrap'>Interest accrued</th>
    <th style='width:1em; padding-left:1em; padding-right:1em; white-space: nowrap'>Interest paid</th>
  </tr>"

&

Concat(GalleryLoanReport.AllItems,    "<tr>
    <td style='text-align:center; padding-left:1em; padding-right:1em; white-space: nowrap'>"& TextBoxGallStartDate &"</td>
    <td style='text-align:center; padding-left:1em; padding-right:1em; white-space: nowrap'>"& TextBoxGallEndDate &"</td>
    <td style='text-align:right; padding-left:1em; padding-right:1em; white-space: nowrap'>" & TextBoxGallCountOfDays &"</td>
    <td style='text-align:right; padding-left:1em; padding-right:1em; white-space: nowrap'>" & TextBoxGallAmountChange &"</td>
    <td style='text-align:right; padding-left:1em; padding-right:1em; white-space: nowrap'>" & TextBoxGallClosingBalance &"</td>
    <td style='text-align:right; padding-left:1em; padding-right:1em; white-space: nowrap'>" & TextBoxGallRate &"</td>
    <td style='text-align:right; padding-left:1em; padding-right:1em; white-space: nowrap'>" & TextBoxGallInterestAccrued &"</td>
    <td style='text-align:right; padding-left:1em; padding-right:1em; white-space: nowrap'>" & TextBoxGallInterestPaid &"</td>
  </tr>
  ")

&

"</table>"
}
)

[Meneghino]

PS You can preview the HTML email in an HTML text control in PowerApps

[Anonymous]

Meneghino - 

Thanks for the reply! That definitely gets me going in the right direction, thank you. But it would appear the only HTML boxes I can add are HTMLtext boxes. What if I wanted to add some embedded images, would that be possible?

[Meneghino]

Hi @Anonymous

You can certainly add images in HTML as links to these images with the HTML img tag, but I am sure you knew that already.

More difficult is the question of embedding the actual image itself (i.e. not a link).  I believe this is also possible, but I am not a majot HTML expert.

Basically I think you can do anything that you can do with HTML.

[Cologne_Claret]

Here is another excellent example from Shane Young (PowerApps911, Bold Zebras):

https://www.youtube.com/watch?v=2rfAQe1kK8M

[Remygopinathan]

can you show how to set the HTML text formula and which screen the button is placed

[Specoop]

Also interested in this - guessing we need to use flow and datauri?

[Cologne_Claret]

In case anyone uses 'Launch("mailto:")' to open a new mail in Outlook with the "To:" field and other fields including subject and body etc. so that the user can then enter the mail body or make changes before sending, please be aware that using this method only works if the entire length of the "mailto:<emailaddr1>;<emailaddr2>;...<emailaddrx>?subject=...&body=..." string is less than or equal to 2048 characters. This I believe is the maximum URL length supported by the standard web browsers.

If the length exceeds 2048 you will not get a warning. The Outlook window will simply not open.

[Anonymous]

Thank you @Meneghino for your extensive reply!

Do you have a picture of the end result? or a Package so I can study it in detail?

If I understand correctly you're creating two tables and you use a dropdown information for the mail Subject.

What i do not understand is the use of Navigating between the screens 'Screen Email' and 'ScreenConfirmation'.

My goal is to create html-body text with table based on [@PowerBIIntegration].Data. (App will be embeded in PowerBI and must send mail containing selected items).

Rgds,

Rocco