cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
eb221
Level: Powered On

Collapsible Power App Sections with Form Elements

I have an app that includes form elements that users fill out and submit to a Sharepoint list.

However, since there are many form fields to fill in users have complained about the app requiring too much scrolling and being too long. They would like to have collapsible sections that contain related datacards. Currently, I have a form element within my screen with a list of all the related data cards where users enter responses. I need to split it into different subjects and each subject expands when an down arrow is pressed.

Capture_spo.PNG

 

I have followed this tutorial : https://powerapps.microsoft.com/en-us/blog/ux-patterns-expander-control-with-expand-collapse-animati... - which is exactly what I want - but I want each section to contain the related datacards. Is it possible to have form datacards in each of these sections? Or is there another way to accomplish this?

1 ACCEPTED SOLUTION

Accepted Solutions
egallis
Level 10

Re: Collapsible Power App Sections with Form Elements

Well, in fact here is what you need to do...

Inside your form, create a new custom datacard and call it DataCardSection1. In that datacard, create a label called lblSection1 and set its Text property to Section 1 .

Beside this label, insert two icons and overlapp them : one for the up arrow called icoArrowUpSection1 and one for the down arrow called icoArrowDnSection1 and set their following properties:

icoArrowUpSection1.OnSelect -> Set(gloSection1Open, false)
icoArrowUpSection1.Visible -> gloSection1Open
icoArrowDnSection1.OnSelect -> Set(gloSection1Option, true)
icoArrowDnSection1.Visible -> Not(gloSection1Open)

Then, on each datacard of your form you wish to "attach" to your section 1, set their following properties:

DataCardField1.Visible -> gloSection1Open
DataCardField2.Visible -> gloSection1Open
DataCardField3.Visible -> gloSection1Open
...

Now, below the last datacard of your section 1, create a new custom datacard called DataCardSection2. In that datacard, create a label called lblSection2 and set its Text property to Section 2 .

Beside this label, insert two icons and overlapp them : one for the up arrow called icoArrowUpSection2 and one for the down arrow called icoArrowDnSection2 and set their following properties:

icoArrowUpSection2.OnSelect -> Set(gloSection2Open, false)
icoArrowUpSection2.Visible -> gloSection2Open
icoArrowDnSection2.OnSelect -> Set(gloSection2Option, true)
icoArrowDnSection2.Visible -> Not(gloSection2Open)

Then, on each datacard of your form you wish to "attach" to your section 2, set their following properties:

DataCardField4.Visible -> gloSection2Open
DataCardField5.Visible -> gloSection2Open
DataCardField6.Visible -> gloSection2Open
...

Tell me if manage to make it work... 🙂

View solution in original post

5 REPLIES 5
egallis
Level 10

Re: Collapsible Power App Sections with Form Elements

Hi @eb221,

Yes, I beleive it is possible to do so within a form control, which is a bit special since you can only have datacards in a form.

So what I suggest you try is to create custom datacards where you put only 2 types of controls: a label for the section and the 2 arrows (up and down) for opening and closing a section.

Then, clicking on the arrows would set a variable to say that the section is opened or closed. And each datacard below that section would have a Visible property set to true if the section is opened.

To illustrate what I'm saying, you form should look like this:

 

SharePointForm1
    DataCardSection1
        lblSection1
        icoArrowUp (OnSelect=Set(gloSection1Open=false) / Visible=gloSection1Open=true)
        icoArrowDn (OnSelect=Set(gloSection1Open=true) / Visible=gloSection1Open=false)
DataCardField1 (Visible=gloSection1Open=true)
...
DataCardField2 (Visible=gloSection1Open=true)
...
DataCardField3 (Visible=gloSection1Open=true)
...
DataCardSection2
lblSection2
icoArrowUp (OnSelect=Set(gloSection2Open=false) / Visible=gloSection2Open=true)
icoArrowDn (OnSelect=Set(gloSection2Open=true) / Visible=gloSection2Open=false)
DataCardField4 (Visible=gloSection2Open=true)
...
DataCardField5 (Visible=gloSection2Open=true)
...

See what I mean?

Do you need more help on this ?

Emmanuel

eb221
Level: Powered On

Re: Collapsible Power App Sections with Form Elements

Hi Emmanuel,

What would I put for 'gloSection1Open' in the formula. Would I use 'DataCardSection1'?

 

 Thank you!

egallis
Level 10

Re: Collapsible Power App Sections with Form Elements

Well, in fact here is what you need to do...

Inside your form, create a new custom datacard and call it DataCardSection1. In that datacard, create a label called lblSection1 and set its Text property to Section 1 .

Beside this label, insert two icons and overlapp them : one for the up arrow called icoArrowUpSection1 and one for the down arrow called icoArrowDnSection1 and set their following properties:

icoArrowUpSection1.OnSelect -> Set(gloSection1Open, false)
icoArrowUpSection1.Visible -> gloSection1Open
icoArrowDnSection1.OnSelect -> Set(gloSection1Option, true)
icoArrowDnSection1.Visible -> Not(gloSection1Open)

Then, on each datacard of your form you wish to "attach" to your section 1, set their following properties:

DataCardField1.Visible -> gloSection1Open
DataCardField2.Visible -> gloSection1Open
DataCardField3.Visible -> gloSection1Open
...

Now, below the last datacard of your section 1, create a new custom datacard called DataCardSection2. In that datacard, create a label called lblSection2 and set its Text property to Section 2 .

Beside this label, insert two icons and overlapp them : one for the up arrow called icoArrowUpSection2 and one for the down arrow called icoArrowDnSection2 and set their following properties:

icoArrowUpSection2.OnSelect -> Set(gloSection2Open, false)
icoArrowUpSection2.Visible -> gloSection2Open
icoArrowDnSection2.OnSelect -> Set(gloSection2Option, true)
icoArrowDnSection2.Visible -> Not(gloSection2Open)

Then, on each datacard of your form you wish to "attach" to your section 2, set their following properties:

DataCardField4.Visible -> gloSection2Open
DataCardField5.Visible -> gloSection2Open
DataCardField6.Visible -> gloSection2Open
...

Tell me if manage to make it work... 🙂

View solution in original post

eb221
Level: Powered On

Re: Collapsible Power App Sections with Form Elements

Thank you for taking the time to explain the solution in more detail. It worked perfectly!~

egallis
Level 10

Re: Collapsible Power App Sections with Form Elements

Always a pleasure... Smiley Happy

Helpful resources

Announcements
thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

Top Kudoed Authors
Users Online
Currently online: 293 members 3,472 guests
Please welcome our newest community members: