Recently I have been collaborating with clients with rigid branding guidelines which they needed to align to within their Power Apps canvas apps. Power Apps give us the ability to customise the colours of all the elements we are working with but doing this repeatedly can be time-consuming.
There is a selection of ways to tackle this that involve varying complexity; the solution I have been using and will explain here is setting a colour scheme within variables that run on the start of a Power App launching then referencing the variables rather than a colour code value or using the colour picker within our elements.
We can then create elements (e.g., buttons, labels) and anything else we will need on a screen and set our variables as the colours rather than having to use a palette picker or setting a colour code. We can then copy these customised buttons and labels throughout the rest of the Power App without having to configure their colour settings again.
Within the “Tree view” and the “Screens” menu we need to left-click “App”. This will bring up the “OnStart” formula builder.
We then need to paste the following into the formula bar. Amend the colour values to meet your branding needs.
Set(
Colors,{
Primary:ColorValue(“#1D2B4D”),
ButtonHover:ColorValue(“#003C75”),
HoverTint:ColorValue(“#E7FAFF”),
SelectTint:ColorValue(“#C2F2FF”),
Background:ColorValue(“#EBEBEB”),
ButtonTextLight:ColorValue(“#FFFFFF”),
ButtonTextDark:ColorValue(“#292929”),
DisabledButton:ColorValue(“#6D7383”),
DisabledButtonBorder:ColorValue(“#515869”)
}
)
Once we have successfully pasted and want to test, we left-click on the ellipses (…) to the right of App and left-click “Run OnStart”. This will then apply our new colour variables to our existing editing session.
Browse to the “Insert” menu and then left-click on “Button”. This will add a new button to our current screen. Then select “Fill” within the Properties picker drop-down. You will notice the default value is “RGBA(56, 96, 178, 1)”.
We can remove this value and replace it with one of our newly set variables (e.g., “Colors.Primary”). We can then set any other colour settings we want to customise be they border, hover, pressed, etc. by using the same method on their respective properties.
Once we have configured this button to our satisfaction, we can copy it around our Canvas App saving us time and clicks. Thanks for reading and I hope that has been useful for you!
If you would like to discuss how risual can help you exploit your investment in the Power Platform or have any questions regarding Microsoft 365 get in touch today.
www.risual.com/contact | 0300 303 2044 | enquiries@risual.com
To stay up to date with risual, follow us on Twitter (@risual) and LinkedIn.