Send Formatted Emails From Power Apps Without Writing Any HTML Code

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/send-formatted-emails-from-power-apps-without-writing-any-html-code/. Author: Matthew Devaney.

Send Formatted Emails From Power Apps Without Writing Any HTML Code Posted by - Matthew Devaney on - October 4, 2020 49 Comments

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. EmployeeName Department Position StartDate Equipment

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 Code language: CSS ( css ) 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 Value Replacement 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); Code language: JavaScript ( javascript )

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) Code language: CSS ( css )

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. Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up 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. CONCAT function Email HTML HTML Text Control Office 365 Outlook Connector Outlook Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps