Expand and Collapse feature in PowerApps



Write the following on APP Start Code:

 Clear(colTreeElement);  

 ForAll(
   TreeViewElement,
   Collect(
     colTreeElement,
     {
       ElmntName: Switch(
         'Element Name',
         "India",
         Concatenate(
           "India",
           "                                     ",
           "Score:4"
         ),
         "United States",
         Concatenate(
           "United States",
           "                             ",
           "Score:8"
         ),
         'Element Name'
       ),
       ElmntId: 'Element Id',
       Lv: Level,
       ParentId: 'Parent ID',
       //Add column 'Show' to control Expand/ Collapse
       Show: If(
         Value(Level) = 1,
         true,//only the element with spElmntLv = 1 is displayed in the initial state
         false
       ),
       TreePath: ""//Treepath is defined as
     }
   )
 );
 // Define TreePath
 UpdateIf (
   colTreeElement,
   Value(Lv) = 1,
   {TreePath: ElmntId},
   Value(Lv) = 2,
   {
     TreePath: Concatenate(
       ParentId,
       ">",
       ElmntId
     )
   },
   Value(Lv) = 3,
   {
     TreePath: 
   // Lv3 TreePath uses spParentID of the record (own parent record) where own ParendId and spElmntID of original data source match
 Concatenate (
       LookUp (
         TreeViewElement,
         'Element Id' = ParentId,
         'Parent ID'
       ),
       ">",
       ParentId,
       ">",
       ElmntId
     )
   },
   Value(Lv) = 4,
   {
     TreePath: 
   // TreePath of Lv4 uses spParentID of the record (the parent record of own parent) where spParentID obtained by Lv3 procedure and spElmntID of the original data source match
 Concatenate (
       LookUp (
         TreeViewElement,
         'Element Id' = LookUp (
           TreeViewElement,
           'Element Id' = ParentId,
           'Parent ID'
         ),
         'Parent ID'
       ),
       ">",
       LookUp (
         TreeViewElement,
         'Element Id' = ParentId,
         'Parent ID'
       ),
       ">",
       ParentId,
       ">",
       ElmntId
     )
   }
 ) 


Step 1: Add a gallery and add below on 'items';

SortByColumns(Filter(colTreeElement,Show=true),"TreePath",Ascending)

Step 2: Add one image (which will be icon image for collapse/ expand/ bullet point for rows) inside gallery and write below codes on its 'image'. (Note; Collapse, Expand and Radio Button' in the below code is the name of media for collapse, expand icon and radio button icon respectively)

 If(  

   CountRows(
     Filter(
       colTreeElement,
       ParentId = ThisItem.ElmntId
     )
   ) = 0,
   'Radio Button',
   LookUp(
     colTreeElement,
     ParentId = ThisItem.ElmntId
   ).Show = true,
   Collapse,
   Expand
 )

Write below code on 'OnSelect' of image:

 If(  

   //Determine if records with own ID as Parent ID are not 0 and they are displayed
   CountRows(
     Filter(
       colTreeElement,
       ParentId = ThisItem.ElmntId
     )
   ) <> 0 && LookUp(
     colTreeElement,
     ParentId = ThisItem.ElmntId
   ).Show = true,
   //If Displayed, hide all columns that have their ID in the TreePath and redisplay themselves
   UpdateIf(
     colTreeElement,
     CountRows(
       Filter(
         Split(
           TreePath,
           ">"
         ),
         ParentId = ThisItem.ElmntId
       )
     ) <> 0,
     {Show: false}
   );
   UpdateIf(
     colTreeElement,
     ElmntId = ThisItem.ElmntId,
     {Show: true}
   ),
   //If Not Displayed, display the element that has you as the parent (the element immediately below)
   UpdateIf(
     colTreeElement,
     ParentId = ThisItem.ElmntId,
     {Show: !Show}
   )
 ) 


Step 3: Add 1 label inside gallery to display row values and write "ThisItem.ElmntName" on it's text.

Below is the raw data and how it was all configured. FYI colTreeElement is the table name, it'll be different in case of yours when you will add data source of gallery.

Element Name Element Id Parent ID Parent Name Level
India 1 1
Bihar 2 1 India 2
Gujarat 3 1 India 2
Haryana 4 1 India 2
Karnataka 5 1 India 2
Patna 6 2 Bihar 3
Gaya 7 2 Bihar 3
Muzaffarpur 8 2 Bihar 3
Bhagalpur 9 2 Bihar 3
Purnea 10 2 Bihar 3
Ahmedabad 11 3 Gujarat 3
Surat 12 3 Gujarat 3
Vadodara 13 3 Gujarat 3
Gandinagar 14 3 Gujarat 3
Bharuch 15 3 Gujarat 3
Gurgaon 11 4 Haryana 3
Faridabad 12 4 Haryana 3
Ambala 13 4 Haryana 3
Hisar 14 4 Haryana 3
Rohtak 15 4 Haryana 3
Bangalore 11 5 Karnataka 3
Mysore 12 5 Karnataka 3
Belgaum 13 5 Karnataka 3
Bellary 14 5 Karnataka 3
Mangalore 15 5 Karnataka 3
United States 16 1
California 17 16 United States 2
Florida 18 16 United States 2
Texas 19 16 United States 2
Hawaii 20 16 United States 2
Los Angeles 21 17 California 3
San Diego 22 17 California 3
San Francisco 23 17 California 3
Oakland 24 17 California 3
Riverside 25 17 California 3
Miami 26 18 Florida 3
Orlando 27 18 Florida 3
Pensacola 28 18 Florida 3
Jacksonville 29 18 Florida 3
Tampa 30 18 Florida 3
Houston 31 19 Texas 3
Dallas 32 19 Texas 3
San Antonio 33 19 Texas 3
El Paso 34 19 Texas 3
Brownsville 35 19 Texas 3
Honolulu 36 20 Hawaii 3
Hilo 37 20 Hawaii 3
Kaholui 38 20 Hawaii 3
Lihue 39 20 Hawaii 3
Lanai City 40 20 Hawaii 3

Comments

Popular posts from this blog

StateCode and StatusCode Values for mostly used entities in Microsoft Dynamics CRM 2013

How to show enlarge image when mouse hover on image or link in Asp.Net(c#) using JavaScript

Search data in Gridview on Textbox Key press event using JQuery in Asp.Net- C#

go to top image