Microsoft Power Apps with SharePoint and E-Mail

The Microsoft Power Apps customer directory started in the previous post will now be enhanced. This post demonstrates how to add integration with SharePoint and providing a lightweight interface to contact customers via e-mail.

SharePoint Data Source in Power Apps

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:

Navigate(SendEmailScreen)

Adding E-Mail

One very important thing to note before proceeding is that there is a preset Email screen available out-of-the-box with Power Apps. 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 Power Apps, 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:

CustomersGallery.Selected.'E-Mail'

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.

A test run is shown below to demonstrate:

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

Tags: Apps, Office, Office 365 and O365, PowerApps, SharePoint