PowerApps nested gallery control example

In this PowerApps tutorial, let us discuss on PowerApps nested gallery control. We will see how to create a nested gallery control in PowerApps.

Let us discuss, Nested Gallery Control In PowerApps. Here, I am trying to build a PowerApps Bank app where I have different types of Bank account numbers with all details, and user will see each account details when clicking on the account type.

Here I am using two gallery control where one gallery control I am using to show the Account type and another gallery control I am using to show the account number. The next user clicks on the Account number, it will redirect to the view page where a user can see the account details.

One small condition I have applied here to show all accounts based on logged-in user. so let’s come to the implementation.

Step 1: Log in to your SharePoint online site -> Create a SharePoint list called Account collection with the below columns.

  • Saving Account Number (Title) -This is the Unique account number for a user.
  • Account Type
  • Type of Account Number
powerapps nested gallery

Step 2: Next login to your PowerApps -> Create a Canvas apps and drag and drop gallery control with Flexible height.

powerapps nested gallery auto height

Step 3: Now select the control and update the below formula in Item property of the gallery control.

GroupBy('Account Collection',"Account Type","Account Types")
powerapps nested gallery filter

Step 4: Once the formula gets updated, click on the edit icon in the gallery control and drag and drop a label where we can show the account types and drag and drop a expand icon.

powerapps nested gallery this item

Step 5: In Expand on select property you can use the below formula so that you can expand the items.

If(CountRows(Gallery1.AllItems)=0,Select(Parent));
powerapps nested gallery selected

Step 6: Next you can edit the gallery control and drag and drop one more gallery control inside the parent gallery where we will show the user account number. And set the height of child gallery control.

(CountRows(Gallery1.AllItems)*50)+100
powerapps nested gallery group by

Step 7: Next set the Item property of child gallery control. Here vAccountNo is my global variable where I am storing logged in user Saving account number. Now this formula will return you the list of account number which exists under selected account type where saving account number is equal to a logged-in user account number.

Filter('Account Collection', ThisItem.AccountType in AccountType,vAccountNo in Title)
powerapps nested gallery limit

Step 8 : Now you can see, when i click on PPF Account, I am able to see PPF Account number of logged in user.

powerapps nested gallery parent

Step 9: Next you can hide the expand icon when the user clicks on it and show a different icon once it expanded. So click on the icon and update Visible property.

!ThisItem.IsSeleted
create powerapps nested gallery

Step 10: Same we have to do for another icon, once the item get expanded.

ThisItem.IsSeleted
how to create powerapps nested gallery

Step 11: In the above icon, we have to update the OnSelect property as below.

Select(Parent)
powerapps nested gallery control

Step 11: Now you can drag and drop a next icons under child gallery control so that when the user clicks on Account number, it will redirect to view the account details page. So update the OnSelect property of child icon.

Select (Parent);
Navigate('View Deposit', Fade, {selectedId: Gallery1.Selected, 'Type of Account Nymber'})
powerapps nested gallery control example

Step 12: Now I have created another list where the Account Number in this list is equal to the Type of Account number in the previous list.

powerapps nested gallery control

Step 13: Now I have created a new form and drag and drop a DataTable in the form and I have updated the DataSource to my newly created list where I have all details of the account.

powerapps nested gallery filter

Step 14: Next set the item property of the DataTable in the view form as below.

First(Filter('PPF Account', Title=selectedId))
powerapps nested gallery control

Now our implementation done. you can save the app and run to see the output of this app.

create powerapps nested gallery

You may like the following PowerApps tutorials:

This is how we can use PowerApps nested gallery control in a canvas app.

  • >