For canvas app developers who are struggling on how to display two entities/table elements/collections there is possible to do this by using two galleries, one as main gallery and another one as nested gallery inside the main one.
In order to do this you will need to follow these steps:
- Prepare your data
Make sure that the two entities that you are trying to display have a relationship with each other. In the example that i will be displaying i am using two entities called Projects and Tasks with the lookup field named Project set in the Tasks entity
- Add a gallery
Drag and drop a gallery in your canvas. This will be your main gallery where you will display your main entity , in my case Projects.
- Set up the main gallery
In the properties pane of your main gallery, ensure that you select “Flexible height” under Layout
- Design the gallery template
Design the template for your gallery. you might want to input some field related to your main entity records in my case I am displaying the project name. Set the height of the gallery to the height of its own nested gallery height after adding it.
- Add the nested gallery
Inside your main gallery add another gallery control. This will be your nested gallery where you will display tasks related to each project
- Design the nested gallery template
Design the template for your nested gallery. This could include task name due date etc. I have only included the task name in my example.
Adjust the template size of your galleries accordingly , considering the number of rows in the nested gallery multiplied by its template size. Also don’t forget to consider the header for the main gallery template.
Your end result should look like this but due to galleries still using sample data
- Logical Setup – First way:
If you want to use the filter function, go to the items property of your nested gallery and use the following formula
Filter(Tasks, Project.Project = ThisItem.Project)
This will filter tasks based on the selected project in the main gallery
- Logical Setup – Second Way:
If you prefer to create a single collection, follow these steps:
1. Clear a collection
Clear(ProjectCollection);
2. Loop through all projects and collect their tasks into the collection
ForAll(Projects,
Collect(ProjectCollection, {
Name: ThisRecord.Name,
Tasks: Filter(Tasks, Project.Project = ThisRecord.Project)
}
)
3. In the items property of your nested gallery use
ProjectCollection.Tasks
That’s it! you have now set up a nested gallery to display related entities in your canvas app and it should look something like this:
