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:
- 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:
- Specify the Data Source for the form to be the Customers list.
- 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:
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:
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:
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: