Answered

Gallery to Customer Cards

(0) Share

Report

Posted on by Community Power Pla... Microsoft Employee

Hi All,

I am working on an app that has 2 combo dropdowns where the selection in these drop-downs will show its results in a vertical gallery. Is there any way where we can create cards, where that show the results in individual cards instead of a gallery?

Currently, we have results of 3 columns selected in gallery

Cards Example

Thank you

Categories:

Building Power Apps

I have the same question (0)

All responses (3)

Answers (2)

Sort by

Verified answer

eikmeier 26 on at

Like
a
(2)

Report
Copy link

Link copied!

You can still use a gallery, but you will adjust its properties to make it look like individual cards. Set the gallery’s layout to be a flexible height gallery. This allows each item (or card) in the gallery to have its own size.

For each item in the gallery, you can customize its appearance to look like a card. This involves:
Using a Vertical Container as your main card Container, and HOrizontal containers inside this first container to adjust elements horizonttaly. Use the shadow effect on the Container, that will make your card more beautifull.
Adjust padding and margins.

Inside each gallery item, you can place labels or other controls that will display the data. Bind these controls to the respective columns of your data source.

Write a formula for the gallery’s Items property that filters the data based on the selections made in the dropdowns. This will dynamically update the cards displayed in the gallery based on the dropdown selections.

EXample:
Filter(YourDataSource, Dropdown1.Selected.Value = YourColumn1, Dropdown2.Selected.Value = YourColumn2) Or

Filter(YourDataSource, Dropdown1.Selected.Value in YourColumn1, Dropdown2.Selected.Value = YourColumn2)

And also you can leverage WrapCount to put as many cards horizontally as you wish to fit on your screen.

Was this reply helpful? Yes No
Verified answer

Gerard Simpson 2,987 Moderator on at

Like
a
(0)

Report
Copy link

Link copied!

Hi @Anonymous

See below a quick mock up of how this can be achieved:

In the interest of speed, I have done this quite roughly with just one standard container and then manually positioned the nested controls, but as @eikmeier says, you can use a parent vertical container and then nested containers to more accurately align the controls. Note also some info here is bound to a hardcoded table (to mimic you datasource), but some is just hard coded like the New label and the overlapping horizontal Gallery for the images and I havent showed you how to deal with capping the images and showing the +# of images over those displayed. For starters, to cap them you would just use FirstN function in the pic gallery 'Items' Property (i.e. 'FirstN(ThisItem.PeopleColumn, 3)' )

See attached .msapp file also, which may help you on your way.

Hope this is helpful

Cards in Gallery....

Was this reply helpful? Yes No
Community Power Pla... Microsoft Employee on at

Like
a
(1)

Report
Copy link

Link copied!

@AmDev THank you so much!!. This helped me a lot to achieve the requriement.

Was this reply helpful? Yes No