Send Formatted Emails From Power Apps Without Writing Any HTML Code

Send Formatted Emails From Power Apps Without Writing Any HTML Code

Sending email in Power Apps is quite easy to do but if you want to go beyond plain-text and use different styles: fonts, colors, sizes, etc. then the only way to do it is by writing HTML code. The good news is, you don’t actually have to learn HTML, you just have to be clever about it! In this article I’ll show a you simple way to send formatted emails from Power Apps by using Microsoft Outlook to generate the HTML and use it as a template.



I/T Equipment Requests App

The I/T Equipment Requests app allows a Manager to procure computer equipment for their employees. Once the Manager fills-in a form with employee details, the request due date and what equipment is required…



…an email notification is sent to the I/T department that looks like this.



Create a Requests Form

Make a new SharePoint list called ‘IT Equipment Requests’ with the following columns: Employee Name (Text), Department (Choices) , Position (Text), Start Date (Date) and Equipment (Choices). Don’t worry about including any ‘fake list items’. We will create these by submitting the form.

EmployeeNameDepartmentPositionStartDateEquipment



Then open Power Apps Studio, create a new blank canvas app and connect it to the ‘IT Equipment Requests’ SharePoint list. Add an Edit Form called frm_EquipmentRequests to the app with all of the fields shown below.



Also, change the DefaultMode property of the Form to this code so the form will create new entries by default.

FormMode.New



Design The Email Template In Outlook


When the ‘Equipment Request’ form is submitted an email is sent to the I/T department. We want the email to have different text sizes, font weights, colors and a table showing what items were requested. To send a formatted email like the one shown below in Power Apps we would need to write some HTML code. However, that would take alot of effort so fortunately there’s any easier way.

Open the Outlook app and write a new email that looks like this:



Go to the File tab on the ribbon and click Save As.



Then save the email as an HTML document. We have now managed to generate the needed code without spending any effort to write it.



Show An Email Preview

Open the HTML document in Notepad (Windows application) or a text editor of your choosing



Replace all of the single quotes in the document with double-quotes. This is necessary because Power Apps will read a single quote as the end of a text-string rather than HTML.



Go back to Power Apps Studio and insert a new HTML Text control on the screen called htm_EmailPreview. Copy and paste the code from the HTML document into the HTMLText property and enclosed it in double-quotes at the start and the end.



Now a preview of the email is showing but we want to remove the placeholder values and show the data that actually appears inside the form. Manually find and replace the placeholders inside the HTMLText property

Placeholder ValueReplacement Code
employee_name_here“&TextInput_EmployeeName.Text&”
department_name_here“&Dropdown_Department.Selected.Value&”
position_name_here“&TextInput_Position.Text&”
due_date_here“&DatePicker_DueDate.SelectedDate&”



Figuring out how to make the table show each piece of equipment is a little bit trickier. We must locate the section of code where the equipment_name_here placeholder exists and replace it with “&Value&”. Then we wrap that section of code in a CONCAT function to repeat for each piece of equipment. Make sure you include all of the code from the opening <tr> tag to the closing </tr> tag as shown in the image below.



We’re done the hard part. The email preview now shows values from our Request form!



Send The Formatted Email

To send the Email when the form is submitted put this code in the OnSelect property of the Submit button. It saves the HTML from the Email Preview in a variable.

Set(varEmailMessage, htm_Email.HtmlText);
SubmitForm(frm_EquipmentRequest);



Then add the Office365Outlook connector to the app and write this code in the OnSuccess property of the form.

Office365Outlook.SendEmailV2("itdepartment@companyname.com", "Test", varEmailMessage)



To test the email message click on the Submit button. Note: I have hidden the Email Preview in my app by setting its Visible property to false.




The email that appears in your inbox will look exactly like the Email Preview found in the app.





Questions?

If you have any questions or feedback about Send Formatted Emails From Power Apps Without Writing Any HTML Code please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.

Matthew Devaney

Subscribe
Notify of
guest
35 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Krishna Rachakonda
Krishna Rachakonda
1 year ago

Very nice Matt. This approach completely avoids the requirement of learning HTML or spending lot of time in styling & formatting the content in the email. Cool.

Ryan Bond
Ryan Bond
1 year ago

This is a fantastic way to avoid more work than necessary, but it had never occurred to me before! Thanks Matt. Hope the new role is going well

Aske
Aske
1 year ago

Hi Matthew,
Your comment section is disabled on the other post (Patch multiple records /Excel style), so I will post my question here.

How do you make patch function work in bulk, where each line of patch must be done sequentially.
I have a gallery of items, and a data source that prevents updating each line simultaneously.

I have tried the following:
1) Patch(Datasource, Gallery1_1.AllItems, colUpdates) –> Here all items are updates simultaneously

2) ForAll(
  colUpdates,
  Patch(DataSource, Gallery1_1.AllItems, colUpdates) )–> Works, but is slow

Thank you!

Rick
Rick
1 year ago

Office365Outlook.SendEmailV2(“itdepartment@companyname.com”, “Test”, varEmailMessage)

is the length of the message limited using this method as it would be using Launch(mailto://…….)?

Melanie Schwindt
Melanie Schwindt
1 year ago

Fantastic Content!!

Colby Turybury
Colby Turybury
1 year ago

In the “Equipment” section I only see one option. When selecting multiple choices it doesn’t show all that I have clicked. I did activate multiple selections in the sharepoint list.

Colby Turybury
Colby Turybury
1 year ago

In the “Equipment” section every time I select on of the choices it adds it but it also drops the table heading below. In other words Equipment Requested | Choice 1 | Equipment Requested | Choice 2 | Equipment requested | Choice 3. It should be Equipment Requested | Choice 1 | Choice 2 | Choice 3

Taz91
Taz91
1 year ago

I had trouble with replacment all i am getting is this. how to connect my card to the each field.

Well Name: “&Textinput_WellName.Text&”
Job Type:“&Textinput_JobType.Text&”
Fleet: “&Textinput_FleetFleetName.Text&”
Stage#: “&Dropdown_Stage#.Selected.Value&”
Activity:“”&Textinput_Activity.Text&””
Date/Time: Date_Time_here

Last edited 1 year ago by Taz91
Belle Bennitt
Belle Bennitt
6 months ago

Hi Matt!!! Your blogs have saved me multiple times now, so thank you! Is there a way to create this with a table that can expand the number of rows?

Belle
Belle
6 months ago

He’s the best too! Thank you!

Chad Steiner
Chad Steiner
5 months ago

When I use the Office365Outlook.SendEmailV2(“email@company.com” , “Test”, varEmailMessage) the varEmailMessage = Blank. The email preview shows all my fields filled out with data. I assume I’m doing something wrong.

btw, love the article!

Chad Steiner
Chad Steiner
5 months ago

Yes.

OnSelect
Set(varEmailMessage, MessageBody.HtmlText);
SubmitForm(NewEmpForm);

MessageBody is the name of the control I put the HTML text into.

OnSuccess
Office365Outlook.SendEmailV2(“csteiner@albany.edu” , “Test”, varEmailMessage)

When I hover over the varEmailMessage it shows varEmailMessage = Blank

Chad Steiner
Chad Steiner
5 months ago

Matt, you won’t even believe it. I put it down for the weekend, and now it works.

Thanks for your help. It’s greatly appreciated.

Stephanie
Stephanie
4 months ago

Hi Matt, I am new to Powers apps and managed to get everything working except getting the card to pick up the data. What is being returned is the html replacement code. 

Stephanie
Stephanie
4 months ago

I have actually moved on to Plan B and created the email in power automate but would really prefer this method.

HTLM email code.JPG
Stephanie
Stephanie
4 months ago
Reply to  Stephanie

actually this is the correct output for that code

Email output.JPG
Stephanie
Stephanie
4 months ago
Reply to  Stephanie

Also getting an error On Submit button
Set(varEmailMessage, htm_Email.HtmlText); 

Matthew Devaney
Matthew Devaney
4 months ago
Reply to  Stephanie

Please share the error

Stephanie
Stephanie
4 months ago

if I say Set(varEmailMessage, htm_EmailPreview.HtmlText); SubmitForm(Form1);
The error goes away but I am still not getting the content.

Capture.JPG
Stephanie
Stephanie
4 months ago
Reply to  Stephanie

And I also get an error when I change single quotes to double

Capture1.JPG
Stephanie
Stephanie
4 months ago
Reply to  Stephanie

If I change double quotes to single, I get no errors. Now my card shows in the email preview but still no data. If have tried double quotes around the replacement code and get an error. Single quotes takes away the error but still no data.

Capture2.JPG
Stephanie
Stephanie
4 months ago
Reply to  Stephanie

card preview

Capture3.JPG
Stephanie
Stephanie
4 months ago

Thanks Matt, I will certainly give it a try. Appreciate your responses.

Stephanie
Stephanie
4 months ago
Reply to  Stephanie

Hi Matt, I have only kept one field to test the email preview. I now have no errors in my html but still getting the replacement text in my email preview. How does the email preview know to get the data from the form. I feel like there is a disconnect or I am missing something.

Capture4.JPG
Stephanie
Stephanie
4 months ago
Reply to  Stephanie

card output

Capture5.JPG