Using a SharePoint List in PowerApps

In the past few posts, I’ve been showing you how to create an application using PowerApps for our HR Manager where employees can give a shout out to others within the company. My last post showed how to search an employee directory in PowerApps with Office 365 users. Today, I'll show you how to read and write data into SharePoint using PowerApps as the next step in building this shout out app.

What I’m showing today is how to connect to our HR Manager's SharePoint site to use as a connection and a data source for our new forms inside PowerApps.

• We started our app by building a form where we could create a shout out of a job well done to another employee. Once that form is complete, we hit Send Shout out and that form/Shout out will save to SharePoint.
• Kim has already created a SharePoint list of the culture shout outs, as well as a list of details about each of the cultural points she wants to reinforce at Pragmatic Works.
• The goal is to read from this cultural points list to produce the top section of our app and then create a form below that will write to the other culture shout out form she has.
• Back in my PowerApps, my last step was I created a UI to search for our end user that we want to give a compliment or shout out to. Now I want to insert a new gallery with the new data source being that SharePoint list. I select that SharePoint list I already created, then I paste in the top-level URL to my SharePoint list and click Go.
• It will then ask which list I want, and I choose both the Culture and Culture Shout outs lists and click Connect.
• This will pull over my culture list first and I just want the title and icon shown for each. In my video demo, I’ll show you how to move things around to create more real estate for all the parts of our app design by doing things like wrap count and deleting unwanted icons.
• Next, I want this to show like steps in a process: Step 1 select your employee, Step 2 select your culture item, and Step 3 fill the form out on the bottom.
• Ideally, I want to hide the culture list gallery when an employee is not selected. To do this, I select the whole employee gallery and I go into OnSelect from the pull down on the left.
• Then I want to create a variable that’s going to say: If I select anything in the first gallery, I want to show the next step in that gallery also. I’ll create a variable called Step 2 and one called Step 3 and I’ll use that to set the Visibility properties. Be sure to watch my demo where I’ll walk you through the code for this and how to use the Visibility property to make it easy.
• After I create my steps, I need to create the form for my app (Step 3). Click on Form and Edit from the home row. This time we want to point to the data from our Culture Shout outs list. This list will point to things we aren’t going to use so we’ll have to hide those.
• When we use SharePoint as our data source, it will bring over some things like people pickers that you don’t normally get. One thing I need to do is change this form from edit mode to new mode by default automatically.
• I notice that on my nominated and nominated by fields, there are drop downs where I can begin to type in a name, and it will pull up the name we’re looking for. This is handy but, in this case, we already know this information; the nominator by who is logged in and who we are nominating by who we selected in Step 1.
• My “gotcha” here is I want to be able to control that user interface. I had a bit of a tough time trying to fix that, but I found a trick that I’ll walk you through in my demo by using the Update function.
• After I fix this, I create a submit button for my form and add code to submit the form, as well as to reset it for a new form when complete and to back to the previous page.
• Another cool thing it did was took things like the attachment field and made it work for me, so if there’s an email that points to why this person is getting a shout out I can attach numerous files and it will show up in SharePoint. All this stuff is baked in when using SharePoint as our data source.
• I spend a bit of time cleaning up this form with titles and line spaces for text and then add a couple labels above the form that will show a recap of what the person giving the shout out has selected to do. I add labels and code to show what culture point and what it means and to what employee the shout out is going to.
• As I did previously, I’ll set the visibility flags so that the form, Step 3, will not be shown unless something has been selected in Step 2 and set my variable to go from step to step.
• So, now I’ve built this to be an obvious step one, two and three and added color to make that even clearer.
• The last thing I want to do is as we open this application, I want to be able to navigate to this screen with my steps and form from the previous screen by adding a button (Send Shout out) and I don’t want to have the shout out screen all populated when the person gets to it.
• To fix this, I go to the Actions page up top and use the On Visible. We can use this to update the context of certain variables when someone first hits the page.
• I want to point out that when I run the page from here, it will keep the context, so from a designing perspective it will look like it’s keeping context behind. But if I go back to the first page and hit the button, you’ll see that is reset with my updated variables.

In my next session, I’ll work on completing the first screen of my app. I’ll focus on the filter command and building our activity page, as well as build some reporting and polish my app up a bit.

Just starting out with PowerApps? How about learning it for FREE? In partnership with Microsoft, Pragmatic Works’ virtual App in a Day course will get you started with PowerApps at no cost! Click the link below to register for your FREE course today!