In the last post we created a PowerApp app from scratch and connected to SharePoint list data. This post will talk about different ways of laying out the data on a PowerApps form (screen). This is EASY stuff. Hopefully you’ll think so too after seeing it.
Coming from SharePoint into PowerApps, the default method is to use the ‘Create an app’ menu item (Microsoft loves to demo this) in the SharePoint modern view that automatically creates a 3-form phone app connected to the list you started from. Yes, this is indeed awesome. However, that’s not what we want in this case – so we’re talking about a different approach. In this article we’re creating a tablet app – one that might look more like a PowerApp embedded in SharePoint (crossing our fingers here) would look. More like a traditional SharePoint view.
So, back to the tablet app approach…
By default when adding a Gallery control and selected the Vertical Text Gallery, we get a control that included 3 fields and ended up looking like this:
Coming from the SharePoint world, this looks like the default view for the Announcements web part or the ‘Newsletter’ view layout. While this is very useful, sometimes I’d like to see the data like we do in SharePoint, in more of a grid/table format. You could even do a hybrid of the two. Either way, it requires moving fields around a bit. Thankfully, this is super easy.
A few notes about the gallery control. You can select the entire control, a single item, or each field on the first item. All customizations to items and fields is done in a single item and will be replicated for all items. To select the item, select the round edit icon in the upper left of the control. This will allow you to resize the item within the gallery. Editing the item (rather than the whole gallery control or an individual field control) allows you to resize the item within the gallery. In our case once we’ve resized field controls and aligned them how we want them we’ll reduce the size of the item to look more like a grid. To go back to selecting the grid, select any item other than the first one.
The plan
I’m going for something similar to an All Items view minus the Description field. That’s 4-5 fields with room for future controls – probably something to view details of an individual item or kick of a Flow, or some other interesting option (future posts).
Resizing, reassigning, and moving field controls
We start with three fields, two of which are larger fonts used as a title and subtitle. There are plenty of ways to go about getting the right fields on the page. I’m going to do the following:
- Delete the title and subtitle fields.
- Reduce the size of the remaining ‘description’ field
- Change the Wrap property from ‘true’ to ‘false’. This cleans up the field a bit if there is enough text to wrap and doesn’t show up along the bottom of the field.
- Make any other formatting changes to the field control. (before we copy it…)
- Copy and paste the fields to get the number of fields needed
- Move the fields around – I’m putting them in what looks like a row of fields, aligned along the top of the ‘item’ space.
- Select the item and reduce it’s vertical space to just enough to contain the row of field controls. This compresses the items into what looks a lot more like the grid format we’re used to with a SharePoint view.
- Reassign the data assigned to each field to match how you want your view to display
Remember: For some field types you may need to use the Advanced tab or the formula box - As needed, reformat or resize the fields to make the best use of space
Now, the screen looks a bit more like this:
Probably a good idea to add some text controls across the top as field headers. Now we have:
Easy! Hopefully you think so too…
Thoughts
There are a lot of directions you could go from here:
- Add some navigation to the screen in the header or footer
- Change the column headers to more interesting controls
- Add some conditional formatting to the fields
- What feature would you like to see added?
The stuff we’ve done is still pretty straight-forward, but if we eventually have the option of embedded PowerApps as views in SharePoint, it would be nice (especially for less-techy folks) to have a wizard or template that can take an existing view and convert it to a PowerApp. The more features we add to a page like this, the nicer it would be to have it automated. 
References
- Blog post: (Part 1) Build a simple list view from SharePoint Data
- Blog post: SharePoint field workarounds
- Blog post: Conditional formatting
- PowerApps documentation: Gallery Control