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:

Table(
    {
        ID: 0,
        Title: "Untitled",
        Requester: "",
        Location: "",
        Status: "Open",
        Priority: "Urgent",
        'Date Submitted': Today()
    }
)

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.

Navigate(IssueGalleryComponent.EditScreen, Transition.None)

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.

ForAll(
    Filter(Issues, Status = gblSelectedTab),
    {
        ID: ID,
        Title: Title,
        Requester: Requester,
        Location: Location,
        Status: Status,
        Priority: Priority,
        'Date Submitted': 'Date Submitted'
    }
)

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!