cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Connor55
Level 8

How to use a gallery in a component

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!

1 ACCEPTED SOLUTION

Accepted Solutions
Community Support Team
Community Support Team

Re: How to use a gallery in a component

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:

3.JPG

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

4.JPG

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:

5.JPG

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

Test.gif

 

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,

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

4 REPLIES 4
GarethPrisk
Level 8

Re: How to use a gallery in a component

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
Level 8

Re: How to use a gallery in a component

@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?

Community Support Team
Community Support Team

Re: How to use a gallery in a component

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:

3.JPG

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

4.JPG

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:

5.JPG

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

Test.gif

 

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,

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

Connor55
Level 8

Re: How to use a gallery in a component

@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!

Helpful resources

Announcements
Better Together’ Contest Finalists Announced!

'Better Together’ Contest Finalists Announced!

Congrats to the finalists of our ‘Better Together’-themed T-shirt design contest! Click for the top entries.

thirdimage

Power Apps Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Join THE global Microsoft Power Platform event series

Attend for two days of expert-led learning and innovation on topics like AI and Analytics, powered by Dynamic Communities

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

thirdimage

Microsoft Business Applications Virtual Launch

Join us for the Microsoft Business Applications Virtual Launch Event on Thursday, April 2, 2020, at 8:00 AM PST.

thirdimage

Community Summit North America

Innovate, Collaborate, Grow - The top training and networking event across the globe for Microsoft Business Applications

Top Solution Authors
Top Kudoed Authors
Users online (10,350)