cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Connor55
Resolver I
Resolver I

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

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

9 REPLIES 9
GarethPrisk
Resident Rockstar
Resident Rockstar

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!

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

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.

@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
Not applicable

Did you find a solution for that? @Connor55 

 

Thank you!!

winj945
Helper I
Helper I

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! 

@winj945 

 

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

@winj945 

 

Maybe the Patch() function can used for it?

@MichaGue 

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

Helpful resources

Announcements
Power Apps News & Annoucements carousel

Power Apps News & Announcements

Keep up to date with current events and community announcements in the Power Apps community.

Power Apps Community Blog Carousel

Power Apps Community Blog

Check out the latest Community Blog from the community!

Top Solution Authors
Top Kudoed Authors
Users online (2,571)