Power Apps Send Email Using Outlook - The Complete Guide

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/power-apps-send-email-using-outlook-the-complete-guide/. Author: Matthew Devaney.

Power Apps Send Email Using Outlook – The Complete Guide Posted by - Matthew Devaney on - November 20, 2022 73 Comments

Want to learn how to send an email in Power Apps? You’ve come to the right place. In this handy-guide I’ll show you all of the techniques I know for sending email with the Office 365 Outlook connector . We’ll start with the basics, then look at how to include file attachments , use rich text formatting , embedded images , HTML tables and web links . Download Free PDF   😺 Table of Contents The Setup Email To, Subject and Body Email To Using A People Picker Email With CC and BCC Email File Attachments Email Image Attachments Email Rich Text Messages

Email Embedded Images Using Rich Text Control

Email Embedded Images Using Add Picture Control Email An HTML Table Email With Links

Email With Links Using Rich Text Control Email With Deep Links To Power Apps Email Basics The Setup

We will start by creating a basic app and then decide which email features to add. Open Power Apps Studio and create a new mobile app from blank. Add the Office365Outlook connector to the app.

Insert the following controls onto the screen. Arrange the controls to look like the image above. Name Control Purpose lbl_EmailTo Label Title for the Email To text input txt_EmailTo Text Input Write the email address of recipients lbl_Subject Label Title for the Subject text input txt_Subject Text Input Write the subject line lbl_Body Label Title for the email Body txt_Body Text Input Write a message in the email body btn_SendEmail Button Press to send an email Email To, Subject and Body

Every email must have a recipient, a subject and a message.

Write this code in the OnSelect property of the button to send an email. Office365Outlook .SendEmailV2 ( txt_EmailTo .Text , txt_Subject .Text , txt_Body .Text ); Code language: CSS ( css ) Email To Using A People Picker

When sending an email to members of your own organization, we can choose who receives the email using a people picker. Replace the txt_EmailTo text input with a combo box named cmb_EmailTo . Add the Office365Users connector.

Allow the user to send a message to multiple people by setting the SelectMultiple property of the combo box to true. true Code language: JavaScript ( javascript )

Use this code in the Items property to retrieve a list of names when the user types in the search box. We only show the user the top 10 results to ensure only the most relevant results are returned. Office365Users .SearchUserV2 ( {

searchTerm : Self.SearchText, top: 10 , isSearchTermRequired:false } ) .value Code language: CSS ( css )

Set the DisplayFields property to this code. This tells the combo box to show the first name and last name of each person. [ "DisplayName" ] Code language: JSON / JSON with Comments ( json )

Enable the IsSearchable property to allow users to search a person’s name. true Code language: JavaScript ( javascript )

Update the SearchFields property to this code. The combo box will only return people with matching first names or last names. [ "DisplayName" ] Code language: JSON / JSON with Comments ( json )

Write this code in the OnSelect property of the Send Mail button to send the message. The Concat function joins together all email addresses for the people selected separated by a semi-colon. Office365Outlook .SendEmailV2 ( Concat ( cmb_EmailTo .SelectedItems , Mail &";"), txt_Subject .Text , txt_Body .Text ); Code language: CSS ( css ) Email With CC and BCC

The email Cc field (carbon copy) sends a copy of the message to those email addresses listed. The Bcc field (blind carbon copy) also sends a copy of the message but the recipients name will not appear for others who receive the email.

Add two text input controls to the app called txt_EmailCc and txt_EmailBcc .

Use this code in the OnSelect propert y of the Send Email button to include Cc and Bcc recipients. Office365Outlook .SendEmailV2 ( txt_EmailTo .Text , txt_Subject .Text , txt_Body .Text , {

Cc : txt_EmailCc.Text, Bcc: txt_EmailBcc.Text } ); Code language: CSS ( css ) Email Attachments Email File Attachments

Files can be attached to an email message. Add an attachments control to the app called att_Attachments . The attachments control cannot be found in the Power Apps Insert control menu. We must create an Edit Form connected to a datasource and take the attachments control that appears inside it.

Increase the number of files that can be attached by editing the MaxAttachments property of the attachments control. 5 Then write this code in the OnSelect

property of the Send Email button. The ForAll function loops over each file in the attachments control and assigns a name & file content Office365Outlook .SendEmailV2 ( txt_EmailTo .Text , txt_Subject .Text , txt_Body .Text , {

Attachments : ForAll ( att_Attachments.Attachments, { ContentBytes: Value, Name: Name } ) } ); Code language: CSS ( css ) Email Image Attachments

An image can be attached to an email using the attachments control. Or it can also be done using the add picture control . Insert an add picture control into the app and rename the image control grouped with it to img_AddPicture .

Use this code in the OnSelect property of the Send Email button to attach the image to the email message. Office365Outlook .SendEmailV2 ( txt_EmailTo .Text , txt_Subject .Text , txt_Body .Text , {

Attachments : { ContentBytes: 'img_AddPicture' .Image, Name: "MyPicture.jpg" } } ); Code language: CSS ( css ) Email Formatting Email Rich Text Messages

An HTML email message can have multiple text styles: fonts, sizes, colors, weights, etc. To write a formatted text add the rich text editor control to the app and name it rte_RichTextBody .

The HtmlText property of the control will convert text shown in the editor into HTML code. The following code was generated based upon values in the image above. < p >

< strong > Lorem ipsum dolor </ strong > sit amet, consectetur adipiscing elit. Nam et metus a erat rutrum volutpat. < u > < span

style = "font-size:24px" > Donec accumsan pellentesque </ span >

</ u > nunc, quis rutrum risus elementum at. < span

style = "color:#e74c3c" > Fusce ullamcorper diam sodales lectus dictum, nec feugiat eros suscipit.

</ span > Nunc et blandit tortor, sed pharetra sapien. Integer molestie vel sapien et dapibus. &nbsp; </ p > Code language: HTML, XML ( xml )

Write this code in the Send Email button to send the rich text message. Office365Outlook .SendEmailV2 ( txt_EmailTo .Text , txt_Subject .Text , rte_BodyRichText .HtmlText ); Code language: CSS ( css )

Email Embedded Images Using Rich Text Control

An image shown in the body of an email is known as an embedded image. We can include an embedded image in an email using the rich text editor control. Drag and drop an image file into the editor and watch it appear on the screen.

Use this same code in OnSelect property of the Send Email button as we did to send a message having only text. The image will appear in the email body. Office365Outlook .SendEmailV2 ( txt_EmailTo .Text , txt_Subject .Text , rte_BodyRichText .HtmlText ); Code language: CSS ( css )

Email Embedded Images Using Add Picture Control

Images can also be added to an email using the add picture control. Insert an add picture control into the app an rename the image control to img_AddPicture.

Set the CalculateOriginalDimensions property of the Image control to true . true Code language: JavaScript ( javascript )

Then write this code in the OnSelect property of the Send Email button to embed the image in the email body. We use the JSON function to encode the image as Base64 .

Office365Outlook.SendEmailV2( txt_EmailTo.Text, txt_Subject.Text, $ "<img height={" "&img_AddPicture.OriginalHeight&" "} width={" "&img_AddPicture.OriginalWidth&" "} src={"

"&JSON(img_AddPicture.Image, IncludeBinaryData)&" "}>" ); Code language: JavaScript ( javascript ) Email An HTML Table

Data stored in collections or a datasource (i.e. a SharePoint list) can be displayed using an HTML table. Use this code in the OnStart property of the app to create a collection.

ClearCollect( colSampleData, { Header1 : 1001 , Header2 : "Notebook" , Header3 : 25 }, { Header1 : 1002 , Header2 : "Crayons" , Header3 : 15 }, { Header1 : 1003 , Header2 : "Binders" , Header3 : 10 }, { Header1 : 1004 , Header2 : "Pencils" , Header3 : 21 }, { Header1 : 1005 , Header2 : "Erasers" , Header3 : 30 } ); Code language: JavaScript ( javascript )

Then insert a Table control into the app as shown below which uses colSampleData in its Items property .

Use this code in the OnSelect property of the Send Email button to include an HTML table in the email. The Concat function creates as many rows in the table as there are in the collection.

Office365Outlook.SendEmailV2( txt_EmailTo.Text, txt_Subject.Text, " < table > < tr > < th > Header1 </ th > < th > Header2 </ th > < th > Header3 </ th > </ tr > "&Concat( colSampleData,

quot; < tr > < td > {Header1} </ td > < td > {Header2} </ td > < td > {Header3} </ td > </ tr > ")&" </ table > " ); Code language: HTML, XML ( xml ) The email message looks like this.

We can also format an html table with different fonts, colors, sizes, etc. with the help of an online HTML Table generator tool . Using this code instead will show an HTML table with a purple header row.

Office365Outlook.SendEmailV2( txt_EmailTo.Text, txt_Subject.Text, " < head > < style > table { border : 1px solid #b3adad ; border-collapse : collapse; padding : 5px ; } table th { border : 1px solid #b3adad ; padding : 5px ; background : #8764b8 ; color : #ffffff ; } table td { border : 1px solid #b3adad ; text-align : left; padding : 5px ; background : #ffffff ; color : #000000 ; } </ style > </ head > < body > < table > < tr > < th > Header1 </ th > < th > Header2 </ th > < th > Header3 </ th > </ tr > "&Concat( colSampleData,

quot; < tr > < td > {Header1} </ td > < td > {Header2} </ td > < td > {Header3} </ td > </ tr > ")&" </ table > </ body > " ); Code language: HTML, XML ( xml ) The email message now looks like this. Email Links Email With Links

A link to another website can be included in an email. To do this, create a new text input called txt_WebsiteLink.

Then write this code in the OnSelect property of the send email button. The HTML a tag defines what hyperlink will be applied to some text.

Office365Outlook.SendEmailV2( txt_EmailTo.Text, txt_Subject.Text,

quot; < a

href = "" { txt_WebsiteLink.Text }""> Click here to go to the website </ a > " ); Code language: HTML, XML ( xml ) The email message looks like this.

Email With Links Using Rich Text Control

Links can also be included in email using the rich text editor control. Add a rich text editor control to the app named rte_BodyRichText . Write the words from the image below into the editor then select the link button.

Supply an URL for the link then click OK.

The text now shows a link in one of the words.

Use this code in the OnSelect property of the Send Email button to send a message with a link in it. Office365Outlook .SendEmailV2 ( txt_EmailTo .Text , txt_Subject .Text , rte_BodyRichText .HtmlText ); Code language: CSS ( css ) Email With Deep Links To Power Apps

Deep links are a type of hyperlink that sends an user to Power Apps and opens a specific record or screen. They can be embedded in an email. In this example, the user clicks on a link to open the support ticket in Power Apps.

When the app opens it shows the details of the support ticket. A full tutorial on how to setup a deep links in an email message can be found here. 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 about Complete Guide To Send Email In Power Apps 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 M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps