Apps, Powerapps Examples

Getting started with Microsoft PowerApps examples

Up until now I normally build apps using Xamarin or using Expo and React Native. But I recently had to build an app using Microsoft PowerApps and SharePoint Lists, and after I’d built this particular app I had a list of things I wish someone had told me before I’d started. PowerApps can be great, but it has it’s quirks, so grab any tips you can to make the process smoother. I’ve written a summary of how I dealt with each as I didn’t find that many Microsoft PowerApps examples that covered these particular topics when I was starting out. I’ll cover a few tips on:

1. PowerApps formatting and styling, such as setting custom fonts, colors and sizes
2. Making and using PowerApps groups, containers, and reusable components
3. General PowerApps Examples and tips

PowerApps formatting and styling

You don’t have stylesheets when you’re working in PowerApps but there are some tricks which you can implement when you start building your app which give you some of the benefits of a stylesheet. You create a page which doesn’t actually form any visible part of your app. Call it Settings or something similar, and then plan to add one example element of each key part of your app in terms of styling. So a main header, a subtitle, a button, and include a label for each of the colours that you’ll use in your app. Whatever you name them in the treeview can be used as a style reference in the rest of the app. Here’s a demo to show you what I mean:

PowerApps components, containers and groups

These are the three ways of ‘grouping elements’ in Powerapps and each way has its pros and cons. Starting from the simplest:

1. Groups – select multiple elements and right click, then click Group. Quick and easy, but element positions are still relative to the page, not the group. So forget doing any dynamic positioning or visibility changes with a group, as you’ll have to apply any setting to each item in the group separately and you’ll rapidly lose your mind.
   
   Use for: Simple scenarios where drag and drop positioning once is all you need
   
   
2. Containers – right click a group and click add to container. This creates a little world for the grouped elements…. positions are relative to the container itself rather than the page. You can apply dynamic positioning and visibility changes to the container, i.e. setting the container property Visible to false will hide the container and everything in it.
   
   Use for: Modals, notification messages, some navigation elements like sidebars
   
   
3. Components – I feel like these promise a lot but slightly fail to deliver what we really need. I’ll start with the positives. You can create a component which can then be placed on multiple pages of your app. When you update the component, all instances are updated. All good. However, you can’t interact with items on the page from items in the component (sort of), and you can’t update a global variable from within a component.
   
   Use for: Navigation elements, any repeating element that doesn’t need to raise more than one event to the screen

Other Microsoft PowerApps examples and tips

1. Scrollable screens – Bear in mind if you want your screen to be scrollable in PowerApps you have to decide this at the beginning. A screen is either scrollable or not, and you can’t change screen types on the fly. Worth knowing before you get half way through!
   
   
2. Avoid spaces in any naming, both in SharePoint columns, and elements in PowerApps. Be grateful if you never know the pain caused by not following this rule.
   
   
3. If you have applied any dynamic positioning or sizing on an element DO NOT drag it around to move it. All dynamic positioning info will be lost! Only modify the position in the code.
   

I’m planning on writing a few blog posts focusing on some other areas that warrant a whole post to themselves – simple navigation in PowerApps, working with SharePoint lists, amongst others. Let me know if there is anything you would like me to cover.