Adventures with Power Apps: Fun with Galleries and Canvas Components

I’ve been on a big kick with Canvas Components as of late!

• Adventures with Power Apps: Fun with Canvas Components! (Part 1) – Matt Ruma
• Adventures with Power Apps: Fun with Canvas Components! (Part 2) – Matt Ruma
• Adventures with Power Apps: Fun with Canvas Components! (Part 3) – Matt Ruma

Next step, how might I approach a Canvas Component that would need to support a Gallery control?

To be honest, I wasn’t sure how I would do this, but I figured I’d give it a try and see if it was doable, and more importantly, easily doable.

The first thing I did was add a SharePoint List that I could use as my data source.

I clicked Site contents, the New and then List.

I clicked From Excel.

I clicked Upload file and then selected the Excel file to import from my Downloads directory, which you can find at https://mattruma.com/wp-content/uploads/2024/05/Issues.xlsx.

The field Date Submitted didn’t get picked up as Date and time so I changed it to do so.

I clicked Next, and then finally Create.

Once my Issues list was imported and hopped over into Power Apps Studio and created a new Solution, which I called POC 10 Solution (Gallery Component), which you can find at https://mattruma.com/wp-content/uploads/2024/05/POC10SolutionGalleryComponent_1_0_0_0.zip.

I am not going to go through everything in the Canvas App, as I mentioned you can download it above and check it out yourself, I will, however, call out a couple of nuances.

The Component has an Input Property with the Display name of Data source and Name of Items that is of type Table.

On the Component, I set Items to the following:

I was running into some challenges with binding the Data source directly to the Component which is why I opted for the Table approach.

I added another Input Property called Edit Screen of type Screen so we can navigate the user to whatever the Screen is for editing when they selected an Item.

I can’t pass context in a Component, and I need some way for the Screen to know what Item is selected in the Gallery control, so I’ll had an Output Property to handle this.

I added an Output Property called Selected of type Record that returns the Item selected in the Gallery control.

I set Items of the Gallery control to the Items of the Component.

I added the Component to the Screen and updated the properties for Edit Screen and Data source.

We will have to use a ForAll statement to map our Issues SharePoint List to a Table, which is what the Items property is expecting.

From there I built my navigation, which updates the value of gblSelectedTab to the current tab selected, which in turn is the Status we want to apply as a filter to the Issues.

I added an Edit Screen, called IssueEditScreen, that allows the user to edit the Requestor and Title for the selected Issue.

I ran the Canvas App and everything looks good!

I was in a pinch for time, so I would really encourage you to download the solution yourself at https://mattruma.com/wp-content/uploads/2024/05/POC10SolutionGalleryComponent_1_0_0_0.zip, and play around with it.

Just make sure to create that SharePoint List, remove the current SharePoint data source in the Canvas App and add the one you just created.

If you have any questions, please don’t hesitate to ask, and if there is a better way, please please please share that as well!

Thanks!