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.

ClearCollect(
AccordionData,
Table(
{
title: "What is Lorem Ipsum?",
content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
isActive: false
},
{
title: "Where does it come from?",
content: "Contrary to popular belief, Lorem Ipsum is not simply random text.",
isActive: false
},
{
title: "Where can I get some?",
content: "There are many variations of passages of Lorem Ipsum available.",
isActive: false
}
)
)

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

If(ThisItem.isActive,Icon.HorizontalLine,Icon.Add)

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.

5 Comments

Join the conversation! Your thoughts help the community grow.

Keshava3y ago
Can we use any other datasource like sharepoint or dataverse instead of collection to show the data? reason is we have delegation issue with sharepoint datasource.
- Parth Patel3y ago
  Yes we can use SharePoint list or Data Verse table instead with similar data structure
luiz lima4y ago
Boa noite. ? possivel adicionar um form seguindo o mesmo conceito aplicado? Obrigado por compartilhar!!!
- Parth Patel3y ago
  You mean you want to add editform inside gallery. If I am right, you can not add edit form inside gallery
Ashwini Bhandari5y ago
Thanks for sharing!