PowerApps – Build a Simple List View from SharePoint Data (part 1)

PowerApps has a number of integration points with SharePoint. For starters, you can use a template create an app from SharePoint list data. Right now, the template is limited to an app targeted at the phone form factor. Cool, but not what I want in this case.

image

What if you want to do the same thing from scratch?
What if you’d like to create an app that connects to SharePoint list data for a tablet? (or maybe what could be an app eventually embedded into SharePoint)

As with many things in PowerApps, it’s not too difficult (once you know what you’re doing with a little clicking around Smile ).

Build it

Open PowerApps studio. On the ‘New’ page, select the blank app with a Tablet layout. PowerApps will create a single form sized for a tablet. Let’s get building.

image

Start with the content. Select the ‘Content’ menu item and ‘Data Sources’.

image

In the right side property pane, select ‘Add data source’.

image

I already have a connection set up to SharePoint. So I can use that connection. If you don’t already have a connection you can set one up from here. I’m selecting the SharePoint connection.

image

Enter the URL of the SharePoint site:
 image

PowerApps will get a list of lists on the site you entered. Select the list you want – I’m using ‘Requests’ – and click ‘Connect’. 

image

Now, I’ve got a data source from my SharePoint list: Requests.

image 

So, now what? We add a Gallery to our screen. In the menu, select ‘Insert’ and then ‘Gallery’. For this example I’m selecting a Vertical Text gallery.

image

The Gallery control is then dropped on the screen. 

image

Resize and move the control around to fit your needs. I’m filling up the bottom part of the screen an leaving room at the top for a header/title thing later and maybe a few navigational controls. Control size and location are easily changed later as needed. 

image

Now, what’s cool here is that the gallery control has a bunch of features baked into it already. It can be tied to a data source and has additional controls baked into the gallery. This particular example has 3 fields available as shown below. The data for the default fields are kind of nonsense – we’ll fix that in a few minutes. 

image

We need to start by connecting the gallery to the data source. And it’s really easy. While the gallery as a whole is selected (see above), select ‘Advanced’ in the right pane.

image

Selecting the Items field, start typing the name of your data source – in this case ‘Requests’. It should show up as an option in the dropdown.

image

As soon as you select the data source, the screen preview updates with actual data from the data source. When you switch back to the ‘Options’ in the right pane, you’ll find that the controls have already tied to the data source. When you select the fields, they show all the fields in your list that PowerApps can recognize.

image image

So, you can quickly set the initial 3 fields to data in your list. If you don’t have enough sample data – go ahead and add some. Then refresh your data source and the screen preview should also update. Now you’re off and running.

image

That was a very simple run through of connecting to SharePoint data and getting it on a screen. We skipped over a LOT of details that you can dig into but will get into those at another time.

Next up: Layouts, sorting, filtering, etc…

References

3 comments

Leave a Reply

Your email address will not be published. Required fields are marked *