What is it that makes an app visually appealing? Layout is one big thing of course and how it flows from one area to another, but what about other elements, colors, buttons etc.?
Let’s talk about some things you can do to style your app, Let’s talk about ‘Power Apps Magic’
Rounded Corners Magic
To display text in a container with rounded corners on the border, use a Text Input control with the display mode set to view, rather than a label, as Power Apps does not give you the ability to control the radius of the border corners on a label. In the image #1 is a Text Input and #2 is a label.
There are a lot of interesting things you can do with controls that have radius settings. Consider the creative tabs shown below. They consist of a rectangle for the base, a button and a circle icon for each ‘tab’. The button and circle icon work together to provide the shadow effect on the active tab.
For more traditional tabs consider this
It’s the same principal with a few changes.
Style Magic
How do you easily impose consistent styling and branding colors across an app. There are a couple ways you can do this, using components (which won’t be discussed here) or using a Style variable. What is that you might ask? It’s a variable that has properties. This would be set on App start and define all your colors here. To use it, you simply set the property (fill, color, HoverFill, PressedFill, etc.) like so: Style.AccentFill or Style.IconColor and so on.
Set( Style,
{
AccentFill: RGBA(245, 240, 240, 1),
AccentFillFade: RGBA(245, 240, 240, 0.7),
ButtonFill: RGBA(181, 194, 202, 1),
IconColor: RGBA(149, 144, 148, 1),
PrimaryFill: RGBA(239, 235, 219, 1),
SecondaryFill: RGBA(218, 209, 185, 1),
SecondaryFillFade: ColorFade(RGBA(218, 209, 185, 1), -15%),
SecondaryAccentFill: White
}
)
**Pro Tip: On a blank screen, add one of each type of control and icon you think you will be using in your app. Set the various color properties on each one using your Style variable. Make sure to test the control in play view to make sure that you have captured all the settings. Pay particular attention to any Hover, Pressed, Focused and Disabled Color and Fill properties. Also make sure you layer components like icons and background components so you can see how well they show up. Adjust your colors as needed.
Copy and paste these controls as needed into your app. Viola! All the color and fill settings are already present. The only thing you need to do is rename the controls as appropriate. Leave this screen for future use in case the app needs to be modified. Just make sure to move it below all the other screens so it’s the very last one.
Popup Magic
There is no such animal as a popup in Power Apps, but we can mimic it and quite nicely at that.
So, you have something that you want to display as a popup message of some sort or fields that you want to have completed by displaying them as a popup? Well, let me explain how to do this.
We are going to use a couple rectangles or text input controls and other controls in a layered fashion using the visible property to control them and TADA, you have a popup!
The visibility can be controlled either by setting a context variable true or false as needed or referencing some other value like a dropdown, checkbox or radio control or a button being pressed.
When finished, you will have something that looks like this:
And lastly, as an added bonus, here is a helpful piece of Power Apps magic that isn’t about layout or making the app visually appealing.
Variable Magic
Do you find that your app is overrun with variables, many that contain static data or are you repeatedly filtering a single data source to obtain the same data? If the answer is yes, here is a way you can reduce variables and filter formulas that obtain the same data multiple times within a single app.
Set a single variable with properties that contains the static data you need to use on App start. Could you use a collection for this? Sure, but then you still need to use a filter statement each time it’s used in a formula to get the correct value. Using the variable method, shown below, allows you to simply reference the variable property, no look-ups needed as the heavy lifting has already been done, like so.
varLicenseCost.PAUserCost.Cost or varLicenseCost.PAAppCost.Cost, you get the idea.
Setting the variable:
Set(varLicenseCost,
{
PAUserCost: First(Filter(LicenseData, Application = "Power Apps" And Title = "Per User").Cost),
PAAppCost: First(Filter(LicenseData, Application = "Power Apps" And Title = "Per App").Cost),
PAAutomateCost: First(Filter(LicenseData, Application = "Power Automate" And Title = "Per User").Cost)
}
);
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.