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.
PowerApps nested gallery control
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
Step 2: Next login to your PowerApps -> Create a Canvas apps and drag and drop gallery control with Flexible 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")
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.
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));
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
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)
Step 8 : Now you can see, when i click on PPF Account, I am able to see PPF Account number of logged in user.
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
Step 10: Same we have to do for another icon, once the item get expanded.
ThisItem.IsSeleted
Step 11: In the above icon, we have to update the OnSelect property as below.
Select(Parent)
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'})
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.
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.
Step 14: Next set the item property of the DataTable in the view form as below.
First(Filter('PPF Account', Title=selectedId))
Now our implementation done. you can save the app and run to see the output of this app.
You may like the following PowerApps tutorials:
- Power Apps Navigate Function + 16 Examples
- SharePoint PowerApps Example – Get bank branch details based on State
- PowerApps Example – Create a Bank Account Statement
- Create Login Page in PowerApps using SharePoint List
- How to create a custom calendar in PowerApps
- PowerApps Chart Control – How to Use
- How to build multilingual apps in PowerApps
- Automatically scroll Gallery control in PowerApps
- PowerApps notify function- How to use
- Share PowerApps to external users or guest users
This is how we can use PowerApps nested gallery control in a canvas app.
Rajkiran is currently working as a SharePoint Consultant in India . Rajkiran having 7+ years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).
Can you help me, how to add subgrid in canvas app. I was told to use data card, but not sure about the link and navigation.