nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Clear Multi-Tier Dropdown entries in Confiforms when de-selected

Stephen Pease

I have a simple multi-tiered dropdown list that I am building as a guide for others to replicate dropdowns that are dependent on selection. So far the logic works well to show and hide the appropriate fields, however, if the top level dropdown is changed, the inputs existing from the first selection remain.

The structure of the dropdown looks like this:

Ford
- Ford Mustang
  - Ford Mustang Mach1
  - Ford Mustang Shelby GT350
- Ford Ranger
  - Ford Ranger XLS
  - Ford Ranger XLT
Tesla
- Tesla Cybertruck
- Tesla Car
  - Tesla Car Model Y
  - Tesla Car Model X
Fiat 500X

The initial dropdown looks like this:

Then, more dropdowns appear as you select a category

3Tiers Showing.PNG

If users perfectly select what they want, there are no issues, but we all know that might not always be the case. The problem appears when they leave this as is, then say change the top-level dropdown of "Make" to something else.

Another Car.PNG

The visibility of the dropdowns works nicely and the subcategories for Ford disappear, but the underlying selections remain, and when submitted, the data shows both selections.

Is there a way to clear the selections when a main dropdown is changed? So in this case since I changed my mind off of Ford and chose instead Tesla, the Ford entries would be removed and only the Tesla input would remain? I don't want users to have to consciously go back in to entries and manually clear other selections if they change their mind.

I am happy to answer any questions to help amplify what I am asking if this doesn't make sense. Thank you!

Accepted answers

Alex Medved _ConfiForms_

will try to answer your original question layer, but let me answer this with another question… sorry about that

So, why don’t you use the smart classifier field instead? Everything with reducing options based on selection is done for you automatically with that field

Alex

All comments

Alex Medved _ConfiForms_

will try to answer your original question layer, but let me answer this with another question… sorry about that

So, why don’t you use the smart classifier field instead? Everything with reducing options based on selection is done for you automatically with that field

Alex

Stephen Pease

Hi Alex,

I suppose it comes down to familiarity with what I know. I have never used smart classifier, but am happy to try it out. When I went to Atlassian's "The Power of Confiforms Smart Classifier" I had a little trouble understanding the setup. I can see that I would place a few Confiforms Form Field Definitions dropdowns (or text?) but not sure how to create the 3-tier system and further it wasn't clear how to create the form for submission since it appears that there are two forms with two registration controls. I'm sure it works nicely once you understand it, but I'm not quite there yet. Is there a better example floating around? I am all for reduction in the amount of logic macros I have in my current page to hide/show the correct dropdowns.

Stephen Pease

Hi @Alex Medved _ConfiForms_ , I gave it a solid try, but I'm getting confused trying to implement this. When I create the separate form, I can't make sense of how to hide and show the categories (and none of them show up in the second form whether I use text or dropdown in the first). The example just shows entering a text field in the first form, but I need to have a three-tiered selection.

In my current example, I am using logic that is basically hide if NOT selected for the lower categories and only show on user action if a specific ID is selected, which is working great (aside from the obvious lack of clearing selected entries). I am all for using an easier method, but I can't figure out how to apply the small example on the Atlassian site to my problem. Any help is always appreciated, thank you!

Alex Medved _ConfiForms_

Will this demo help?

http://recordit.co/vY2fFdi0r4

Here is the configuration I have in 2 screenshots...

Forms:

Screenshot 2022-10-03 at 21.56.42.png

Smart classifier pointing at the "cars" form Screenshot 2022-10-03 at 21.57.01.png

Alex

Alex Medved _ConfiForms_

And as was promised before, one other way of solving this using own rules (resetting and filtering options) and separate fields

Demo (uses the same "cars" form as an input):

http://recordit.co/Fj8dk4YH4R

Configuration as a storage format

<ac:structured-macro ac:macro-id="777811e7-a28b-4711-88af-4c60980de9e7" ac:name="confiform" ac:schema-version="1">
<ac:parameter ac:name="formName">carpick1</ac:parameter>
<ac:rich-text-body>
<p>
<ac:structured-macro ac:macro-id="da1ad6b2-288d-4161-b5a7-28057f0dfb8c" ac:name="confiform-field-definition" ac:schema-version="1">
<ac:parameter ac:name="fieldName">pickMake</ac:parameter>
<ac:parameter ac:name="fieldLabel">Pick make</ac:parameter>
<ac:parameter ac:name="values">[111510600|cars|make|false||]</ac:parameter>
<ac:parameter ac:name="type">smartselect</ac:parameter>
</ac:structured-macro>
</p>
<p>
<ac:structured-macro ac:macro-id="03b9c09a-144e-4ba4-9c09-1ef2d9dd5256" ac:name="confiform-field-definition" ac:schema-version="1">
<ac:parameter ac:name="fieldName">pickMark</ac:parameter>
<ac:parameter ac:name="fieldLabel">Pick mark</ac:parameter>
<ac:parameter ac:name="values">[111510600|cars|mark|false||]</ac:parameter>
<ac:parameter ac:name="type">smartselect</ac:parameter>
</ac:structured-macro>
</p>
<p>
<ac:structured-macro ac:macro-id="00adc387-245b-485a-be73-970bee898157" ac:name="confiform-field-definition" ac:schema-version="1">
<ac:parameter ac:name="fieldName">pickModel</ac:parameter>
<ac:parameter ac:name="fieldLabel">Pick model</ac:parameter>
<ac:parameter ac:name="values">[111510600|cars|model|true||]</ac:parameter>
<ac:parameter ac:name="type">smartselect</ac:parameter>
</ac:structured-macro>
</p>
<p>-- reset values in pickMark/pickModel if the pickMake field value has changed</p>
<p>
<ac:structured-macro ac:macro-id="40d42cb2-4884-465a-a985-d46ff6b0e4eb" ac:name="confiform-field-definition-rules" ac:schema-version="1">
<ac:parameter ac:name="fieldName">pickMark,pickModel</ac:parameter>
<ac:parameter ac:name="action">Reset value</ac:parameter>
<ac:parameter ac:name="onUserActionOnly">true</ac:parameter>
<ac:parameter ac:name="actionFieldName">pickMake</ac:parameter>
</ac:structured-macro>
</p>
<p>
<ac:structured-macro ac:macro-id="39456e50-e71c-465f-9434-200d90f43989" ac:name="confiform-field-definition-rules" ac:schema-version="1">
<ac:parameter ac:name="condition">!pickMake:[empty]</ac:parameter>
<ac:parameter ac:name="fieldName">pickMark,pickModel</ac:parameter>
<ac:parameter ac:name="values">make:[entry.pickMake]</ac:parameter>
<ac:parameter ac:name="action">Apply Filter on a field</ac:parameter>
<ac:parameter ac:name="actionFieldName">pickMake</ac:parameter>
</ac:structured-macro> <ac:structured-macro ac:macro-id="030dee48-e53d-4eec-a660-e117394628dc" ac:name="confiform-field-definition-rules" ac:schema-version="1">
<ac:parameter ac:name="condition">pickMake:[empty]</ac:parameter>
<ac:parameter ac:name="fieldName">pickMark,pickModel</ac:parameter>
<ac:parameter ac:name="values">created:&lt;0</ac:parameter>
<ac:parameter ac:name="action">Apply Filter on a field</ac:parameter>
<ac:parameter ac:name="actionFieldName">pickMake</ac:parameter>
</ac:structured-macro> – this is to remove all options in model and mark if make is not selected yet</p>
<p>-- reset values in pickModel if the pickMark field value has changed</p>
<p>
<ac:structured-macro ac:macro-id="40fc3541-5a3e-451c-af12-93c79281ed83" ac:name="confiform-field-definition-rules" ac:schema-version="1">
<ac:parameter ac:name="fieldName">pickModel</ac:parameter>
<ac:parameter ac:name="action">Reset value</ac:parameter>
<ac:parameter ac:name="onUserActionOnly">true</ac:parameter>
<ac:parameter ac:name="actionFieldName">pickMark</ac:parameter>
</ac:structured-macro>
</p>
<p>
<ac:structured-macro ac:macro-id="3fc6f7a4-a0bf-47f1-9f96-92e81c78ef1b" ac:name="confiform-field-definition-rules" ac:schema-version="1">
<ac:parameter ac:name="condition">!pickMake:[empty] AND !pickMark:[empty]</ac:parameter>
<ac:parameter ac:name="fieldName">pickModel</ac:parameter>
<ac:parameter ac:name="values">make:[entry.pickMake] AND mark:[entry.pickMark]</ac:parameter>
<ac:parameter ac:name="action">Apply Filter on a field</ac:parameter>
<ac:parameter ac:name="actionFieldName">pickMark</ac:parameter>
</ac:structured-macro> <ac:structured-macro ac:macro-id="b2d53b6a-eb35-48e1-befd-6e29335e0270" ac:name="confiform-field-definition-rules" ac:schema-version="1">
<ac:parameter ac:name="condition">pickMark:[empty]</ac:parameter>
<ac:parameter ac:name="fieldName">pickModel</ac:parameter>
<ac:parameter ac:name="values">created:&lt;0</ac:parameter>
<ac:parameter ac:name="action">Apply Filter on a field</ac:parameter>
<ac:parameter ac:name="actionFieldName">pickMark</ac:parameter>
</ac:structured-macro> – this is to remove all options in model and mark if make is not selected yet</p>
<p>
<br/>
</p>
<p>
<br/>
</p>
<ac:structured-macro ac:macro-id="6ee10100-5af9-48b7-8b7e-8778e14c2ffc" ac:name="confiform-entry-register" ac:schema-version="1">
<ac:parameter ac:name="type">Embedded</ac:parameter>
<ac:rich-text-body>
<p>
<br/>
</p>
</ac:rich-text-body>
</ac:structured-macro>
</ac:rich-text-body>
</ac:structured-macro>

Hope it helps

Alex

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

server

confluence-server

confiforms

select-list