FEM Four Cards Challenge Power App'ed

Frontend Mentor | Four card feature section coding challenge

As a Saturday relaxation I was trying to wrap my head around grid containers vs. capabilities of different blank galleries inside Power Apps. My challenge was how do you reproduce grip-template -areas in Power Apps?

TL'DR' and Spoiler alert: I did not find any gallery or at least a way to make it work as a grid-template areas.

  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas: 
                 ". team-builder ."
        "supervisor team-builder calculator"
        "supervisor karma calculator"
                 ". karma .";        

To achieve the same layout I had to play with a visible property of the middle column and show/hide the cards which were inside the left(top) and right(bottom) columns.

For the first approach I caught myself on the same mistake that I did with horizontal vs. vertical blank gallery and modifying the wrap count, wrote about that here .

With some usability or common sense in mind, I didn't want to spread those cards across a wide screen. So I decided to max size the cards container so the cards can grown within their own parent columns.

If(App.ActiveScreen.Width>1500, 1500-Parent.PaddingLeft-Parent.PaddingRight, App.Width-Parent.PaddingLeft-Parent.PaddingRight

)        

My key take away from this is to get confidence of how to control the height of the parent container when you allow content inside to wrap.

First, since I new that my content will be used on different device and resolutions and orientations I make sure that my Canvas App is in Tablet layout with scale to fit off.

Second, I want to make sure that whatever lands on the screen there is a Wrapper (Main) Container that has both scrolls enable to if there is a X an Y Layout Overflow issue. Width and height is set to App.Width and App.Height. X and Y positions are 0 and no round corners or drop-shadows are here. Containers have LayoutOverflowX and LayoutOverflowY properties. Take only 2 values,

LayoutOverflow.Scroll (which give you an auto scroll if overflow is happening) or LayoutOverflow.Hide if you want to the scrollbar remain hidden.

Now every other child containers go into that Wrapper. I still prefer to set the Background color on the Screen Fill property but the container's Fill will do exactly the same.

How to define that height?

You can sum up all elements' height or take this shorter approach. Get the height and Y coordinate of your last item in that container.

Both should give the same results.

Now the concept is clarified, we can add some low code media queries into that mix.

Switch function is a simple If. If and Switch functions in Power Apps - Power Platform | Microsoft Learn So I just switched the height of a container based on Screen size. Since the height is calculated based on nested containers' heights it will always give you a right height. Finally if those nested containers need more space to display its content you will expect an overflow in the main container since the App.Height will be less so auto scroll is an expected behavior.

I also took advantage of even out the cards height by adding some dependency of the height with of the card which has more text so when the layout is showing two cards next to each other, instead of stretching the cards within the parent container, I added such logic to the height of the shorter card.

Simple If says, make the Supervisor container the same height as the Team Builder container IF they are next to each other, otherwise make use the sum of heights of all flex children elements.

I'm adding to my Power Apps features wish list the following I miss from current containers capabilities:

1. Custom drop-shadow properties like custom color.
2. More granular control of borders e.g. sperate values top, bottom, left or right.

Thanks for scrolling this far. Happy Power Appin'.