How to use a gallery in a component

[Connor55]

Hey guys!  I'm wondering how to use a gallery in a component?

I've set an input on each label within the gallery - but I'm not sure where the "ThisItem" bit needs to go.  On the component side?  It's not working the few ways I've tried.

Thanks in advance!

[GarethPrisk]

The Gallery in the component will require a Table of some format, to function.
You can add an input variable of a Collections or a Table. Then you can 'test' or default your structure in your component, and then as long as you pass the same format to the component (when in the app designer), it should work as expected.
It's a bit finicky the first go round. Good luck!

[Connor55]

@GarethPrisk Thanks for the reply!

So I have a table input called "Items" - would the label in that gallery (within the component) need to be set to an output?  How exactly does that part work?

[v-xida-msft · Accepted solution]

Hi @Connor55 ,

Could you please share a bit more about your scenario?

Do you add a Gallery control in a Component, and then want to reference field values from the selected item (within this Gallery) from outside the component?

Based on the needs that you mentioned, I think the a custom Output property within the Component could achieve your needs. I have made a test on my side, please consider take a try with the following workaround:

1. Defined a Table data type Input property and a Record data type Output property within your Component:

2. Define Items property table structure and specify value for the SelectedItem Ouput property:

Within the Items property Table structure, you could define the columns for your needs, e.g. 

Table({ProductName: "SampleText", ProductionArea: "SampleArea", Price: 100})

Table({Column1: "SampleText", Column2: "SampleArea", Column3: 100})

...

Within the SelectedItem property (Output), type following formula:

Gallery1.Selected

Then within the Gallery (inside the Component), add several Labels to display values from the table structure defined above:

using the following formula:

ThisItem.ColumnName

Set the TemplateFill property of the Gallery to following:

If(ThisItem.IsSelected,RGBA( 255, 228, 196, 1 ),RGBA(0, 0, 0, 0))  // highlight the selected item

After that, you could apply above Gallery Component into your canvas app screen. Then specify proper Table records value for the Items (custom Input property) property in this component. Outside the component, add a Label, set the Text property to following:

GalleryComponent_1.SelectedItem.ProductName & "--" & GalleryComponent_1.SelectedItem.ProductionArea & "--" & GalleryComponent_1.SelectedItem.Price

If you want to reference the column value from the selected item in this Gallery component, please using the following formula:

GalleryComponent_1.SelectedItem.ColumnName

More details about the sample Gallery Component App, please check the attached app file.

More details about customizing property in Component control, please refer to the following article:

https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/create-component

Best regards,

[Connor55]

@v-xida-msft 

This was super helpful!  Thanks a ton!  I understand how this works for the most part now.  

The only thing I'm missing - my gallery labels need to use a lookup column.  The data I need to display isn't in the entity the Gallery is references.  

When you're creating your layout in the component items field (creating the Table({Record}) function) - how would you specify a lookup field and also a currency field?  Is this possible?

Thanks again!

[Anonymous]

Did you find a solution for that? @Connor55 

Thank you!!

[winj945]

Hey everybody,

although the question has been answered very precisely I have an additional problem. I would like to use a gallery in an component as well, but the structure of the input table (different sql tables) will be different each time. So I want that the gallery has the same appearance on each screen, but its going to be feeded by different data sources and thus its elements (title, subtitle etc.) should be populated by different columns (depending on the data source obviously).

Is there any way to achieve that?

Thanks in advance! 

[MichaGue]

@winj945 

Did you found a solution for your question? I am having the same problem. Thanks.

[MichaGue]

@winj945 

Maybe the Patch() function can used for it?

[winj945]

@MichaGue 

Unfortunately I did not. Back then I decided to avoid components in this particular case and just use gallery controls directly.