Unanswered

Show/Hide several form fields with one icon (with multiple sections)

(0) Share

Report

Posted on by Becca_Hayes

Hi all,

I've seen quite a few variations of this question, but none that are quite like what I am needing. Perhaps I didn't look hard enough though, so if there is an existing solution, please feel free to link it.

On to the question:

I have a SharePoint list form that I have customized with Power Apps to create a cleaner look for the team that is using it. They have a lot of data to put into a single item form, so I wanted to break it down into sections of related information that can be opened and closed with a custom dropdown when they need to fill them out.

I want each section of fields to start out being collapsed when they first open the form. Ideally, I want to use the "down" arrow icon for when they want to expand the fields, and then have it replaced with the "up" arrow icon once opened so they can click that to collapse it again.

I had created this form App a long time ago and managed to somewhat get what I'm wanting working but using a toggle instead of the arrows. Problem is that for some reason, the sections all started out as expanded, and you had to click the toggle twice to collapse them, but it would then work normally after that with a single toggle click. The other problem now is the person I am building this for doesn't like the toggle look and would rather have the arrows.

All that to say that it has been a long time since I last attempted this, and I'd rather start over from scratch with new guidance since my last solution clearly wasn't working. I am very much a "search across the web for the answer" type person, and being able to find the same resource I used last time has proven unfruitful, so I'd like to just start over.

Sorry for the lengthy explanation. Hopefully this all makes sense, but I'd be happy to elaborate on anything if necessary.

Categories:

Building Power Apps

I have the same question (0)

All responses (5)

Answers (1)

Verified answer

DJ_Jamba 2,837 Super User 2025 Season 2 on at

Like (1)

Report
Hi @Becca_Hayes

Use a collection.
When you first load the app, the collection should be something like:
ClearCollect( col_SectionStates, { section: "a", sectionopen: false }, { section: "b", sectionopen: false }, { section: "c", sectionopen: false }, { section: "d", sectionopen: false } )

Make sure each section has an icon. Here's what goes in the Icon property in section a:
If( LookUp( col_SectionStates, section = "a", sectionopen ), Icon.ChevronUp, Icon.ChevronDown )

Repeat for each icon in each section and change the section name (section = "b", section = "c" etc...)

In the OnSelect property for the first icon in section a:
With( { fvar_currentstate: LookUp( col_SectionStates, section = "a" ) }, Patch( col_SectionStates, fvar_currentstate, { sectionopen: !fvar_currentstate.sectionopen } ) )

Repeat for each icon in each section and change the section name (section = "b", section = "c" etc...)

You could go one step further and add a tooltip. Select all of the icons, select the Tooltip property and add:
If(Self.Icon = Icon.ChevronDown, "Open this section...","Close this section...")

That will drive the icons.
For the sections you just need to perform a lookup in the collection against the associated section, to see if it should be expanded or not

Was this reply helpful? Yes No
Becca_Hayes on at

Like (0)

Report

Thank you for the quick response. Already, it's looking a lot better than what I had before.

There still seems to be an issue, however. I applied all the formulas you provided to the designated spots, but the sections are not opening and closing. Also, I assume I need to associate the individual fields under each section with the section name in the Visible property, yes? Or is there something else that needs to be done here instead?

I am still learning so I apologize if any of this is considered basic knowledge.

Was this reply helpful? Yes No
DJ_Jamba 2,837 Super User 2025 Season 2 on at

Like (1)

Report
@Becca_Hayes
No worries, we'll get there 🤞🏼

It's a bit cumbersome, but you have to apply the following in the Visible property of each card in the form.
So for example, to apply this to one card in section a (in the Visible property):

LookUp( col_SectionStates, section = "a", sectionopen )

Was this reply helpful? Yes No
Becca_Hayes on at

Like (1)

Report

@DJ_Jamba

Cumbersome is okay if it gets the desired result, which it did! Besides, a little copy & paste action never hurt anybody. 😆 I definitely did not have that formula right and that was my issue.

Thank you so much for your help! I believe my customer will be very happy with this improved version!

Was this reply helpful? Yes No
DJ_Jamba 2,837 Super User 2025 Season 2 on at

Like (0)

Report

We got there 😅 Glad it's sorted!
d(-_-)b

Was this reply helpful? Yes No