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
Post a Comment