Making Accordion Style Gallery using Flexible Height Galleries

| Mustafa Usmani

Since Microsoft introduced Flexible Height Gallery in Canvas App, it has opened several ways to use and interact with galleries in Canvas Apps. Today we are going to see how I was able to make an accordion style form using nested flexible galleries.

This is the result of what we will be doing:

Making Accordion Style Gallery using Flexible Height Galleries

So before getting started, the way I'll be using this gallery is that I have two tables; Sections and Questions table and they both have One-to-Many relation respectively. So, once you click on a Section (Highlighted in blue text labels) its respective questions will pop up in the nested gallery. With that said, let’s get started:

  • Open a blank Canvas App and insert a Blank Flexible Height Gallery on your screen.
Making Accordion Style Gallery using Flexible Height Galleries
  • After that, insert a Text Label in the gallery and place it according to your needs and set it Auto Height to True.
Making Accordion Style Gallery using Flexible Height Galleries
  • Now we will add the Section table on the Main Gallery so we can start to see some section names.
  • Now add another gallery just below the text label to accommodate the Questions table and add a Text label for the questions.
  • Now at this point, your app structure and screen should look like this.

App Structure

Making Accordion Style Gallery using Flexible Height Galleries

Screen

Making Accordion Style Gallery using Flexible Height Galleries
  • Now, if your galleries look a bit squished in the designer then don’t worry cause to work with flexible galleries, you’ll have to test them in the designer’s play mode. Also, let’s make the section names a bit prominent so we can work on the accordion style.
Making Accordion Style Gallery using Flexible Height Galleries
  • That looks a bit better. Now select section name’s Text Label and on its OnSelect() write the following code:
Making Accordion Style Gallery using Flexible Height Galleries
  • One thing to note in the above formula:
    • ka_title is the column name in my table for the Section name.
  • Now on the nested gallery’s Height put the following formula:
Making Accordion Style Gallery using Flexible Height Galleries
  • Now let’s go step by step to see what this formula will be doing:
    • First it will check which Text Label or in our case, which Section is clicked or selected.
    • If any section is selected, its respective nested gallery or Question gallery’s height will be according to the number of questions there are in that section. Or in technical terms how many questions are referenced to that section in the Question table.
    • Then after getting a count of those questions, we will just multiply with some additional numbers so we can get some minimum visible height for the nested gallery.
  • After doing all these steps, your gallery should look like this.
Making Accordion Style Gallery using Flexible Height Galleries

Join us next time, as we continue our journey of learning canvas apps.Click here to learn more about Imperium's Power Apps Services. We hope this information was useful, and we look forward to sharing more insights into the Power Platform world.


M
Chief Architect, Founder, and CEO - a Microsoft recognized Power Platform solution architect.

About The Blog

Stay updated with what is happening in the Microsoft Business Applications world and initiatives Imperium is taking to ease digital transformation for customers.


More About Us

We provide guidance and strategic oversight to C-Suite and IT Directors for on-going implementations. Feel free to give us a call.

1 331 250 27 17
Send A Message

Ready to Start?

Get a personalized consultation for your project.

Book a Meeting