Apps Script Basics – Form page navigation

In this post, we’re going to expand on my previous post on setting up form validation and improve the clocking in and out form we set up, so that the same form can be used for different employees. We’re going to use this example to see how page navigation can work, both to move to certain pages and to display the Submit button on a page.

There will be 4 pages to our form and on the first page, we’ll have a drop-down menu where the employee will choose their name and then click Next. This will then take them to their particular page in the form. Fred will go to page 2, Wilma to page 3, and Betty to page 4. (I’m not sure what happened to Barney!)

On their personal pages, the employees will have the same options. They will enter their employee number and they will state whether they are clocking in or out. Then they will Submit the form.

Some of the code below is similar to the post on Form Validation. You can read more details there.

---

The code

1. function setUpForm() {
2.   //Set up form
3.   const form = FormApp.create('Clocking in');
4.   form.setTitle('Clocking in form');

Line 1: Set up the function.

Line 3: Create the new form.

Line 4: Add a title to the form using setTitle().

---

Page 1

On the first page, we’re going to have a drop-down menu where the employee will select their name before clicking Next.

6.  //Set up first page
7.  const item1 = form.addListItem()
8.                    .setTitle('Employee Name')
9.                    .setRequired(true);

Line 7: We add the drop-down menu using addListItem().

Line 8: Give the menu a title.

Line 9: Make it a required item using setRequired() and passing true in the brackets.

For now, we don’t add the options, as we’re going to need to state which pages those options will take us, and we need to set up the pages first.

11.  const page2 = form.addPageBreakItem()
12.                    .setTitle('Fred');

Line 11: Now, we add a page break at the end of page 1, using addPageBreakItem(). We add this to the variable page2, which we’ll use later on to add the navigation to the different pages.

Line 12: We give the page break the title of the first employee on the list, ‘Fred’, even though this will actually appear on page 2.

On pages 2, 3, and 4 we will have a question asking for their employee number and then a multiple-choice question asking if they are clocking in or out. The code for lines 14 to 28 is the same as we saw in my previous tutorial “Form validation“.

---

Page 2

14.  //Set up second page (Fred)
15.  const item2 = form.addTextItem()
16.                    .setTitle('Employee Number')
17.                    .setRequired(true);

Line 15: Set up the first question, using addTextItem(). This question we’ll assign to the variable item2.

Line 16: Give it a title.

Line 17: Make it a required question.

19.  const textVal2 = FormApp.createTextValidation()
20.                          .setHelpText("Enter your 4 digit employee number.")
21.                          .requireNumberEqualTo(1234)
22.                          .build();
23.  item2.setValidation(textVal2);

Line 19: Now, we create the validation for the above question to check the number entered matches the number for that employee (‘Fred’).

Line 20: Set up the help text.

Line 21: Use the validation method requireNumberEqualTo() and add the number for that employee, in this case is ‘1234’.

Line 22: Build the validation.

Line 23: Add the validation to the question using setValidation() and add the validation textVal2 in the brackets.

Now, we set up the clocking in or out question.

25.  form.addMultipleChoiceItem()
26.     .setTitle('Clocking in or out?')
27.     .setChoiceValues(["Clock in", "Clock out"])
28.     .setRequired(true);

Line 25: We create a multiple-choice question using addMultipleChoiceItem().

Line 26: Give the question a title.

Line 27: Add the options to the question, putting the 2 options in the brackets as an array.

Line 28: Set the question as required.

At the end of this page, we want this employee, Fred, to then submit the form, we don’t want him to click next and go to the following page, which will be Wilma’s. So, we need to set up the page navigation.

30.  const page3 = form.addPageBreakItem()
31.                    .setTitle('Wilma')
32.                    .setGoToPage(FormApp.PageNavigationType.SUBMIT);

Line 30: We set up the page break as we did in line 11, just this time we’ll assign it to the page3 variable.

Line 31: Give it the next employee’s name, ‘Wilma’.

Line 32: Use the setGoToPage() method to set up the page navigation. Then in the brackets, state what type of page navigation you want. Here, we want a Submit button, so we use FormApp.PageNavigationType.SUBMIT.

---

Page 3

We set up page 3 in the same way as page 2, except for the employee number for Wilma is different.

34.  //Set up third page (Wilma)
35.  const item3 = form.addTextItem()
36.                    .setTitle('Employee Number')
37.                    .setRequired(true);
38.
39.  const textVal3 = FormApp.createTextValidation()
40.                          .setHelpText("Enter your 4 digit employee number.")
41.                          .requireNumberEqualTo(3456)
42.                          .build();
43.  item3.setValidation(textVal3);
44.
45. form.addMultipleChoiceItem()
46.     .setTitle('Clocking in or out?')
47.     .setChoiceValues(["Clock in", "Clock out"])
48.     .setRequired(true);
49.
50.  const page4 = form.addPageBreakItem()
51.                    .setTitle('Betty')
52.                    .setGoToPage(FormApp.PageNavigationType.SUBMIT);

---

Page 4

This is the same as pages 2 and 3 except that we don’t need to add the page navigation at the end, as this page is the final page and the Submit button will appear automatically.

54.  //Set up forth page (Betty)
55.  const item4 = form.addTextItem()
56.                    .setTitle('Employee Number')
57.                    .setRequired(true);
58.
59.  const textVal4 = FormApp.createTextValidation()
60.                          .setHelpText("Enter your 4 digit employee number.")
61.                          .requireNumberEqualTo(6789)
62.                          .build();
63.  item4.setValidation(textVal4);
64.
65. form.addMultipleChoiceItem()
66.     .setTitle('Clocking in or out?')
67.     .setChoiceValues(["Clock in", "Clock out"])
68.     .setRequired(true);

Now, we’ve set up the four pages, we need to go back and set up the options for the employee drop-down question on the first page.

70.  //Set up name choices on first page
71.  item1.setChoices([
72.    item1.createChoice("Fred", page2),
73.    item1.createChoice("Wilma", page3),
74.    item1.createChoice("Betty", page4)
75.  ]);
76. }

Line 71: We get the question, stored in item1, and set up the options using setChoices(). We then add the options as array items.

Line 72: The first option, we set up by using createChoice(), then in the brackets add the text you want to show in the drop-down menu and then the page break item you want to navigate to. We stored the second page (Fred’s) in the variable page2 (see line 11).

Line 73: We do the same for the next page (Wilma’s).

Line 74: And finally, for the last page (Betty’s).

Lines 75-76: We close the array and the function.

---

Run the code and you’ll see the new form in your My Drive.

Opening the form, we can see it’s set up the first page with the employee list question.

Clicking on the Employee Name question we can see it’s set up the page navigation options for each name.

On the second page, we can see it’s labelled it ‘Fred’ and set up the employee number and clocking in or out question.

Plus, we can see that it’s also added the Submit form option at the end.

Pages 3 and 4 are like page 2.

---