How to show/hide pages based on a drop down selection

[KPatt]

Hello,

At the risk of repeating a lot of people, I'm new to using Javascript and I'm hitting a wall. I have a 4 page document, and page one has a drop down with multiple options. If options 2, 4, 6 or 8 are selected, I want page 2 to be visible, but pages 3 and 4 to remain hidden. If options 1, 3, 5, 7 are selected then I'd like pages 2 and 4 to be hidden and page 3 visible. Lastly, if options a, b, or c are selected, pages 2 and 3 should be hidden and page 4 visible. I've created templates and named them Page2, Page3, and Page4. Unfortunately nothing I've found on google has been helpful, because I'm not using a checkbox nor using Live Cycle. I'm hoping for a javascript solution. I tried doing a JS action on both Mouse Up and Mouse Exit with just a simple show/hide action for page 2, but the below formula didn't work. Thank you in advance to anyone who can help! If it helps, my main page was imported from an excel file, and the 3 templates were imported from PDF files.

if (this.rawValue=="1")

{

Page2.presence = "visible";

}

else

{

PASCOM.presence = "hidden";

}

[gkaiseril]

Was your form created using Acrobat or LiveCycle?

If LiveCycle you might want to ask the question in their forums.

pesence does not appear to apply to pages.

[KPatt]

Hello GK - I'm using Adobe, NOT Live Cycle. There seem to be lots of answers if I was using Live Cycle, but nothing I can find since I'm not...

[George_Johnson]

The code you posted includes things that you might use with an XFA form created in LiveCycle Designer, but nothing like it would work in Acrobat. What you need to do is make each page that you want to show/hide into a hidden template. The script would look at the value of the dropdown and determine which templates need to be spawned to create the new pages you want to add. You'd then get a reference to each template that you want to spawn using the doc.getTemplate method. You'd then use the template.spawn method to create the pages. There is some more information and sample code in the Acrobat JavaScript reference that should help, but if you get stuck, post your revised script.

[KPatt]

Thanks George! This is where I run into trouble; everything I know about javascript is what I've googled how to do for the document I'm creating. I've imported the 3 pages and finally figured out how to make them templates using the Organize Pages tool, but I don't know how to make the templates hidden.

After that, I'm guessing I could put this formula on the drop down field as a Mouse Up option:

var t2 = this.getTemplate(Page2);

var t3 = this.getTemplate(Page3)

var t4 = this.getTemplate(Page4)

if (this.rawValue=="1") t2.spawn(false, false);

else if (this.rawValue=="2") t3.spawn(false, false);

else if (this.rawValue=="a") t4.spawn(false,false);

Although I suspect I'm missing somethings here, too.... the help page I'm looking at uses other variable like i and i++ but doens't explain what they are, so I'm not sure how to incorporate them into what I need to do: Acrobat DC SDK Documentation

Thanks again for your help!

[try67]

Change the code to this and move it to be the custom validation script of the drop-down (make sure to tick the option to commit the selected value immediately, under the field's Properties, Options tab):

var t2 = this.getTemplate("Page2");
var t3 = this.getTemplate("Page3")
var t4 = this.getTemplate("Page4")
if (event.value=="1") t2.spawn(false, false);
else if (event.value=="2") t3.spawn(false, false);
else if (event.value=="a") t4.spawn(false, false);

[KPatt]

Hello try67,

Thank you, but that one didn't quite work either. If I leave it as is it does nothing, but if I add "var XO = t2.spawn(1, true, false);" it will populate that template on the second page regardless of which option is selected. Additionally, when I click on option 1 it will populate the template on both pages 2 and create page 3. I originally had the var XO line 2 more times for the other 2 templates, but that was causing each template to populate on a separate page when I only want 1 at a time. The other issue I'm running into is that I need the template to re-hide itself if one of the incorrect options is selected after the correct option. I tried the below formula but it didn't work:

var t2 = this.getTemplate("Page1");

var t3 = this.getTemplate("Page2")

var t4 = this.getTemplate("Page3")

var XO = t2.spawn (1, false, true);

if (event.value=="1") t2.spawn(1, true, false);

else if (event.value=="2") t3.spawn(1, true, false);

else if (event.value=="a") t4.spawn(1, true, false);

else if (event.value!="1") t2.hidden=true;

else if (event.value!="2") t3.hidden=true;

else if (event.value!="a") t4.hidden=true;

[George_Johnson]

In case you're not aware, Reader cannot hide template pages. But even if it could, pages that are created when you spawn a template are not themselves templates, so attempting to use the hidden property isn't the right approach. Pages that are generated by spawning a template can be deleted via JavaScript, however, using the doc.deletePages method, both in Acrobat and recent versions of Reader (Win/Mac).

[John_Frederick_Chionglo]

Here is one way to do it:

1. Create a four-page document and keep it open.

2. Name page 2, page 3 and page 4 using createTemplate in the console using the following script:

        this.createTemplate(“Page2”, 1);

        this.createTemplate(“Page3”, 2);

        this.createTemplate(“Page4”, 3);

3. Add the following script as a document-level script:

        var pgv = [];

        pgv['1'] = 3; pgv['2'] = 2; pgv['3'] = 3;

        pgv['4'] = 2; pgv['5'] = 3; pgv['6'] = 2;

        pgv['7'] = 3; pgv['8'] = 2; pgv['a'] = 4;

        pgv['b'] = 4; pgv['c'] = 4;

4. Create the dropdown field and name it “Dropdown”.

5. Add the following options for the dropdown field:

        1, 2, 3, 4, 5, 6, 7, 8, a, b, c.

6. Select ‘1’ as the initial option of the dropdown field using the following script in the console:

        this.getField("Dropdown").value = 1;

7. Hide “Page2” and “Page4” using the following scripts in the console:

        this.getTemplate("Page2").hidden = true;

        this.getTemplate("Page4").hidden = true;

8. Add the following script as a custom validation script of the dropdown field:

        this.getTemplate("Page" + pgv[event.target.value]).hidden = true;

        this.getTemplate("Page" + pgv[event.value]).hidden = false;

I created an example PDF form  (Sample Dropdown with Templates) that used the instructions above.

[Misbah26921674vrap]

Hi john. Can you please tell me where to add the createTemplate script? I am trying to add it in Document Javascript but it's showing some kind of error

[Thom Parker]

Page Templates are created at design time, not runtime (i.e., not when the document is in use).  So the create script is run from either the console or a folder level automation script. Page templates are spawned at runtime.