You can do Magic, In Power Apps

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.

1. On App start or on visible of the screen set a variable to the name of the tab that will be ‘active’ by default.  Ex:  Set(varTabs, tab1)
2. Add a button to the screen and set the height and width to matching values, making sure that the border is set and visible.  A width of 2 or 3 is a good place to start.   Set the radius to 55 in the control card on the right side of the screen.   Adjust the height and width, these must be the same if you want a true circle, as needed to get the size you want and set a fill color and a disabled fill color, you may also need to set a font color, depending on your fill and disabled fill.
3. Add a circle icon and set its height and width to the button height and width:
   1. ButtonX.Height
   2. ButtonX.Width
4. Set the X and Y property on the icon to position it where you desire for your shadow effect.  Setting it to the Button values, will keep it in position if you need to move the button as the shadow will move with the button. In the image above these settings are:
   1. ButtonX.X + 4
   2. ButtonX.Y + 3
   3. Select the icon and right click, in the context menu go to ‘Reorder’ and move the icon behind the button.
5. Add another button and icon for the next tab and set the settings as you did for the first button, substituting the new button reference in the Height, Width, X and Y settings on the new icon.
6. On each tab set the Fill  and OnSelect properties of the button and the Visible property of the icon like so
   1. Button Fill:   If(varTabs = TabX, RGBA (xx, xx, xxx, 1), DisabledFill)
   2. Button OnSelect: Set(varTabs, TabX), this should be the value of the selected tab
   3. Icon Visible: If(varTabs = TabX, true, false)
7. Position your tabs on your horizontal ‘bar’.  Select the rectangle component and right click, go to Reorder and send to back until it’s behind all the tabs. 

For more traditional tabs consider this

It’s the same principal with a few changes.

1. Use a button for the shadow
2. Clear the text from the ‘shadow’ button
3. Set the bottom right and bottom left radius property of the button and the shadow button to 0 using the property dropdown
4. Set the X and Y of the shadow button to ButtonX.Y – somevalue and ButtonX.X – somevalue  (this uses a minus)
5. Reorder the bar to be in front, this keeps the shadow button from having a small gap at the bottom

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!

1. Start with a large rectangle that can be used to ‘dim’ the other controls on the screen.   Make it big enough to cover those controls that should appear to be ‘dimmed’.   Set it to a white or light gray fill and then use the slider on the custom tab to make it somewhat transparent so the other part of the screen shows through.
2. Now add a smaller rectangle or Text Input in view mode if you want rounded corners and set its fill property to an opaque color that matches your theme. 
3. Layer your controls on top of all of that.   Don’t forget to add a cancel icon or a button that performs some action that will also make your ‘popup’ controls not visible when they are not needed anymore.

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:

1. Background ‘dimming’ rectangle icon
2. Background rectangle icon or text input behind the controls
3. Controls and/or labels
4. Control or Icon that can make the popup parts not visible

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)

   }

     );