Weekend fun with Frontend Mentor Challenge in Power Apps
Krzysztof Borkowski
ISV Technical Specialist @ Microsoft | Knowledge Sharing, User Interface Design
Today we had a rainy ??? Saturday morning so I took another Junior HTML/CSS challenge called Frontend Mentor | Stats preview card component coding challenge and tried to turn it into a Power Apps.
My learning:
If text label has no letter-spacing property so Label control in Power Apps won't work. HTML Text control to the rescue.
Another tricky part is the mobile and desktop image position, where on desktop image is on the right side while on mobile the image is on the top of the text. I could not find the way just show and hide the visibility of different containers depending on App.ActiveScreen.Size.
Regardless of HTML Text control, some CSS properties are ignored.
style='mix-blend-mode: multiply;
ˉ\_(ツ)_/ˉ
Not to over complicate my low-code approach I put a rectangle in front the image and changed the fill opacity to 50%. Another approach could be to apply the color blending in Photoshop and have at least 2 Static Container and 2 Rectangle controls less.
领英推荐
Actually this layout required a lot of thinking about different brake points since the stats part was in columns but had to turn into rows, Power Apps has its flex property and playing with flexible and minimum widths and LayoutMinHeight properties for a while to make is behave as above.
If(App.ActiveScreen.Size>2, LayoutJustifyContent.End, LayoutJustifyContent.SpaceBetween)
Another challenge I faced is the Frontend Mentor | Age calculator app coding challenge and I consider it even more fun is the validation part and figuring out how to use the DateDiff function and turn days into years and months. I put it aside not to think all weekend for every single requirement. Leap years, days in months which do exist etc, Gosh I would have to write a whole bunch of nested If statements, With functions and local variables. The fun part was the resizing exercise where based on the App.ActiveScreen.Size I had to resize all the fonts, inputs and image and its position. Lucky me there were no box shadows.
Container Height is also vary due to visibility of labels during validation.
ContainerDay.Height+ContainerArrowBtn.Height+HtmlTextDD.Height+HtmlTextMM.Height+HtmlTextYY.Height+Self.PaddingTop+Self.PaddingBottom
Here is a video when I was testing on mobile. Notice that gap between inputs is and the SVG image is different before and after validation. Those small details are keeping me busy when exploring Power Apps. Fonts are off, typography in Powers Apps is also challenging since without PCF control you have no access to Google Fonts. ??
Thanks for scrolling this far.