Participant

Question

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

10 replies
8027 views
Translate

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";

}

This topic is closed to new replies. Start a new post to keep the conversation going.

J

John_Frederick_Chionglo

Known Participant

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.

Translate

M

Misbah26921674vrap

Known Participant

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

Translate

Thom Parker

Community Expert

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.

Translate

Thom Parker - Software Developer at PDFScriptingUse the Acrobat JavaScript Reference early and often

G

George_Johnson

Inspiring

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.

Translate

K

KPattAuthor

Participant

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!

Translate

try67

Community Expert

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);

Translate

G

gkaiseril

Inspiring

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.

Translate

K

KPattAuthor

Participant

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...

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.