Tabbed Pages

[Former Community Member]

Is it possible to create a form that contains multiple pages that can be accessed by "tabs" or "dividers" along the top or side of the master page? I am trying to create a form that has multiple pages, and the user will only fill out the required page based on the info he/she has. Essentially he/she would be able to select the page from a tab or divider and it would take him to the page to be completed. Exactly like what internet explorer has developed for web browsing. I hope this makes sense and would greatly appreciate some advice.

[Former Community Member]

Yes. There are several approaches that can be used.



I think the easiest is to insert a subform on the Master Pages above the content area and add buttons to the subform. The buttons will function as the tabs.



In Design view, add multiple pages. For testing purposes, add a text field on each page and change the text to reflect the page number.



Go back to the Master Pages view and introduce some script to navigate between pages. There is a restriction to page navigation - you have to traverse serially through pages. In other words, you have to page up and page down. You cannot go directly from page 1 to page 3, for example. So if we have a form with three pages we can can add three buttons (page1Btn, page2Btn, and page3Btn) and label them 'Page 1', 'Page 2', and 'Page 3', respectively.



We can use the property 'xfa.host.currentPage' to determine which page is currently active and then page up and page down accordingly. The currentPage property is zero-based meaning page 1 is page 0 and so on. So for page1Btn you could add the following client-side JavaScript:



form1.#pageSet[0].Page1.#subform[0].page1Btn::click - (JavaScript, client)



if (xfa.host.currentPage == 1) {

// if current page is page 2, go to page 1

xfa.host.pageUp();

}

else {

if (xfa.host.currentPage == 2) {

// if current page is page 3, go to page 1

xfa.host.pageUp();

xfa.host.pageUp();

}

}



For page2Btn you could add



form1.#pageSet[0].Page1.#subform[0].page2Btn::click - (JavaScript, client)



if (xfa.host.currentPage == 0) {

xfa.host.pageDown();

}

else {

if (xfa.host.currentPage == 2) {

xfa.host.pageUp();

}

}



And finally, page3Btn would look like



form1.#pageSet[0].Page1.#subform[0].page3Btn::click - (JavaScript, client)



if (xfa.host.currentPage == 0) {

xfa.host.pageDown();

xfa.host.pageDown();

}

else {

if (xfa.host.currentPage == 1) {

xfa.host.pageDown();

}

}

[Former Community Member]

Thanks very much for the info.

I have so far been unable to make this work as described. I am new to scripts but I will continue to try to figure it out.



You describe that it would not be possible to go from page 1 to page 3. Is there a method that would allow this? I was hoping to find something with the ability to select a tab in no sequential order.



Thanks,

Michelle

[Niall_O_Donovan]

Hi,



You can also script buttons to go directly to a set page. You will see similar script if you drag a print button into your form and look at the script in the click event:



xfa.host.print(1, "0", (xfa.host.numPages -1).toString(), 0, 0, 0, 0, 0);



The second parameter in the brackets "0" says that you want to print from page 1 (the numbering of pages is zero based, so page 1 is referenced zero). The next parameter is "xfa.host.numPages -1" this says that you want to print up to and including the last page. xfa.host.numPages counts the number of pages and then the -1 turns that number into the zero based system. Bear this in mind when setting up your page navigation script.



In addition to the next page and previous page buttons above, you can srcipt buttons to jump to specific pages. This is easier if the pages within the form do not grow /spawn into new pages, for example as the user fills in data the form grows from 3 pages to 5 pages in length.



Lets say the form is 4 pages long and has a front page and 3 individual forms that the user could fill in. You would set up three buttons on the master page as above and put the single line of javascript in the click event of each button:



xfa.host.currentPage = xfa.host.numPages -3; // this will jump to page 2



xfa.host.currentPage = xfa.host.numPages -2; // this will jump to page 3



xfa.host.currentPage = xfa.host.numPages -1; // this will jump to page 4 (the last page)



Another option would be to set the presence of the optional pages to hidden. For the four page example above, number your page p1, p2, p3, p4. Leave the precence of p1 visible. When you set p2, p3, p4 to hidden, they are excluded from the layout. In the master page only have three buttons (still called something like go to Form 1, go to Form 2, etc.). Then in the click event of the first one have the following javascript:



form1.p2.presence = "visible";

form1.p3.presence = "hidden";

form1.p4.presence = "hidden";



The script to shouw page 3 and hide the others is:



form1.p2.presence = "hidden";

form1.p3.presence = "visible";

form1.p4.presence = "hidden";



Lastly the show page 4 and hide the other:



form1.p2.presence = "hidden";

form1.p3.presence = "hidden";

form1.p4.presence = "visible";



Using this method means that you have turned a multiple page form into a two page form and are only presenting the pages that the user needs to see based on their (clicking) choice on page 1.



Hope that helps,



Niall