Canvas App Styler

I made a PowerApp to help build better looking Canvas Apps. You can try it out here.

And if you want a free copy you find it in the TDG Power Platform Bank here.

At the start of the year I decided I wanted to increase my PowerApps building skills. To do this I challenged myself to build more apps for my own use. My idea was that every time I went looking for an app in the App Store to do whatever, instead of downloading it, I would make my own version in PowerApps. Even if I ended up canning it and downloading something premade I wanted more experience of building apps for real world scenarios. In January I built myself a ‘Scuba Dive Log’ so I could log my dives like a diary. In February I built a baby tacker app for my wife so she could log breast feeding, nappy changes and sleep of our (then impending) son. In March I started to play with the Jira connector but I eventually stopped that experiment because I could see it already suffered from the same problem the previous two apps had: they all looked like a Dynamics Consultant built them.

I’m not, and can’t for a second pretend I am a UX or design expert, but I could tell the apps I were building weren’t very pretty or user friendly. So in lieu of my Jira app I changed tact and actually built something very simple. I started with a Text Styler. I could see in the PowerApps configuration menus and documentation that there were several properties for text but I couldn’t find anywhere (beyond the autocomplete helper in the app maker) a list of those options. So I made the list, wired buttons up to a variable and voilĂ  had the ability to preview every font option in PowerApps. Next I put together something similar for borders. I knew you could configure each corner to have a different radius but how did that change the other corners. The border styler allows you to see that. In the process of building these two ‘mini apps’ I found it difficult to use the horizontal and vertical align option so… I built my own horizontal and vertical spacer ‘mini apps’.

In the end I’ve got an app that I think at least is very useful to me and other app builders. I can take this app to a client and ask, ‘What do you want the font in the app to look like?’ And when they ask ‘What are the options?’ We can explore the options together in the text styler. Ditto for borders. Then when it comes to actually placing items on the canvas I can plan how many items in a row and how many in a column and the app will give me the precise x and y value for left align, right align and centred justifications.

While I haven’t done this yet I think it would certainly be possible to merge this app with another, especially the text and border styler pages. Then it would be possible to use the output field as the style reference for the rest of your app, potentially allowing for the style to become configurable by your end user!

Anyway! As I think it is useful for me, I think it might be useful for others so please head over to the TGB Power Platform Bank to download the .msapp file for yourself. I’d be more than happy to hear feedback, thoughts and suggestions.


Leave a Reply

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