Power Apping FEM's Ecommerce Product Page my weekend challenge

Frontend Mentor | E-commerce product page coding challenge

Link to challenge is above. When I was approaching this intermediate level challenge I realized that some of those elements will be tricky to reproduce in Power Apps. So for simplicity I treated some hover states OnSelected, OnClicked state. Notice that layouts in canvas apps are not responsive by design. Responsiveness refers to the ability of an app to automatically align to different screen sizes and form factors to use the available screen space sensibly, providing great UI and UX in every device, form factor, and screen size. You have to make it so:

Create responsive layouts in canvas apps - Power Apps | Microsoft Learn

My first concern was that reproducing hover states for buttons where you suppose to control pseudo-classes but your button control can change only fill color, text color and border color. There is no HoverFontWeight property neither for buttons, nor gallery control has OnHover property. OnSelect and IsSelected property can control other elements visibility and/or trigger animations e.g.:

If(ThisItem.IsSelected, FontWeight.Semibold, FontWeight.Lighter)        

When I wanted to reproduce this simple behavior what a flex container gives to its children elements, I was looking for a Flexible width gallery control.

There is no such gallery type. Then I realized that it would not help me since every label control comes with defined parameters. There is an AutoHeight property on a label but there is no corresponding AutoWidth property that will adjust to smallest without wrapping the text into a new linke and adjusting the height. So my concept to this flexbox model approach was not applicable anyway.

What I did is to hardcoded that label widths into a collection. I was first trying to calculate by Len() function but I realized that different letters have different width so I just make those widths fixed in a collection.

Gallery has a templateSize property. I hardcoded to the widest Title.

First(colMenu).MenuWidth        

Then I just positioned the button control inside the gallery in the middle of the X.

(GalleryMenu.TemplateWidth-Self.Width)/2        

The button width was ThisItem.MenuWidth but this has not solved the my gap issue.

Microsoft recently introduced some modern controls in canvas apps - Power Apps. Unfortunately those modern controls are still very limited (preview) in properties. By the way check out The Complete Power Apps Modern Controls Guide by Matthew Devaney, Matthew Devaney 's blog is a must-visit resource if you are looking to deep dive into canvas apps or at least you like cats ?????????.

Unfortunately you don't control any color, gap, distance from text of pseudo elements but I assume this TabList control will be a quick solution for horizonal and vertical menus. Behind the screen these are buttons in a flex container inherit style from <style id="fui-FluentProvider1"></style>

--colorCompoundBrandStroke since it has hardcoded CSS variables I assume it will use some predefined Color schemas/templates from Power Apps. Currently there is no option to change it. If all those variable can be defined from Power Apps in the future such control will be super flexible to theme up your Apps. Meanwhile you can build your own menu component or create a Code components for canvas apps. Code components are implemented using HTML, CSS, and TypeScript. While it is not required that you use any particular UI Framework,?React?and?Fluent UI?are popular choices. Building code components is not a low-code/no-code development.

Coming back to FEM challenge this layout should be mobile first but in Power Apps I started from desktop experience. It is always harder to find out when should the two column layout wrap into a one column therefore I start to do my "markup" with defining my containers from outside and working to inside into micro layouts. My wish list is to have a hand pointer property or just simple set it when an image have a OnSelect value not false or nor blank. Icons do have hand pointer but icons don't have border radius properties. ˉ\_(ツ)_/ˉ So when it comes to buttons where instead of text you have an image or image and text you end up with transparent button overlays over those other elements.

I often put some elements widths on a label to see where I am currently to control minimum width property based on the screen sizes.

Next challenge is try to understand the layout's requirements,

Your users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Open a lightbox gallery by clicking on the large product image
• Switch the large product image by clicking on the small thumbnail images
• Add items to the cart
• View the cart and remove items from it

e.g. why do we care about 0 next to Add to cart? Can I add 0 item to the cart? If not shall there be a 0 on the counter, if yes shall the Add to cart button should have a disabled state? How far can I count up or down? Should the menu modal close the cart on mobile?

Further questions I ask myself if I open the image gallery on desktop design should the underlying gallery main image change and show the last viewed image? Do image navigation arrows should loop infinitely through the gallery or be hidden when reach the last image in the gallery?

Setting up the X and Y axis of Cart due to different screen sizes was also fun.

Modern layouts comes with some box-shadows which you cannot no-code, for that some basic CSS knowledge is required. Box shadows are always challenging for me since I do not have access to paid Figma layout. Eyeballing from a pixelated JPG image is not the best way to nail it size, blur properties or opacity but what you see is what you get.

Commenting my efforts especially in formula bar is always handy since the more advance challenges may require more time and coming back later to review why those properties are set is a good practice.

When adding the logic to add items to cart for checkout I was wondering how should the Add to cart button behave. Since there was not disabled state delivered with the layout I came up with built in warning notification.

I had several challenges to make it pixel perfect, but this article is already long and if you scrolled here please like or comment. To take it to one step further I added patch function on checkout button to save the items from cart to a SharePoint list.

Off to the next one. Thank for scrolling this far. Happy PowerApping.