Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

DropDown conditionally showing new Dropdown

Avatar

Level 2

Hi everyone,

I am very bad at Java, I can usually get by reading it alright but do not know enough syntax to write anything.  I have been reading for the past couple hours and can't find any tutorial or discussion for the script I am trying to create. 

I want to have a drop down box with 3 options: Phone, Email, Fax

If the user selects Email or Fax the other dropdown will be hidden

If they user selects Phone I want another drop down to appear with 3 options such as Cell, Home, Office  so they can choose which phone

If anyone can direct me in the right direction or help me with a script it would be greatly appreciated.

I have found some scripts using checkboxes and I tried to adapt it to this but I am unsure if I select both boxes when editing script or just one or the other.

Thank you!

PS I am using 8.0

1 Accepted Solution

Avatar

Correct answer by
Level 5

Is the text of your dropdown entry matching the text you have in the script in the if statement? Its case sensitive.

Otherwise might be easier to post the form somewhere and can take a quick look

View solution in original post

12 Replies

Avatar

Level 5

Sorry was going to suggest using the action builder but saw that you only had version 8, so a bit of scripting is required to get this to work. If you have two drop-down listboxes, make the second one invisible or hidden to begin with. Then in the first listbox, add the following to the change event (javascript)

if ($.boundItem(xfa.event.newText) == "Phone")

{

  this.resolveNode("DropDownList2").presence = "visible";

}

else

{

  this.resolveNode("DropDownList2").presence = "invisible";

}

where DropDownList2 is the name of the second listbox.

You will need to save the form as a dynamic pdf and not static or nothing will happen

Avatar

Level 2

I copied and pasted that exact script and applied it to the first dropdownbox and the second dropdownbox never appears.  I set it the box to visible and it was still invisible in the box properties, then I changed it to invisible and it remained invisible despite any user entry in the first dropdownbox.

Avatar

Level 5

Did you use the change event on the first drop-down listbox? Set it to Javascript and not Formcalc.

Make sure you have saved your form as a dynamic xml form ( *.pdf)  in File->Save As...

Do you have a sample form to look at?

Avatar

Level 2

Set to Javascript,  and do you mean change event by making the script only on the first drop down?

What would you like to look at, I do not have a big form yet, I wanted to figure out how to do this first.

Avatar

Level 5

In the script editor window (Window->Script Editor menu item), goto Show: at the top and switch to "change" in the list of events. Paste the code in there. Also set the language on the right side to "Javascript"

Avatar

Level 2

Ok I did that, but again the second dropdown never appears..  I did a test, I made the 2nd box visible and then when I chose "phone" in the first box it made the second disappear.  So I am guessing that in the code it doesn't properly say that when "phone" is selected to make it visible.

Avatar

Correct answer by
Level 5

Is the text of your dropdown entry matching the text you have in the script in the if statement? Its case sensitive.

Otherwise might be easier to post the form somewhere and can take a quick look

Avatar

Level 2

Can't believe I didn't catch that.

Thank you for all your help!

Avatar

Level 2

One more quick question.

I am doing the same thing but have more terms in the first dropbox.

For example, make the second dropbox visible if: A, B, C, but not D are selected.

How do I list multiple terms in the code

Avatar

Level 5

You can test for multiple conditions, for example

if ( $.boundItem(xfa.event.newText) == "A" && DropDownList2.rawValue == "B" )

{

    TextField1.presence = "visible";

}

else

{

    TextField1.presence = "invisible";

}

meaning if the current item has changed to A and dropdownlist2 is already at B then hide the object called TextField1. You can change it arround and add more conditions.

You would have to put them on each change event (if they are all linked to the test)

Avatar

Level 2

Let me clarify a little bit,

I mean that in the original case I only had the second dropdownlist show up when "phone" was selected.  How can I make the second dropdownlist show up when "phone" OR "email" is selected..  I don't know the syntax

Avatar

Level 5

You will need to use something pretty similar

if ($.boundItem(xfa.event.newText) == "Phone" || $.boundItem(xfa.event.newText) == "Email" )
{
  this.resolveNode("DropDownList2").presence = "visible";
}
else
{
  this.resolveNode("DropDownList2").presence = "invisible";
}

|| for or notation and && is and notation