Send Email from Power Apps | HTML Table Styles, Attachments, Images | PowerApps & Outlook Connector

hello everyone reza here in this video i will show you how to send emails directly from powerapps we will send nicely formatted email with rich html add images attachments set the email properties dynamically add signatures and company branded images and logos and a lot more so let's check it out in action [Music] to get started with sending emails from powerapps the easiest option is to look at an existing screen template that has been provided for us for that you will head over to new screen and select email upon selection it will create a new screen based on the email screen template this screen has options to plug in the to property for the email you can search for people or add email addresses you can define the subject and the body of the email the moment you add the screen it automatically creates a connection to office 365 outlook and this screen has the send email icon on select of which it uses the office 365 outlook connectors send email function however there is a newer version of this function which is send email v2 so i will recommend you to go ahead and use the v2 function as part of the send email v2 function we need to specify the following required parameters the two property this is a string of email addresses if you are adding multiple email addresses they need to be semicolon separated then we have the subject of the email then we have the body of the email which can be in rich text format as well and then we have additional properties that we can set for example the importance of the email the sensitivity of the email cc bcc and a lot more let's preview the app and test this out in the two i will search for an account from my active directory the people picker option works additionally i can also plug in email addresses and click on the plus icon then i can define the subject of my email and then the body of the email once i'm done with this i will click on send this will go ahead and send an email to the recipient which in this case is reza here is the subject of the email and the body of the email there are additional properties that we can set related to the email apart from the importance we can add attachments to the email we can define the cc this once again will be email addresses semicolon separated we can define bcc email address semicolon separated the sensitivity of the email and then the from or the send as property this is the email address to send mail from this requires send as or send on behalf of permission for that mailbox the body of the email can be in rich text format the template adds a multi-line text control so let's replace this with a rich text control we'll head over to insert text and pick the rich text editor experience i will reorder this control and send it to the back and i will rename this control to rte body the default property i will set it as empty and for the send email action where i was using the previous multi-line text box i will replace that with the rich text editor controls html text property and i will also ensure that i reset the rich text editor control after the email is sent let's try this out i'll enter the email and subject and in the rich text editor control i have all the rich text features that is available as part of the rte editor in powerapps once i add my mail body i can go ahead and click send here is the email that i have received the body of the email is in rich text format i even added a link to the outlook connector documentation if i select that it will lead me to the connected documentation page which has all the information of that send email v2 action let's try and add an image in the body of the email to do that i will insert from the media controls add picture this control allows us to upload an image directly in powerapps for the send email action when i was sending the body as html text here i will additionally append simple html i will add an image tag where the source i will get directly from that image control important to note here i need the base64 encoded version of that image so i can leverage the json function and power apps point to that image controls image property and then include the json format which is json format dot include binary data to get the base64 encoded version let's try this out i will upload an image and i will click on send here is the email that includes that image in the body of the mail now this embedded image as part of the body of the mail can also be the current user's profile image and for that once again simple html using the image tag the source here is user.image there is also an image control in powerapps i've added that on the screen in my app i have added an image and that image is what i will be referencing in that image control to add that image control as well to the body of the email once again simple image tag and the same json function pointing to that image controls image property and then formatting the json to include binary data let's try this out i will go ahead and send the email here's the email now that includes all of those images coming from the ad picture control the user's profile image and the image held in that image control we can also embed in the body of the email the information held in the pen input control in powerapps the pen input control allows us to draw sketches or add signatures this control as well exposes a property called image and we can leverage that same concept of using the json function pointing to the pen input controls image property and then formatting it to include binary data let's try this out here i am adding my signature and i'll click send the email that i receive also includes that signature from the pan input control now all of these images that i embedded in the body of the email they can also be added as attachments to the email to do that i will leverage the attachments property this expects tabular data which needs two key parameters one is the name of the attachment and then it requires the content bytes of that image and this i can directly get by leveraging the image controls image property i will go ahead and format the text next let's try and include the pen input control information as an attachment once again same concept i need the name and the content bytes let's try this out i will go ahead and send the email this time when i receive the email it includes the images as attachments let's try and make the send email property dynamic by retrieving data from a data source here i have a sharepoint list that tracks expense reports and one of the properties here is expense type based upon the expense type selection from the user the approvers are dynamically assigned let's go ahead and create a very simple power app directly from the sharepoint list give it a name and this will create a standard three screen powerapp connected to that sharepoint list to send the email i will head over to new screen and click blank here i will add my header that states send email i've added a text box control to allow the user to enter the subject of the email and now i have entered a rich text editor control that will allow the user to enter rich text for the body of the email and finally i'm adding a button called send email so that when the user clicks on this we can send the email on my home screen the gallery is getting its data from that sharepoint list here i want to allow the user to send an email directly to the approvers of that specific expense item to do that i will first edit the gallery go to icons and pick the mail icon on select of this mail icon i will navigate the user to my email screen if i preview the app for the first item if i select mail icon it takes me to the send email screen in the send email screen i would like to load the data dynamically based on the selected item from my main gallery so for the subject the default property i will leverage gallery expenses dot selected dot the title so this will plug in the title of the selected expense item for the body of the email i can leverage other properties from the selected item of the gallery like the start date here i'm leveraging string interpolation and powerapps by leveraging that dollar symbol so i've added the start date entered a few line breaks end date line breaks and then the amount of that expense item and this is the app in action from the home screen when i select the mail icon for a specific item it will take me to the send email screen and load the data for that item now the email needs to go out to the approvals and my approvers are dynamic based upon the expense type the user has selected approvers in my scenario is a multi-select person type column the label control expects text so i will leverage the concat function to fetch the display name of the approvers and concatenated with semicolon so now the user can clearly see who this email is being sent out to and for the send email button when the user clicks on it i would like to send the email so first i will add a connection to office 365 outlook and then on the on select function of send email i will leverage office 365 outlook dot send email v2 the 2 property would be my approvers i need their email addresses semicolon separated similar concept as before i will leverage the concat function on my approvers column fetch their emails and concatenate them with semicolon for the subject of the email i will leverage my textbox control dot text and for the body of the email i will leverage the rich text editor controls html text property here i will also specify the importance of this email i will set it to high after sending the email i will send the user back to the home screen let's test this out i will enter my subject update my email body and click send email this takes me back to the home screen and if i look at the email that was sent out to the approvers which is reza and sarah here is the information the title the body and the importance of the email next let's try and add the ability for the user to send attachments to the email that is being sent out to the approvers as well to do that we need the attachments control in this app if you head over to the edit screen there is the edit form that has an attachments data card within this data card we have this attachments control go ahead and copy this go to your email screen and paste it in here i will position this at the bottom this attachments control was copied from a different screen so there are certain properties here that are related to that screen all we have to do is go to the formula bar for every error that's highlighted just clear the formulas so border color cleared items cleared tooltip cleared and then the display mode property cleared now if i preview the app i have this attachments control that allows me to upload files so here i've added a pdf file additionally i can also drag and drop files directly into this control now to send these files as attachments to the email that's going out first step i will rename this control to attach best practice and now for the send email function i will add the attachments property i will point to the attachments control name which is attach and then use dot attachments to fetch all the attachments within it now here there is an error that states that the formula is missing a column called content bytes that the attachments property expects that information is already available in that attachment controls attachments property however the column is named differently so all we have to do here is basically rename the column so i will leverage the rename columns function and rename the value column to content bytes once i'm done with that i will play the app update my subject and send the email this time when i receive the email i will receive those attachments as well that were added as part of that attachments control now in sharepoint we have the ability to add list item attachments and here users are adding expense reports so they're adding the receipts related to that expense item directly as attachments i will first remove that attachments control and then for the send email action i will leverage my gallery of expenses dot selected dot attachments to get those list item attachments here as well there is a column that we need to rename this requires a name column so here i will add another renamed column which is renaming the display name to name now if i run the app for expense for client here are the details i will click send email the email will include the attachments coming directly from that sharepoint list item there are many scenarios in which you would want to send formatted emails emails that follow a specific brand for example i have a branded email that i received from techsmith camtasia and i would like to leverage the html of this email so that when i send the email from powerapps it includes this entire html brand in the outlook email client if i head over to actions for the email and go to other actions i have an option here for view source this will give me the entire html code of that email i will copy that and also ensure that i replace all occurrences of double quotes with single code i will replace all copy the entire html code go to my powerapps mail icons send email function for the body of the email i will plug in that entire html code in double quotes if i would like to dynamically add data into this html let's take the welcome message for example in the html code i will search for that text that text is in this specific paragraph tag i will remove it and here i will dynamically concatenate data this data will come from my text box control let's try this out i will enter my message and i will click send email the email that i receive is formatted exactly based on that html plus the message that i entered is dynamically added in that html as well there are various scenarios in which we want to add some company branded images or logos inside the email itself to do that we require the base64 encoded version of the image we have this nice free tool that's available on the web all we have to do here is upload our image and it will then convert it into base64 i can click on show code and copy to clipboard from the user image elements tag so i will copy to my clipboard here under the body tag i will enter simple html image source and the source of the image would be that base64 code that i copied from that tool let's test this out i'll send the email this time the email includes my branded header image that's the base64 image here i have a help desk power app on the home screen i can filter the tickets based on their status so i filtered here based on pending status and i would like to send an email report of the tickets that are in pending status this takes me to the email screen right at the bottom i can see all the report data this data is placed in an html text control here i have leveraged simple html that includes a table the data is coming dynamically for my gallery control dot all items and since the html text property is of type string gallery.all items will return a collection of data i have leveraged that concat function on all the items in that gallery and then for each of those i then fetch the data points the id the title priority status of the ticket and more once i have that in play i have leveraged that same email template so i can pick who i would like to send this email to and then click send and here is the email that reza receives which has that formatted html table next i have a leave request power app the home screen displays all my leave requests and their current status i have provided the ability here for the user to contact the approvers if the status is not approved so let's take summer holidays as an example reza is the requester and the approvers are sarah and reza so i would like to send them a note i will click on the mail icon here i have leveraged a pop-up dialog to show that send email like behavior user can enter the subject of the email it already has dynamic information coming in from that selected item of my gallery the request number the title of the leave request and the dates i will enter the note that i would like to send to my approvers both of whom are dynamically being fetched i will click on send and both those users will receive an email with the note that i entered if you enjoyed this video then do like comment and subscribe to my youtube channel and thank you so much for watching

Channel: Reza Dorrani

Views: 86,426

Keywords: send email from powerapps, powerapps send email, powerapps send email with button, powerapps send email with attachment, power apps, powerapps, power apps outlook, powerapps outlook email, send email, powerapps send html email, powerapps send email function, power apps send email, powerapps email attachment, powerapps email body, powerapps email, email, office365.sendemail, powerapps tutorial, powerapps send email with html table, reza dorrani, outlook, sendemailv2 powerapps

Id: GoF3vfP3YTM

Length: 22min 44sec (1364 seconds)

Published: Mon Jun 20 2022