Power Apps 10 Quick Developer Tips

There are so many great tips with developing in Power Apps, but there are quite a few that maybe don't deserve their own blog, but can add real value. So here's my top 10 quick tips, you will probably know a couple, but hopefully there will be a few nuggets found for everyone.

1. Containers only when needed
2. Naming conventions for intelliSense
3. Replicate CSS class's
4. Relative positioning
5. Environment colour
6. Lazy load
7. ShowColumns for quicker loading
8. AddColumn is calculated column
9. Easier patching
10. Button press for reuse

1. Containers only when needed

Containers are great, and allow responsive design and improve upon groups. But they aren't always necessary, they definitely shouldn't be used to help position components when the app isn't designed to be responsive. In fact if used in a half baked way it will create no end of bug reports due to unexpected behaviour on different screen sizes.

2. Naming conventions for intelliSense

IntelliSense is a software tool like auto complete that helps developers by listing possible words based on what you have started typing. Power Apps has intelliSense and it can be maximized by intelligent naming convention. I talked about it in detail here when talking about code reviews. By structuring your variable and component name right you can help the intelliSense. An example would be if you were looking for an input on screen1 called name, if you had a naming convention like this

typeScreenName

with a 2 letter representation for type and screen you would get

inS1Name

As you know its a input after 4 letters you have a list of that screens components, 5 letters and you probably have it without having to type everything (also great if you cant remember it exactly)

3. Replicate CSS class's

The power of a css class is consistency and ease of updating. Power Apps don't have css class's and a poor selection of themes, so updating UI design can be a nightmare.
But there is a way of creating your own (though takes a little investment of time for savings later).

Create a colour theme object like this

Set(voClass,{
   mainBackground:RGBA(164, 38, 44, 1),
   mainColour:RGBA(255, 255, 255, 1),
   secondBackground:RGBA(1, 3, 4, 1),
   secondColour:RGBA(255, 255, 255, 1),
   thirdBackground: Color.DarkGreen,
   thirdColour:Color.LightGreen,
   errorBackground: Color.Red,
   errorColour: Color.White
})

You then have to set the components to this object e.g. voClass.mainBackgound. This can be time consuming but there are a couple of tricks

• Create template components that you copy and paste
• Use find and replace (though remember to replace one by one not all as this can have some unexpected behaviour)

4. Relative positioning

Another one which requires some investment but will be worth it in the long run. Position you components relatively, ie.

X parameter

(parent. Width/2)-(self. Width/2)

will position the component in the horizontal middle. Effort I know, but now when ever the parent moves/changes size the child component automatically updates.
Setup right and instead of making ten updates everything can be done with just one.

5. Environment colour

This is a quick but can add a lot of value. Use an environment variable to set a colour of a key component, that way you will never get your Dev, Test or Prod mixed up. I normally use:

• Green: Dev
• Blue: Test
• Prod: Actual Colour

But obviously any will do, just as long as they are consistent.

6. Lazy load

Lazy load is when you only load data/components if they are needed. Out of the box Power Apps is pretty good at lazy loading, galleries load in 50 blocks and screens load when opened. With that in mind we need to make sure we work with Power Apps by:

• Never referencing child page components (as this will force the entire screen to be loaded in the background)
• Don't load everything on the AppOnStart (this is such an issue this parameter is now in legacy)

Simple steps that can massively improve your apps performance

7. ShowColumns for quicker loading

Like lazy loading ShowColumns/DropColumns can have a big impact on performance. When loading data (mainly from SharePoint and Dataverse) we get lots of data we don't want, this could be fields we don't use or additional metadata, just look what comes along for the wide with a SharePoint request

ShowColumns only downloads the selected fields (DropColumns downloads all fields except the selected fields)

8. AddColumn is calculated column

We often forget that AddColumn is a calculated column, I see far to often a ForAll loop and a Patch or a Collect on a new collection to get modified data, when we can just add a new column to the existing collection with the modified data

9. Easier patching

Still shocks me this isn't in the main documentation, but did you know you can avoid Lookups if you have the GUID.

We are taught to

Patch(dummyData,
    LookUp(dummyData,ID=1)
,
    {Title:"Num1",number:1}
)

when we can actually

Patch(dummyData,{ID:1},{Title:"Num1",number:1})

Theres a similar trick with creating record, we told to

Patch(dummyData,
    Defaults(dummyData)
,
    {Title:"Num1",number:1}
)

but we can

Patch(dummyData,Table({Title:"Num1",number:1}))

For more tips on working with data check this out Power Apps- Patch vs Update & Collect

10. Button press for reuse

Probably my favourite tip, I always wished for reusable functions in Power Apps, but did you know there is already a kind of way.
The Select function allows you to do a virtual click/OnSelect of another component. So if we have a block of code we want to reuse we can put the code into a hidden button that we can call from multiple places with the Select function.

A good example would be a api call, we could have it on first call, next page, previous page, filter change, sort change. That call function would have to be duplicate in 5 places, with each needing an update if we change anything.

Hopefully you found one or two new and useful.