Ask questions through a PowerApp embedded on a SharePoint page
At a lot of companies, I see a lot of employees struggle with what the possibilities are of the Modern SharePoint. They know there is a lot possible, but they don't know where to start. Luckily there's a lot of good documentation, but a lot of employees don't want to look for documentation, and they much rather have someone from IT help them figure it out.
With the new PowerApps web part for SharePoint, you can make it easier for the people to ask questions. In the blog post announcement, you can see a great example of a PowerApp that Microsoft showed for a Ask the CEO event.
I like this example, and it could help in lots of scenarios. So how do you build these type of apps?
For this blog post, I will create a PowerApp that will send an email to IT when someone has a question about their SharePoint site. So, let's start by creating a blank phone layout in PowerApps:
Now you will have a blank PowerApps screen where you have to add a couple of data sources to your app. For this app, we will add the Office 365 Outlook and the Office 365 Users data sources. We need the Office 365 Outlook data source to send an e-mail later, and we want to look up your user by using the Office 365 Users data source. To add them, make sure to go to View > Data Sources > Add Data Source.
There you will see lots of data sources you can add, and I encourage you to try these out sometime, but for now, let's add the data sources I already mentioned. Next, we have to add stuff to our screen, because right now it's still blank!
To start, I will add two labels: one for the header and one for the welcome text. Resize the header label and make it fit a bit at the top, just like the suite bar from Office 365. As a text I used "Welcome", but of course you can use whatever you want. Next to this, you can, of course, give it a fill color and a different text color if you want.
The welcome text label we will use to add a friendly welcome text. I used the following text as a label text value to make sure I created a friendly text:
The text parts are pretty straightforward, but I would like to zoom in on the Office365Users.UserProfileV2-part:
I used this to get the display name of the logged in user. An input is needed for this function, and that's where I use the User().Email function. I used the .diplayName part to get the displayName, but you could also use other profile properties like department or company name. This is handy when you need to send an e-mail to different people, and you want to do an if statement to make sure the email ends up in the right mailbox.
So far, I have created the following app:
Of course, we still need a text input and a button to send the email. Create a text input and a button and make them fit nicely into our screen. The button should send an email with the text from the text input when someone pressed it, so we still have to make that work. Change the button OnSelect property to:
The send email function expects the to-email address as a first parameter, the subject is the second parameter, and the third parameter is the body. If you want more options, like importance and HTML formatting, you will need another parameter, just like you can see above.
Note: Watch out for the TextInput1.Text part. If you have a different name for your text input, this will not work. You can easily change it to OtherInputName.Text.
I would encourage you to do a little bit more of validation for the button because you don't want to get a lot of emails with no input, so make sure to tackle that before you put it into production. A simple fix could be an if statement that checks if the text input is empty, if so disable the button and if not enable the button.
We are almost at the end of this solution, but we need another screen to thank the user for their input. Otherwise, we will probably get a lot of emails because the user will press the send button a couple of times.
Duplicate the screen and remove the button and the text input. Change the text to a nice thank you note and go back to the first screen. We need to make sure the PowerApp knows where to go when someone clicks the send button. To do this, add the following part at the end of the Office365.Send email function.
& Navigate(ThankYouScreen, Fade)
This part will make sure the app will proceed to the screen with the thank you text. Now our app is done! How can we add it to our SharePoint site? Save the app and give it a friendly name. I will name it "Ask IT". When PowerApps saved the app, you will see the "Share this App" button. When you select this button, PowerApps will open a new screen where you can add everyone in your organization to your PowerApp. If you don't want anyone to get an email, make sure to uncheck the "Send an email invitation" checkbox. When you added everyone to the app you want to share it with, click save. Select the details tab (next to the share tab) and copy the web link, because we will need this for our PowerApps web part in SharePoint.
Go to the SharePoint site where you want to add the app. Edit the page where you want to add the PowerApp and add the web part. Immediately, you will see a sidebar where you can paste the web link we copied before. Make sure to close the sidebar and publish the page. Now we can see our PowerApp on a page in SharePoint!