Post
Ask Question

Dynamic Accordion In PowerApps

Introduction

 
In this article, we will learn how to create dynamic accordions in PowerApps. I am assuming that you have a basic knowledge of PowerApps, so I am going to skip the steps of how to create a new power app and the basics of it. Let's start.
 
Note
I am sharing full PowerApps in the attachment so you can import into your tenant in case of any doubt. Because it is not possible to explain each and every step, I am covering main topics only.
 
Output
 
Step 1
 
Create new PowerApps. I have created and named it AccordionInPowerApps.
 
Step 2
 
Add Flexible height gallery from Insert Pane. Please see below screenshot.
 
 
That will insert gallery with default social feed layout, so what you need to do to remove default controls from it, select Layout as Blank as in next screenshot. You will find this option at right side.
 
 
Step 3
 
As we know that gallery require items that will be populated in to it so we are creating one collection for that which we will populate at the time of pagevisible, so go to Screen1-> On visible and add below code into it.
  1. ClearCollect(  
  2.     AccordionData,  
  3.     Table(  
  4.         {  
  5.             title: "What is Lorem Ipsum?",  
  6.             content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",  
  7.             isActive: false  
  8.         },  
  9.         {  
  10.             title: "Where does it come from?",  
  11.             content: "Contrary to popular belief, Lorem Ipsum is not simply random text.",  
  12.             isActive: false  
  13.         },  
  14.         {  
  15.             title: "Where can I get some?",  
  16.             content: "There are many variations of passages of Lorem Ipsum available.",  
  17.             isActive: false  
  18.         }  
  19.     )  
  20. )  
 
Step 4
 
Populate the gallery with the collection (AccordionData) which we have just set on page visible event.
 
 
Step 5
 
Now add the following controls in the gallery by clicking “Add an item from the insert pane” to design layout for accordion.
  • 2 labels. For title and content
  • 1 icon. For show “+” expand and “-” collapse
Important properties to set as below
 
Icon1
  1. If(ThisItem.isActive,Icon.HorizontalLine,Icon.Add)   
  
  1. Select(Parent);Patch(AccordionData,ThisItem,{isActive:!ThisItem.isActive})  
 
Label1
 
 
 
Label2
 
 
 
And design something like below screenshot.
 
 
Step 6
 
You are all done. Run the app by clicking the Play button and check the output.


Similar Articles