RedCloud Consulting
  • What We Do
  • WHO WE ARE
    • MEET THE TEAM
    • ABOUT US
  • CAREERS
  • COMMUNITY
  • BLOG
  • CONTACT
  • Sustainability

Power Apps - Dynamic Dimensions to the Next Level

11/18/2021

 
Picture
Our newly developed learning series dedicated to Business Solutions and Intelligence tip posts continues. Read on for tips from Yusuf on taking your Canvas App dimensions to a new level. As you dive in, be sure to leave your questions at the bottom in the comments section, or feel free to let us know what else you’d like to see.
​
 

Looking for more posts in our Learning Series? Click here to explore the full list.
Whether it be a Power App or a Power BI report, components or visuals that don’t line up perfectly can so easily degrade the user’s trust in your process or data. I mean come on, if the time couldn’t be taken to line up two graphs, who’s to say you took the time to double check your data accuracy?!

For that reason, I have made it a habit in my own Canvas App development to never have a hard coded X, Y, Width, or Height property. In the past, this was even more important when containers weren’t available (all hail containers!), but even with containers, systematically setting your dimensions can add a huge value.
As with many things, there are patterns and common best practices I have discovered. Those that I find myself using most frequently are listed below.

Stay at 0

Often times you’ll have to copy and paste components to different screens, and you don’t want the X and Y value to increment by 40. 
Instead of 0, use Min(0).

Centering

Often you want to center horizontally and/or vertically. You can use the align feature, but that’s not smart enough when you then change the width or height!
Instead, set:
X = (Parent.Width - Self.Width) / 2
Y = (Parent.Height - Self.Height) / 2
This is a great trick, because it also works within containers!

Creating a Buffer

To bring continuity, set a global variable to act as your standard buffer between visuals. My go-to is Set(gblBuffer, 20). I also suggest turning off the non-blocking OnStart rule. This will ensure that all the visuals render without a freaky transition.

Cascading Visuals

As I mentioned above, I try to never hard code dimensions and a key to that is referencing other visuals dimensions. Just as the eye tracks, I set dimensions starting on the top, and then cascade down and to the right (F – pattern).
Therefore, if you have two Labels, Label_Title and Label_Subtitle that sit one above the other, set the second labels X and Y variable as follows:
X = Label_Title.X
Y = Label_Title.Y + Label_Title.Height + gblBuffer
See how I snuck in the gblBuffer! With that there's no guess work.
​

Stretch it to the Bottom

Sometimes you want a visual to stretch all the way to the bottom of the page. That’s easy with:
Height = Parent.Height - Self.Y
But, if you’re using a buffer:
Height = Parent.Height - Self.Y - gblBuffer
This works just the same with widths:
Width = Parent.Width - Self.X
Width = Parent.Width - Self.X - gblBuffer
Now what if you have a footer at the bottom of the page and you can’t stretch the visual all the way to the bottom (and you can’t use a vertical container)? No worries, you can reference the footer to adjust the height too!
Height = Label_Footer.Y - Self.Y

With these quick dimensional tricks, you’ll be surprised how quickly and neatly you can transform a Canvas App screen into a dynamic masterpiece!

Comments are closed.

    Categories

    All
    10 Min Spotlight
    A Day In The Life
    BI & Automation
    Community
    Latest News
    Lunch & Learn
    Meet The Team
    Privacy & Security
    Sustainability
    Welcome To The Team

    Archives

    March 2023
    February 2023
    January 2023
    November 2022
    October 2022
    September 2022
    August 2022
    July 2022
    June 2022
    May 2022
    April 2022
    March 2022
    February 2022
    January 2022
    December 2021
    November 2021
    October 2021
    September 2021
    August 2021
    July 2021
    June 2021
    May 2021
    April 2021
    March 2021
    February 2021
    January 2021
    December 2020
    November 2020
    October 2020
    September 2020
    August 2020
    July 2020
    June 2020
    May 2020
    April 2020
    March 2020
    December 2019
    August 2019
    June 2019
    August 2018
    February 2018
    August 2017

    RSS Feed

Picture
Main Office:   425-305-4121​        |         info@redcloudconsulting.com
©2020 RedCloud Consulting, Inc.  |   All Rights Reserved.  |  Privacy Policy  |  Terms of Use 
  • What We Do
  • WHO WE ARE
    • MEET THE TEAM
    • ABOUT US
  • CAREERS
  • COMMUNITY
  • BLOG
  • CONTACT
  • Sustainability