Tip calculator FEM weekend challenge in Power Apps learnings

I wrote a short article about drop shadow properties for containers yesterday when I started to Power Appin' this Frontend Mentor | Tip calculator app coding challenge

I finished my app today morning. My learning from this challenge in Power Apps are the following:

• I focused on the FocusBorderThickness property which had a default 4 px width set by default, I have to consider to allocate that space evenly for your inputs, buttons in galleries, containers otherwise that border is trimmed. This layout has a 2px solid border for inputs.

• TextFormat.Number property limits your input to numbers and decimal separator point, commas as used for thousands. I am localized for Poland on my iOS where for decimal separator we use comma I had to adjust in Settings > General > Language & Region > Number Format so I could limit the Input Format property in Powers Apps to TextFormat.Number and use cents as well.

• You don't have control over hint text color prosperity ##757575 is hardcoded

• Resetting the Text Inputs where one of the input is inside a gallery requires to use a local variable set for those inputs Reset property. Actually it is more convenient and less low-coding needed than to list out all the inputs in the form and reset it one by one. I have to set it to true and set again to false so changes are reflected. To reset a gallery make sure you add {}, empty curly brackets to Default property of the gallery. This on OnSelect property of the Reset Button:

UpdateContext({locReset:true});UpdateContext({locReset:!locReset});Reset([@GalleryTip]);        

• DisplayMode of Reset Button was also a nice challenge to set its mode to Disabled or Edit based on the empty values of inputs. However the custom input is in a gallery, and my input by default has a 0 value so if no custom value is provided you just simple does not want give a tip I could add another Or condition (GalleryTip.Selected.Value=0 And IsBlank(TextInputCustom)) but to keep it simple my validation to activate the Reset Button looks like this.

If(IsBlank(TextInputBill) Or IsBlank(GalleryTip.Selected) Or IsBlank(TextInputPeople),DisplayMode.Disabled,DisplayMode.Edit)        

Selected Values on gallery. This one was a nice challenge due to different columns and rows on desktop vs. mobile layout. If you know that Vertical Gallery wraps horizontally into columns but Horizontal Gallery wraps vertically into rows you are set. Items order is essential to understand for those controls. How to identify which blank gallery was used?

1. Turn on the navigation and/or scrollbars and add some Template padding to check which way navigate/scroll.

1. Set wrap count back to 1 and see items stacked from top to bottom or left to right.

You can achieve the same result both way just on horizontal one you must adjust the order of the Items based on wrap count and the X positioning of your items in the gallery will different X and the Template size property.

I think the vertical wrap is easier in this case since Tip% values do not require adjustment. I read from left to right not from top to bottom. If you go with the horizontal way another If condition will be required for Gallery's Items property:

If(App.ActiveScreen.Size>2, [5,25,10,50,15,0], [5,15,50,10,25,0])        

• I could add a simple but native Power Apps property drop shadow on the container, more about this new feature here.

This was a fun challenge.

I was thinking about how to take this simple app into the next level.

My ideas:

1. Use a form recognizer to get the scanned bill Total value and check if Tip is already included.
2. Detect your location and based on Country preselect default Tip %

Tipping Around the World: A Global Guide | Western Union

Thanks for scrolling this far. Happy Power Apping.