PowerApps Nested Gallery with People Picker, Status & Data

Introduction

It is an interesting concept to create nested galleries in PowerApps. Nested galleries are replacements of groups by the feature of SharePoint. Two levels of galleries will be built inside one another which could also be expanded and shrinked.

Scenario

We will look at how to create nested galleries that could shrink, expand, and populate data on the same screen. We could navigate from data to open details on the form.

Objective

Power Apps may transform table data from a collection or data source into an Excel-openable CSV file.

In this article, I'll show you how to create nested galleries, populate the date, open the data details in the form, highlight the gallery items, and expand/shrink the gallery item.

To proceed with this solution, we would need 4 controls which are given below.

1. Blank Flexible Height Gallery: Instructor.
2. Vertical Gallery: Status.
3. Gallery to represent Data.
4. Icons and Labels.

Step 1. A SharePoint list is created.

Make a new SharePoint list to hold the training information.

Step 2. Connect to Data Source.

Include the datasource TrainingList, which is a SharePoint list.

Step 3. Design the screen and Build the First Gallery.

Add a label and its title, as shown in the screenshot below.

Add a Blank flexible height gallery.

When we add the gallery, the Gallery prompts us to add its data source.

After selecting the data source the gallery will be blank as shown below. It will not add anything because it is a blank gallery. To show data we would need to add labels. To add labels first select the gallery. Once we add labels, title or any other column will be linked by default. The screen will look like as shown below. In below screen two of the values on the gallery label are shown which are coming from the list Title column value.

Step 4. Make the first Group by People picker, which is the Instructor column.

Since My first level of group should be from the people picker column, I shall be making the reference to that column which is in this case is Instructor column.

Step 5. Add Down Arrow.

Step 6. Add a second gallery.

The second gallery will be a vertical gallery which will be inside the first gallery. The second gallery will be inside the first gallery which will make it a nested gallery. After adding the second gallery align the arrow and pull the second gallery width according to the need so that as required we can see both gallery scroll bars. In the screenshot below we can see the light dotted line of the first gallery and the second gallery is selected.

Similarly like the first gallery data source needs to be added in the second Gallery. Since it is a vertical gallery, the label will be added automatically and we would need to populate the desired column value. Here in my case, I will be populating status values which would look like below.

Step 7. Design the second gallery.

My first point here is to remove the labels which are not required.

Step 8. Write a formula to populate the unique status for each instructor that exists in the list.

In the above screenshot, we can see the values are getting repeated for both the items. We would need to write the formula for it. After writing the formula we should get the right status values corresponding to each instructor.

Step 9. Add the third Gallery, which is a vertical gallery.

Add the third gallery which will hold the actual results of the selected item from the left-hand side gallery. In the third gallery choose the columns which need to be designed on the screen to show. This selection can be made through the properties pane in right-hand side.

Write the formula on the right arrow and store it in the collection to show the results.

Refer to the collection in the third gallery to show the results.

Step 10. Expand left-hand side galleries.

Add one more icon on the first gallery i.e. up arrow. The up arrow will collapse the gallery item, and the down arrow will expand the gallery item. On the up and down arrow, we shall be writing hide and show variable values. I have overlapped the up and down arrow so that it appears to be in the same place. Also, only one icon will appear at a time.

Set the local variable on the down arrow through updateContext to set as true and false which will be used to make it visible or not.

Step 11. On the visible property of the down arrow (expand) of the first gallery.

We need to think and pass the value. Here I am clear that I would like to shrink or expand depending upon the instructor's selected value and the instructor’s current value. We are negating the variable value. If it is true then it becomes false, if it is false then the variable value becomes true.

Step 12. Collapse left-hand side galleries.

We are setting the variable to false on the up arrow selection. In the down arrow, we had made the variable true.

Step 13. On the visible property of the up arrow (collapse) of the first gallery.

Step 14. Height property of the second gallery.

This is the important portion that hides or shows the status gallery.

Step 15. To highlight the selected Instructor and make the Font size semi-bold.

Step 16. To highlight the selected status and make the Font size semi-bold.

Conclusion

In this article, we saw to create of nested galleries using a people picker and a status column which is the choice column. On selection of people picker and status get populated and on selection of status all the corresponding data gets populated.