Microsoft PowerApps – E-Mail App for SharePoint Contacts

The customer directory app started in the previous posts will now be enhanced by adding integration with SharePoint and providing a lightweight interface to contact customers via e-mail directly within the app.

SharePoint Data Source in PowerApps

Customers will now be stored in SharePoint instead of using a memory-only / volatile data source via PowerApps collections. To start, create a SharePoint list and populate it with data. Something like:


Then, add a vertical gallery and select the Customers list as its data source:


From here:

  • Update the gallery control to show the field values you want to see.
  • Add a form control to display the full details for the client.

The design choices and final layout are subjective. The important thing to call-out is how to load the form with a specific / selected customer from the gallery. That is done in two steps:

  1. Specify the Data Source for the form to be the Customers list.
  2. Specify the Item property for the form to be the gallery’s selected item.

On the latter, my gallery is named CustomersGallery, so I set the Item property on my form to be CustomersGallery.Selected.


At this point, there is now a customer list being pulled in from SharePoint with the ability to select and view all appropriate details.

The only other control needed is a button which will take the user to the send e-mail screen. That’s done with:


PowerApps E-Mail

One very important thing to note before proceeding is that there is a preset Email screen available out-of-the-box with PowerApps. It is fully functional, provides auto-lookup into your O365 contacts, and is a great value-add.

Using this screen was my initial path when I first started building this app. However, I decided to build a custom screen due to various requirements (e.g. needing Rich-Text) and also per some bugs I ran into when trying to clear out the recipients and cancel unwanted sends. Point being: when working in PowerApps, you should consider whether there is already a template, form, screen, control, etc. available before reinventing the wheel.


This out of the box screen didn’t function, nor support functionality, that I needed; therefore, I created a new screen from blank which looks as follows:




Before getting into the send e-mail formula, here are some other important formulas that are used.

The HeaderLabel currently reads, “Send Chris Brotsos an e-mail”. This was done by setting the label’s Text property to:

"Send " & CustomersGallery.Selected.Contact & " an e-mail."

The Recipient text box currently contains my e-mail address. This was done by setting the text box’s Default property to:


The trash icon, OnSelect property, contains:

Reset(TextBody); Reset(TextSubject);Reset(TextRecipient); Back()

Finally, the only remaining formula is wired-up to the IconDoSend icon, OnSelect property, and that is:

Office365.SendEmailV2(TextRecipient.Text,TextSubject.Text,TextBody.HtmlText); Back();

Important Note: If you don’t have the Office365 set of functions available, you must add a new “Office365” Data Source to you app.

One additional clean-up that I added is to ensure that everything on the e-mail screen is cleared whenever the CustomerSelectScreen is made visible. The same function above should be applied to the CustomerSelectScreen OnVisible property:

Reset(TextBody); Reset(TextSubject);Reset(TextRecipient);

If the above steps were followed, you now have:

  • A gallery control which displays a customer list sourced from SharePoint Online.
  • A form which displays all details about a customer when an item is selected from the gallery.
  • A button which loads an e-mail form that is pre-populated with the selected customer’s e-mail address.
  • Functionality on the e-mail form to send an e-mail with rich text.

Here is a test run to validate:

Categories: Apps, Microsoft PowerApps, Office 365 and O365, SharePoint

Tags: , , , ,

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: