Collapsible Sections based on Caspio Dropdown

[sptclay66]

I am not very experienced with Javascript.....but I have a need to use collapsible section based on a dropdown list.  I found the thread using a checkbox but am struggling to get and interpret the value of the selection .  I want to use the value of the selected dropdown field to drive which sections of my Submission Form data page are visible. Could someone help me with some sample code please?  Thank you!

[kpcollier]

What kind of datapage is this for? Is it a Submission Form?

I think you might be able to do this without JavaScript. When in the DataPage Wizard, use the Rules section.

In the Rules section, create new Criteria. This will contain the dropdown selections. Notice how on my Criteria, I have a 'Job Type' field that could hold multiple values. 

Next, the Action section. This is where you hide the sections you want hidden. In my current workflow below, you can see that if 'Job Type' equals any of the listed values in Criteria, then Section 2 of my form will be hidden. If Job Type is any value not listed in Criteria, Section 2 will be shown.

It is a good idea to split up the form/report with Sections, as you can only use ONE field per Action. So, if you are hiding a field and try to make another rule with that same field, it won't work. 

If you need more help let me know!

[AtayBalunbalunan]

Here is a documentation on how to apply conditional Rules to create dynamic change forms that fine tune fields based on user entries: https://howto.caspio.com/datapages/forms/conditional-forms/

[AtayBalunbalunan]

Also, below is a video guide: 

 

Just now, AtayBalunbalunan said:

Here is a documentation on how to apply conditional Rules to create dynamic change forms that fine tune fields based on user entries: https://howto.caspio.com/datapages/forms/conditional-forms/

[sptclay66]

Thank you.  I saw this type of form logic, but it does not seem to do what I am trying to accomplish because once i "Hide" a section using a rule based on one value of the drop down, that same section, which was not applicable to the option chosen,  is not available to display when a different option is selected.  I am attempting to make one Submission form that only displays fields that are applicable to the option chosen in the dropdown.  Here is what I have.

The field I am using as drop down that will drive the fields I want to have displayed is called Appt_Type and its a dropdown with both custom and lookup table values.  

When the user selects option "A",  only want fields 1,2, and 3 displayed so I put these in Section 2.

When the user selects option "B", only want fields 4,5, and 6 displayed so I put these in Section 3.

When the user selects option "C", only want fields 7, 8, and 9 displayed so I put these in Section 4.

and so on...

I then created a rule that says when Appt_Type is Equal to Value A, hide Section 3, 4, etc.

But it seems that the first time you take action on a section, you cannot code any more logic around that section.  I do not know of a way to make all of the sections hidden to then use a rule to "unhide" that section based on the value chosen.

I was originally trying to use Collapsible sections to make use of the HTML hide and inline examples I saw in the help around Collapsible sections....but I can not figure out how to get the value of the Appt_Field drop down to use in the Javascript script I had in the footer.

Again, i am not very experienced in this stuff, so any redesign or help figuring out either the conditional form design or collapsible section design would be greatly appreciated.

Thank you again for any help.

 

[kpcollier]

1 hour ago, sptclay66 said:

I then created a rule that says when Appt_Type is Equal to Value A, hide Section 3, 4, etc.

Try to spread out the actions. So, instead of having one rule with A in criteria and Section 3, 4 in Action, go with 2 rules. One where the action is Hide Section 3, one where the action is Hide Section 4. Then, for Criteria, list all dropdown values that should have that section hidden.

Rule 1:                                                            Rule 2:                                                               Rule 3:

Criteria: B, C                                               Criteria: A, C                                                 Criteria: A, B

Action: Hide Section 2                          Action: Hide Section 3                             Action: Hide Section 4

And so on.. if there is another dropdown value needing to hide the 3rd section, add the value to Rule 2's Criteria.

 

When I get a chance Ill write up a dummy page to show you.

[sptclay66]

Thank you again.  I got it to work.  Appreciate your time and assistance.