Skip to main content

Notifications

Power Apps - Building Power Apps
Answered

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

Posted on by

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:
  • DJ_Jamba Profile Picture
    DJ_Jamba 2,336 on at
    Re: Show/Hide several form fields with one icon (with multiple sections)

    We got there 😅 Glad it's sorted!

    d(-_-)b

  • Becca_Hayes Profile Picture
    Becca_Hayes on at
    Re: Show/Hide several form fields with one icon (with multiple sections)

    @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!

  • DJ_Jamba Profile Picture
    DJ_Jamba 2,336 on at
    Re: Show/Hide several form fields with one icon (with multiple sections)

    @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
    )



     

  • Becca_Hayes Profile Picture
    Becca_Hayes on at
    Re: Show/Hide several form fields with one icon (with multiple sections)

    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.

  • Verified answer
    DJ_Jamba Profile Picture
    DJ_Jamba 2,336 on at
    Re: Show/Hide several form fields with one icon (with multiple sections)

    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

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

November 2024 Newsletter…

November 2024 Community Newsletter…

Community Update Oct 28…

Power Platform Community Update…

Tuesday Tip #7 Community Profile Tips…

Welcome to a brand new series, Tuesday Tips…

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 143,297

#2
RandyHayes Profile Picture

RandyHayes 76,308

#3
Pstork1 Profile Picture

Pstork1 63,890

Leaderboard