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 lets 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 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 12: 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 13: 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 14: 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 15: 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.
Source: Paper.li
The Tech Platform
コメント