{"id":1801,"date":"2021-11-28T13:27:41","date_gmt":"2021-11-28T13:27:41","guid":{"rendered":"https:\/\/365stack.in\/?p=1801"},"modified":"2021-11-29T12:07:05","modified_gmt":"2021-11-29T12:07:05","slug":"how-to-create-nested-gallery-in-power-apps","status":"publish","type":"post","link":"https:\/\/365stack.in\/index.php\/2021\/11\/28\/how-to-create-nested-gallery-in-power-apps\/","title":{"rendered":"How to create Nested Gallery in Power Apps"},"content":{"rendered":"\n

Let’s try to build a PowerApps’s Nested gallery view using GroupBy <\/em>function to achieve the Grouping functionality of SharePoint List<\/p>\n\n\n\n

We have used below sample data in Collection as a data source for the galleries used in this Nested Gallery Application and we can also use any data source to feed the data to gallery. <\/p>\n\n\n\n

ClearCollect(\n    collCountry,\n    {\n        country: \"India\",\n        city: \"Chennai\",\n        address: \"Address 1\",\n        pincode: \"89889\"\n    },\n    {\n        country: \"USA\",\n        city: \"NY\",\n        address: \"Address 1\",\n        pincode: \"012\"\n    }\n)<\/code><\/pre>\n\n\n\n
Create the above collection with additional data in the “OnStart’ property of the app and Use ‘GroupBy’ function to Group the collection by Country colum.<\/p>\n\n\n\n
\/\/Syntax\n\nGroupBy( source, columnName, GroupColumnName)<\/code><\/pre>\n\n\n\n
Source is where the function will be applied,  columnName is the column to group the records and GroupColumnName is the name of the column where grouped records kept.   Grouped Records would not carry the column used to group the data.<\/p>\n\n\n\n
Store the result of the GroupBy function in another collection ‘ColGroupedCountry’.<\/p>\n\n\n\n
\/\/ Actual expression\nClearCollect(\n    colGroupedCountry,\n    GroupBy(\n        collCountry,\n        \"country\",\n        \"DATA\"\n    )\n);<\/code><\/pre>\n\n\n\n
The GroupBy function returns a table with records grouped together based on the values in one or more columns. Records in the same group are placed into a single record, with a column added that holds a nested table of the remaining columns.<\/p>\n\n\n\n
\"\"
Result of the GroupBy<\/figcaption><\/figure><\/div>\n\n\n\n
Add a new Gallery ‘ParentGallery’ to the screen and set ‘colGroupedcountry’ collection as Items property of the gallery.  Add a new label to this ParentGallery and set the Text property of the label with below expression<\/p>\n\n\n
Items = ThisItem.Country<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
As a next step, add a new gallery ‘ChildGallery’ inside the “ParentGallery’ and set ‘ThisItem.DATA’ as Items property of the Child gallery.  Add labels to the child gallery and map them with ‘Address’, ‘City’ and ‘Pincode’.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Set below expression as Text property to show the number of records under each group.<\/p>\n\n\n
Text = ThisItem.country & “(” & CountRows(ChildGallery.AllItems) & “)”<\/p>\n\n\n\n
Use following expression to set the Height property of Child gallery dynamically based on number of grouped records.<\/p>\n\n\n
Height = If(ThisItem.IsSelected, If(CountRows(ChildGallery.AllItems) > 0, CountRows(ChildGallery.AllItems)*55, 0), 0)<\/p>\n\n\n\n
Add Right Icon and Down Icon to the Parent gallery and set the below expression to visible property of these icons.<\/p>\n\n\n\n
\/\/Down Icon\nVisible = ThisItem.IsSelected\n\n\/\/Right Icon\nVisible = !ThisItem.IsSelected<\/code><\/pre>\n\n\n\n
After implementation of above steps, we able to expand and collapse on each country to show & hide the child rows.<\/p>\n\n\n\n
Click here <\/a>to know more about GroupBy function in PowerApps.<\/p>\n\n\n\n
Please post your queries in the comment section. Happy Building \ud83d\ude42 <\/p>\n","protected":false},"excerpt":{"rendered":"
Let’s try to build a PowerApps’s Nested gallery view using GroupBy function to achieve the Grouping functionality of SharePoint List We have used below sample data in Collection as a data source for the galleries used in this Nested Gallery Application and we can also use any data source to feed the data to gallery. Create the above collection with […]<\/p>\n","protected":false},"author":5,"featured_media":1818,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[6,32,5],"tags":[12,70,71,33,9,30],"class_list":["post-1801","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-canvas-apps","category-power-platform","category-powerapps","tag-canvas-app","tag-group-by-in-power-apps","tag-nested-gallery","tag-power-platform","tag-powerapps","tag-sharepoint"],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/11\/Screenshot-2021-11-28-183835-e1638106039601.png?fit=872%2C424&ssl=1?v=1638104932","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1456,"url":"https:\/\/365stack.in\/index.php\/2021\/09\/17\/powerapps-print-form-to-pdf\/","url_meta":{"origin":1801,"position":0},"title":"How to Print Scrollable Screen to PDF in PowerApps","author":"Hemanthkumar Rajan","date":"September 17, 2021","format":false,"excerpt":"One of the common requirements in any application is to print the data either to save the form as PDF or print the form. PowerApps provides Print() function to print the screen in a printable format, but the limitation is the screen height cannot be greater than 2164px. If a\u2026","rel":"","context":"In "Canvas Apps"","block_context":{"text":"Canvas Apps","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/powerapps\/canvas-apps\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2020\/10\/background1.jpg?fit=1200%2C675&ssl=1%3Fv%3D1623349406&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2278,"url":"https:\/\/365stack.in\/index.php\/2021\/12\/28\/how-to-send-json-data-to-canvas-apps\/","url_meta":{"origin":1801,"position":1},"title":"How to send JSON data to Canvas Apps","author":"Premkumar Perumal","date":"December 28, 2021","format":false,"excerpt":"We're going to explain how to send a JSON response from Power Automate to Canvas app and how to convert the response into Collection format in Canvas app. To illustrate, we have explained a small app as example. As First step, create a new Instant flow that can be triggered\u2026","rel":"","context":"In "Canvas Apps"","block_context":{"text":"Canvas Apps","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/powerapps\/canvas-apps\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-28-103100.png?fit=836%2C391&ssl=1%3Fv%3D1640667678&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1633,"url":"https:\/\/365stack.in\/index.php\/2021\/12\/29\/how-to-add-check-box-grouping-in-canvas-app\/","url_meta":{"origin":1801,"position":2},"title":"How to add check box grouping in Canvas App","author":"Hemanthkumar Rajan","date":"December 29, 2021","format":false,"excerpt":"Those who worked in SharePoint will be familiar with checkbox grouping because the \"choice column\" in SharePoint allows the Checkboxes option. It will be similar in SharePoint aligned BPM tools like Nintex and K2. Most of the BPM tools like Pega and even in Power Platform do not provide this\u2026","rel":"","context":"In "Canvas Apps"","block_context":{"text":"Canvas Apps","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/powerapps\/canvas-apps\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/11\/Screenshot-190.png?fit=769%2C471&ssl=1%3Fv%3D1638008855&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1527,"url":"https:\/\/365stack.in\/index.php\/2021\/11\/21\/how-to-create-custom-attachment-control-in-powerapps\/","url_meta":{"origin":1801,"position":3},"title":"How to create custom attachment control in PowerApps","author":"Hemanthkumar Rajan","date":"November 21, 2021","format":false,"excerpt":"Attaching a file along with the form is a common requirement, By default PowerApps does not provide any attachment control. But if the SharePoint list is added as a datasource automatically the attachment control will be generated along with the controls. But if multiple attachment control has to be shown\u2026","rel":"","context":"In "Canvas Apps"","block_context":{"text":"Canvas Apps","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/powerapps\/canvas-apps\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/11\/Screenshot-143.png?fit=1200%2C467&ssl=1%3Fv%3D1637483532&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1631,"url":"https:\/\/365stack.in\/index.php\/2021\/11\/27\/add-repeating-section-in-powerapps\/","url_meta":{"origin":1801,"position":4},"title":"Add repeating section in PowerApps","author":"Hemanthkumar Rajan","date":"November 27, 2021","format":false,"excerpt":"As we already discussed, Gallery is a multipurpose control in the canvas app. One of the use-cases of gallery is the repeating section, this scenario will be applicable between Parent-Child relationships in Lists or tables and if the form is converted from Nintex, InfoPath (OOTB repeating section control available there)\u2026","rel":"","context":"In "Canvas Apps"","block_context":{"text":"Canvas Apps","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/powerapps\/canvas-apps\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/11\/Screenshot-197.png?fit=1045%2C267&ssl=1%3Fv%3D1637926841&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1221,"url":"https:\/\/365stack.in\/index.php\/2021\/07\/06\/a-complete-guide-for-migration-to-power-platform-pre-development-analysis-part-2\/","url_meta":{"origin":1801,"position":5},"title":"A Complete Guide for Migration to Power Platform: Pre-Development Analysis – Part 2","author":"Hemanthkumar Rajan","date":"July 6, 2021","format":false,"excerpt":"When it comes to migrating from existing technologies, a thorough study has to be done on the legacy tool starting from how the controls are used, what are the actions frequently used, things which are available in source and not available in the destination, etc. Solutions for these scenarios must\u2026","rel":"","context":"In "Power Platform"","block_context":{"text":"Power Platform","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/"},"img":{"alt_text":"Pre Development Analysis","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/07\/Requirement-Anlaysis-scaled.jpeg?fit=1200%2C829&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/posts\/1801","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/comments?post=1801"}],"version-history":[{"count":19,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/posts\/1801\/revisions"}],"predecessor-version":[{"id":1823,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/posts\/1801\/revisions\/1823"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/media\/1818"}],"wp:attachment":[{"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/media?parent=1801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/categories?post=1801"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/tags?post=1801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}