Using a Settings Screen in your App

In a PowerApp, as you've hopefully discovered by now, you can have multiple screens to separate the logic and functionality of the application into smaller and more manageable units.  When the app is first run it will always open the screen at the top of the list in the editor, and you can move between screens using the Navigate and Back functions.
This gives the ability to create a screen, to which there is no link to navigate to, that you can use to hold settings.  These can be used by properties throughout your app to allow a single point to edit a setting, as opposed to trawling through long lists of controls one by one to amend them.  One of the first reasons I use this type of settings screen is to define the colour palette for my app based on the house style of my customer.  Most organisations have a set of colours and fonts that they specify should be used for their work and I find that using this defined style makes the applications I develop look more corporate and therefore more professional to the end user.

So lets build an App to demonstrate.  For most, if not all of these examples I blog about, I will use a blank tablet application.  While the examples and auto generated apps are useful for learning, I prefer the freedom that is gained from starting with a blank canvas each time.  In my new app, I rename the default screen, ie scrLandingPage and then add a second blank screen scrSettings.  Naming objects is vital for PowerApp work and its important to have a clear naming convention that works for you.


Now I have my blank application, the first thing to do is to insert a rectangle from the Insert/Icons drop-down.  Set the fill property of this rectangle to the first colour in your palette you want to define.  Most companies will have a list of colours with their RGB value so you can set the fill using the RGBA function, for example.
RGBA(47,38,97,1)
I'm not planning on explaining each function I use, I would hope if you're reading this you have discovered the reference section of the PowerApps documentation and can easily refer to the Microsoft syntax there.

So I've got a bluish rectangle on my settings screen, and yes that is the primary colour my organisation uses.  I next name the rectangle object under the screens tree on the left of the editor, again, naming is key, but my convention is something like clrPrimaryDarkBlue

Generally you will need to define a number of colours, so repeat the above until you have a rectangle for each. To make it tidier, you can create a background rectangle and lay it all out nicely, and sensibly sized.  Mine now looks like this


You will notice I have added all the components of my palette to a group.  I also, though you can't see this, made the position of each component relative to the grey background so I can move them around together as one unit.  I expect I will be writing a post on this technique soon as its a useful concept.
I can now start adding items to my other screen and colour them using the palette objects.  Lets add something to the scrLandingPage screen and configure it to use the colour defined as clrPrimaryDarkBlue for the fill property.


You will notice that I have simply used the name of the rectangle as the fill property, I don't have to use the .fill property as you might expect, though it will work fine if you do.  There are some instances where you will find you do need to use the .fill property though these seem to be reducing with recent updates.  If the editor gives an error,then try adding it.
So, what we have here is a good starting point.  I have got a central palette and can now change the colours defined in it to change all the objects in my application that refer to it.  Helpfully, if I rename the palette rectangles to reflect different colours that I set the references to that source will update accordingly.
However, I might decide that I want my main object colour to change from one colour in the palette to another.  I could change palette settings and achieve it that way, but I could also add an intermediary object to show a setting.  Lets go back to our setting screen and add another rectangle.


I've also added a label next to it so it's clear what I have done.  The new rectangle has its fill property set to clrPrimaryDarkBlue and its name to settingPrimaryAppColour.
Now on my application, I set the colour of everything to be settingPrimaryAppColour.  Nothing has change visually, but now if decide to change which colour in my palette I want to be my primary application colour, I can simply set the fill property of the rectangle to a different rectangle in the palette.  All the objects in the app will now change accordingly.


A couple of tips:  I have built a template app of my own with a number of settings like this for text sizes and colours using label controls, application settings such as spacing distances to control the layout of items which can be held in labels and so on.  When I start a new project I can simply save this template as a new project and I have hours of work done for me automatically.  Maybe, Microsoft will add template functionality at some point but in the meantime this works for me.  
Also, I find its better to create one item in the application, configure it appropriately using the settings objects so it looks right, and then copy/paste it each time I need to throughout the app.  That way you only need to make all the configurations once.

So there's my first post.  I hope this is useful for someone out there.  Please comment below if you need any more information on the topic.

Andy

Comments