Say No To Traditional Look And Feel Of Power Apps

Say no to traditional look and feel of power apps series - Product Catalogue Sample.

Are we still creating power apps with traditional look and feel?

Please read some of the UI/UX tricks that I have followed to create the below power app of a sample product catalogue. By the way, I have used 100% out-of-the-box controls to accomplish it. Apart from regular controls like labels, buttons, and image controls. I have used below controls:

• A gallery and a nested gallery
• Html control to represent a card for good visual appealing
• Parse JSON function to read the complex data

Note: Before we start the actual app development, turn on the experimental feature ParseJSON function and untyped objects.

For demo purpose, I have created a sample list with the required columns for the app.

Sample data I have used in Available colors column:

[
{
"Color":"#000000",
"ImageURL":…/sites/PowerappsLearning/Images1/Products/jordon_proto_black.png
},
{
"Color":"#D5212E",
"ImageURL":…/sites/PowerappsLearning/Images1/Products/jordan_proto_red.png
},
{
"Color":"#F18557",
"ImageURL":…/sites/PowerappsLearning/Images1/Products/jordan_proto_orange.png
}
]

Data binding to the galleries:

Inside the child gallery, we have two controls: a button and a label.

• Fill property of the button – ColorValue(ThisItem.Value.Color)
• Text property of the label control – ThisItem.Value.ImageURL

Parent Image will change based on the item selected inside the child gallery label control. If nothing is selected, we will show the first item from the child gallery.

If(!IsBlank(gal_Child_JSONData.Selected.lbl_ImageURL),gal_Child_JSONData.Selected.lbl_ImageURL,First(gal_Child_JSONData.AllItems).lbl_ImageURL)

Html control is used inside the main gallery to represent a card design with box shadow property.

Source code