Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Using show/hide fields with dropdowns

Avatar

Level 2

The code below stores and shows data that is displayed in a display field based on what the user selects, and it works great, but I'm unsure how to integrate additional content into this framework.

form1.#subform[0].indPaymentOptions::change - (JavaScript, client)

    // Switch - test for 'selected' text, if so, display 'display' text

          switch (this.boundItem(xfa.event.newText)) {

          case "Donation/Contribution":

                    var display = "Restricted use, typically student fundraisers. May not be to a political entity or support a political purpose. Fundraised donations require a copy of deposit. <span style=\"color: #FF0000; font-style: italic;\">Must be charged to unrestricted funds, and Sr. Officer approval required.</span>";

                    XmlToShow = XmlStart+display+XmlEnd;

                    xfa.resolveNode("form1.#subform.Display_Field_Pay_Types").value.exData.loadXML(XmlToShow,true);

                    taxReportable.rawValue = "Y";

                    AccountCodesDynamic.rawValue = "001285";

 

                    break;

 

          case "Membership":

                    var display = "University sponsored memberships must be directly related to the proposed member’s University responsibilities. Obtain institutional rather than individual memberships to allow participation by several or alternate employees. Memberships must use a UCSC address for business verification.";

                    XmlToShow = XmlStart+display+XmlEnd;

                    xfa.resolveNode("form1.#subform.Display_Field_Pay_Types").value.exData.loadXML(XmlToShow,true);

                    taxReportable.rawValue = "Y";

                    AccountCodesDynamic.rawValue = "001200,\n001210";

                    break;

 

          default:

                    VendPaymentOptions.rawValue = "Please select an option from the 'Select type' drop-down menu above.";

                    taxReportable.rawValue = "";

                    break;

 

          }

I'm trying to show a hidden field once one of the dropdown items is selected using an if/then statement. I've tried putting the code below in with the code above, but that doesn't work. I'm unfamiliar with the event handling scheme of livescript, so I'm also not sure where the if then statement should be input. Should it be put into the *click section? Or the initialze section? If someone could shine some light on what to do here that would be great.

   

   

if (xfa.resolveNode("form1.#subform.indPaymentOptions").rawValue == 1) {

  xfa.resolveNode("form1.#subform.textfield1").presence = "visible";

  }

  else {

  xfa.resolveNode("form1.#subform.textfield1").presence = "hidden";

  }

1 Accepted Solution

Avatar

Correct answer by
Former Community Member

My example used only display Text. When viewing the drop down object window, click the binding tab. If specify item values is checked, then boundItem will return what is in the Value column when passing in what is in the Text column. If you added an additional item in the list without adding an item for value, that may be your issue. In my example, if you check the box, it will put 1, 2, 3 in the value column. If then in the code, you added the this.boundItem part, the case sections would need to be changed from "TextField1" to "1" and the same for 2 and 3.

View solution in original post

14 Replies

Avatar

Former Community Member

The switch uses xfa.event.newText which is correct. The extra code uses rawValue which will not give you the new selected value in the change event. Change fires prior to the new value taking effect so that you have the ability to cancel the change. I think you just want an additoinal case section for whatever drop down text correlates to 1.

Avatar

Level 2

I've tried adding in a statement to each case. One designating the text field as visible, with the others designating hidden, but the statement isn't showing up at all. It looks like the "hiding" cases are working. But I can't get the showing ones to work. I'm hiding the text field by clicking on it and setting it as "invisible" in the field properties.

   

// Switch - test for 'selected' text, if so, display 'display' text

          switch (this.boundItem(xfa.event.newText)) {

          case "Donation/Contribution":

                    var display = "Restricted use, typically student fundraisers. May not be to a political entity or support a political purpose. Fundraised donations require a copy of deposit. <span style=\"color: #FF0000; font-style: italic;\">Must be charged to unrestricted funds, and Sr. Officer approval required.</span>";

                    XmlToShow = XmlStart+display+XmlEnd;

                    xfa.resolveNode("form1.#subform.Display_Field_Pay_Types").value.exData.loadXML(XmlToShow,true);

                    taxReportable.rawValue = "Y";

                    AccountCodesDynamic.rawValue = "001285";

  xfa.resolveNode("form1.#subform.TextField1").presence = "visible";

                    break;

 

          case "Membership":

                    var display = "University sponsored memberships must be directly related to the proposed member’s University responsibilities. Obtain institutional rather than individual memberships to allow participation by several or alternate employees. Memberships must use a UCSC address for business verification.";

                    XmlToShow = XmlStart+display+XmlEnd;

                    xfa.resolveNode("form1.#subform.Display_Field_Pay_Types").value.exData.loadXML(XmlToShow,true);

                    taxReportable.rawValue = "Y";

                    AccountCodesDynamic.rawValue = "001200,\n001210";

  xfa.resolveNode("form1.#subform.TextField1").presence = "hidden";

                    break;

Even if this did work, the text field would need to be hidden at the start of the form, so would I need to use some sort of statement in the initialize section to do this? I appreciate your help with all this.

Avatar

Former Community Member

Invisible is different from hidden in that invisible still takes up space. In a flowed layout, the form will change size with hidden.

Is the form saved as static or dynamic? If using preview, then look at the preview settings. If static and the fields are invisible at design, I don't think they will show up setting to visible in code. Everything I do is dynamic and it has been a while since using static.

Right click in the code window and select Check Script Syntax. See if there are any issues.

While viewing the form, Ctrl+J brings up the JavaScript Debugger. See if any errors occur when changing the value of the drop down.

Once you get the code working, you can just set the field hidden at design time if that is the default state.

Avatar

Level 2

The file is set to dynamic, and I've run both the syntax checker as well as the debugger; no issues have been found.

The dropdown works fine, and I can get all my options to hide the text field, but I can't get my presence = "visible" function to work. Is this code correct?

  xfa.resolveNode("form1.#subform.TextField1").presence = "visible";


Avatar

Former Community Member

The syntax is correct. Create a new form, go to XML Source, paste from below. That works for me.

<?xml version="1.0" encoding="UTF-8"?>

<?xfa generator="AdobeLiveCycleDesignerES_V9.0.0.2.20100902.2.720808" APIVersion="3.1.10056.0"?>

<xdp:xdp xmlns:xdp="http://ns.adobe.com/xdp/" timeStamp="2013-02-26T18:29:53Z" uuid="0a18605f-7524-4d7a-a835-35be192b5b37">

<template xmlns="http://www.xfa.org/schema/xfa-template/2.8/">

   <?formServer defaultPDFRenderFormat acrobat9.0dynamic?>

   <subform name="form1" layout="tb" locale="en_US" restoreState="auto">

      <pageSet>

         <pageArea name="Page1" id="Page1">

            <contentArea x="0.25in" y="0.25in" w="8in" h="10.5in"/>

            <medium stock="letter" short="8.5in" long="11in"/>

            <?templateDesigner expand 1?></pageArea>

         <?templateDesigner expand 1?></pageSet>

      <subform w="8in" h="10.5in">

         <field name="TextField1" y="28.575mm" x="73.025mm" w="62mm" h="9mm" presence="invisible">

            <ui>

               <textEdit>

                  <border>

                     <?templateDesigner StyleID aped3?>

                     <edge stroke="lowered"/>

                  </border>

                  <margin/>

               </textEdit>

            </ui>

            <font typeface="Myriad Pro"/>

            <margin topInset="1mm" bottomInset="1mm" leftInset="1mm" rightInset="1mm"/>

            <para vAlign="middle"/>

            <caption reserve="25mm">

               <para vAlign="middle"/>

               <value>

                  <text>Text Field</text>

               </value>

            </caption>

         </field>

         <field name="TextField2" y="44.45mm" x="73.025mm" w="62mm" h="9mm" presence="invisible">

            <ui>

               <textEdit>

                  <border>

                     <?templateDesigner StyleID aped3?>

                     <edge stroke="lowered"/>

                  </border>

                  <margin/>

               </textEdit>

            </ui>

            <font typeface="Myriad Pro"/>

            <margin topInset="1mm" bottomInset="1mm" leftInset="1mm" rightInset="1mm"/>

            <para vAlign="middle"/>

            <caption reserve="25mm">

               <para vAlign="middle"/>

               <value>

                  <text>Text Field</text>

               </value>

            </caption>

         </field>

         <field name="TextField3" y="60.325mm" x="73.025mm" w="62mm" h="9mm" presence="invisible">

            <ui>

               <textEdit>

                  <border>

                     <?templateDesigner StyleID aped3?>

                     <edge stroke="lowered"/>

                  </border>

                  <margin/>

               </textEdit>

            </ui>

            <font typeface="Myriad Pro"/>

            <margin topInset="1mm" bottomInset="1mm" leftInset="1mm" rightInset="1mm"/>

            <para vAlign="middle"/>

            <caption reserve="25mm">

               <para vAlign="middle"/>

               <value>

                  <text>Text Field</text>

               </value>

            </caption>

         </field>

         <field name="DropDownList1" y="28.575mm" x="6.35mm" w="62mm" h="9mm">

            <ui>

               <choiceList>

                  <border>

                     <?templateDesigner StyleID aped3?>

                     <edge stroke="lowered"/>

                  </border>

                  <margin/>

               </choiceList>

            </ui>

            <font typeface="Myriad Pro"/>

            <margin topInset="1mm" bottomInset="1mm" leftInset="1mm" rightInset="1mm"/>

            <para vAlign="middle"/>

            <caption reserve="25mm">

               <para vAlign="middle"/>

               <value>

                  <text>Drop-down List</text>

               </value>

            </caption>

            <items save="1">

               <text>TextField1</text>

               <text>TextField2</text>

               <text>TextField3</text>

            </items>

            <event activity="change" name="event__change">

               <script contentType="application/x-javascript">

switch (xfa.event.newText) {

          case "TextField1":

          TextField1.presence = "visible";

          TextField2.presence = "invisible";

          TextField3.presence = "invisible";

          break;

          case "TextField2":

          TextField2.presence = "visible";

          TextField1.presence = "invisible";

          TextField3.presence = "invisible";

          break;

          case "TextField3":

          TextField3.presence = "visible";

          TextField1.presence = "invisible";

          TextField2.presence = "invisible";

          break;

}</script>

            </event>

         </field>

         <?templateDesigner expand 1?></subform>

      <proto/>

      <desc>

         <text name="version">9.0.0.2.20100902.2.720808</text>

      </desc>

      <?templateDesigner expand 1?></subform>

   <?templateDesigner DefaultPreviewDynamic 1?>

   <?templateDesigner DefaultRunAt client?>

   <?templateDesigner Grid show:1, snap:1, units:0, color:ff8080, origin:(0,0), interval:(125000,125000)?>

   <?templateDesigner DefaultLanguage JavaScript?>

   <?acrobat JavaScript strictScoping?>

   <?templateDesigner Zoom 132?>

   <?templateDesigner dciEncryptionHint 0?>

   <?templateDesigner dciCommentingHint 0?>

   <?templateDesigner dciReader91SubmitHint 0?>

   <?templateDesigner SavePDFWithLog 0?>

   <?templateDesigner SaveTaggedPDF 0?>

   <?templateDesigner SavePDFWithEmbeddedFonts 0?>

   <?templateDesigner FormTargetVersion 28?>

   <?templateDesigner Rulers horizontal:1, vertical:1, guidelines:1, crosshairs:0?></template>

<config xmlns="http://www.xfa.org/schema/xci/2.8/">

   <agent name="designer">

      <!--  [0..n]  -->

      <destination>pdf</destination>

      <pdf>

         <!--  [0..n]  -->

         <fontInfo/>

      </pdf>

   </agent>

   <present>

      <!--  [0..n]  -->

      <destination>pdf</destination>

      <pdf>

         <!--  [0..n]  -->

         <fontInfo>

            <embed>0</embed>

         </fontInfo>

         <tagged>0</tagged>

         <version>1.7</version>

         <adobeExtensionLevel>3</adobeExtensionLevel>

      </pdf>

      <xdp>

         <packets>*</packets>

      </xdp>

   </present>

</config>

<localeSet xmlns="http://www.xfa.org/schema/xfa-locale-set/2.7/">

   <locale name="en_US" desc="English (United States)">

      <calendarSymbols name="gregorian">

         <monthNames>

            <month>January</month>

            <month>February</month>

            <month>March</month>

            <month>April</month>

            <month>May</month>

            <month>June</month>

            <month>July</month>

            <month>August</month>

            <month>September</month>

            <month>October</month>

            <month>November</month>

            <month>December</month>

         </monthNames>

         <monthNames abbr="1">

            <month>Jan</month>

            <month>Feb</month>

            <month>Mar</month>

            <month>Apr</month>

            <month>May</month>

            <month>Jun</month>

            <month>Jul</month>

            <month>Aug</month>

            <month>Sep</month>

            <month>Oct</month>

            <month>Nov</month>

            <month>Dec</month>

         </monthNames>

         <dayNames>

            <day>Sunday</day>

            <day>Monday</day>

            <day>Tuesday</day>

            <day>Wednesday</day>

            <day>Thursday</day>

            <day>Friday</day>

            <day>Saturday</day>

         </dayNames>

         <dayNames abbr="1">

            <day>Sun</day>

            <day>Mon</day>

            <day>Tue</day>

            <day>Wed</day>

            <day>Thu</day>

            <day>Fri</day>

            <day>Sat</day>

         </dayNames>

         <meridiemNames>

            <meridiem>AM</meridiem>

            <meridiem>PM</meridiem>

         </meridiemNames>

         <eraNames>

            <era>BC</era>

            <era>AD</era>

         </eraNames>

      </calendarSymbols>

      <datePatterns>

         <datePattern name="full">EEEE, MMMM D, YYYY</datePattern>

         <datePattern name="long">MMMM D, YYYY</datePattern>

         <datePattern name="med">MMM D, YYYY</datePattern>

         <datePattern name="short">M/D/YY</datePattern>

      </datePatterns>

      <timePatterns>

         <timePattern name="full">h:MM:SS A Z</timePattern>

         <timePattern name="long">h:MM:SS A Z</timePattern>

         <timePattern name="med">h:MM:SS A</timePattern>

         <timePattern name="short">h:MM A</timePattern>

      </timePatterns>

      <dateTimeSymbols>GyMdkHmsSEDFwWahKzZ</dateTimeSymbols>

      <numberPatterns>

         <numberPattern name="numeric">z,zz9.zzz</numberPattern>

         <numberPattern name="currency">$z,zz9.99|($z,zz9.99)</numberPattern>

         <numberPattern name="percent">z,zz9%</numberPattern>

      </numberPatterns>

      <numberSymbols>

         <numberSymbol name="decimal">.</numberSymbol>

         <numberSymbol name="grouping">,</numberSymbol>

         <numberSymbol name="percent">%</numberSymbol>

         <numberSymbol name="minus">-</numberSymbol>

         <numberSymbol name="zero">0</numberSymbol>

      </numberSymbols>

      <currencySymbols>

         <currencySymbol name="symbol">$</currencySymbol>

         <currencySymbol name="isoname">USD</currencySymbol>

         <currencySymbol name="decimal">.</currencySymbol>

      </currencySymbols>

      <typefaces>

         <typeface name="Myriad Pro"/>

      </typefaces>

   </locale>

</localeSet>

<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 4.2.1-c043 52.437709, 2010/08/04-17:30:07        ">

   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">

      <rdf:Description xmlns:xmp="http://ns.adobe.com/xap/1.0/" rdf:about="">

         <xmp:MetadataDate>2013-02-26T18:29:53Z</xmp:MetadataDate>

         <xmp:CreatorTool>Adobe LiveCycle Designer ES 9.0</xmp:CreatorTool>

      </rdf:Description>

      <rdf:Description xmlns:pdf="http://ns.adobe.com/pdf/1.3/" rdf:about="">

         <pdf:Producer>Adobe LiveCycle Designer ES 9.0</pdf:Producer>

      </rdf:Description>

      <rdf:Description xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" rdf:about="">

         <xmpMM:DocumentID>uuid:0a18605f-7524-4d7a-a835-35be192b5b37</xmpMM:DocumentID>

      </rdf:Description>

      <rdf:Description xmlns:desc="http://ns.adobe.com/xfa/promoted-desc/" rdf:about="">

         <desc:version rdf:parseType="Resource">

            <rdf:value>9.0.0.2.20100902.2.720808</rdf:value>

            <desc:ref>/template/subform[1]</desc:ref>

         </desc:version>

      </rdf:Description>

   </rdf:RDF>

</x:xmpmeta></xdp:xdp>

Avatar

Level 2

I gave that a shot and got the following error:

Xml parsing error: not well-formed (invalid token) (error code 4), line 270, column 80 of file.

Select "Edit Source' to go back and fix the errors or "Ignore Changes" to ignore the changes.

Avatar

Former Community Member

I don't know why your system is getting the error, maybe a version thing. Line 280 is in the <x:xmpmeta section. I tried deleting all of that <x:xmpmeta through </x:xmpmeta> then went back to design view without an error. So try doing that. When I went back to XML Source, that section was added back. So you system should add it back, but with values that it likes.

Avatar

Level 2

I deleted that bit out and it is indeed working correctly. I'll use this code to work from as an example. I imagine that I'm having trouble pulling this off in the document because of other bits of code that might be tucked away somewhere.

Thanks for all your help.

Avatar

Former Community Member

Take note that I used switch (xfa.event.newText), not switch (this.boundItem(xfa.event.newText)) from your original code snippet.

Avatar

Level 2

Is there any functional difference between those two? My situation is that I'm inheriting this code from someone else and trying to add new functionality. Can you think of any reason that switching to your code would change form functionality at all? Or is there any reason that my code wouldn't allow for the kind of functionality that I'm trying for?

Thanks.

Avatar

Correct answer by
Former Community Member

My example used only display Text. When viewing the drop down object window, click the binding tab. If specify item values is checked, then boundItem will return what is in the Value column when passing in what is in the Text column. If you added an additional item in the list without adding an item for value, that may be your issue. In my example, if you check the box, it will put 1, 2, 3 in the value column. If then in the code, you added the this.boundItem part, the case sections would need to be changed from "TextField1" to "1" and the same for 2 and 3.

Avatar

Level 2

That did it! I was able to use your previous answer to get the code working. Thank you for your help. Are there any good resources for a general understanding of these sort of concepts? I can't seem to find much beyond adobe's built in help documentation.

Avatar

Former Community Member

Understanding how to do something in JavaScript with a String, you are better off doing a Google search for what you want to do or going to w3cshools.com. Most W3C spec JavaScript works in Adobe's JavaScript. That will help understanding the syntax of the language.

If you want to change a property in script that you know how to change at design time, click on the item, then click on XML Source and see what got changed in the XML. You'll learn things like setting an item to invisible is changing the presence attribute. You'll also learn that the case is not the same as displayed when editing the object. ReadOly is .access = "readOnly".

In the script window, if you type this. and pause, the code helper pops up with most of the methods on the object. So on the drop down, you would see boundItem or in your case, you see it in code you are trying to edit. Googling LiveCycle boundItem, the first result is http://help.adobe.com/en_US/livecycle/10.0/DesignerScriptingRef/WS92d06802c76abadb-3e14850712a151d27...

Avatar

Level 3

hi,

i have a adobe livecycle form. i want to make a dynamic action here. there is a dropdwon list called relationship. there r 3 items here, SIMGLE, MARRIED AND DEFECTO. if i select married it needs to show a sub form containing partner details. subfom name is partner. if select DEFECTO also same action. but for Single I need it invisible. pls give a code and also details for it.

thanks

Ali

The following has evaluated to null or missing: ==> liqladmin("SELECT id, value FROM metrics WHERE id = 'net_accepted_solutions' and user.id = '${acceptedAnswer.author.id}'").data.items [in template "analytics-container" at line 83, column 41] ---- Tip: It's the step after the last dot that caused this error, not those before it. ---- Tip: If the failing expression is known to be legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)?? ---- ---- FTL stack trace ("~" means nesting-related): - Failed at: #assign answerAuthorNetSolutions = li... [in template "analytics-container" at line 83, column 5] ----