Navigation Basics

Every Form has a unique URL based on its name. The URL of a Form follows the pattern: <domain name>/<webapp name>/<form name>.eb, for example, www.myDomain.com/ebase/logon.eb.

Navigating to a Form opens its first Page. A Form’s first Page can be configured in the Form Properties dialog, opened by clicking on the Form Properties button in the Form Editor’s toolbar.

A Page in a Form can be navigated to via the Verj.io JavaScript API forms.gotoPage(Page) function.

This script could be added to the On Click Event of a Button or Hyperlink Control to navigate to the Page when clicked. To dynamically decide to go to a different Page in a Form instead of its first Page, gotoPage(…) can be executed in the Form’s beforeForm Event.

Pages in other Forms cannot be directly navigated to in this way, first you must navigate to the Form. The gotoForm(Form) API function works in a similar way to the gotoPage() function, changing to the first Page of the specified Form rather than to a Page in the current Form.

As each Form has its own URL a hyperlink can be used to navigate to a Form by setting its External URL property to <form name>.eb:

The URL of a Hyperlink Control can also be dynamically changed in scripts using the controls interface:

Steps

If you haven't already, complete the Steps in the Developing with Themes Tutorial before starting these Steps.

Switch to your verjioTutorials Workspace if you haven’t already:

Click File > Switch Workspace.
Select verjioTutorials
Click OK.

Create a new Project called verjioBasics, if it doesn't already exist:

Click New .
Select Project.
Select the Create Project tab.
Choose Empty Project.
Name your project verjioBasics.
Click Finish.

Create a Form called navigationBasics in a navigationBasics Folder in this Project:

Right-click on the verjioBasics Project and select New > Folder.
Name the Folder navigationBasics.
Right-click on the navigationBasics Folder and select New > Form.
Name the Form navigationBasics.
Click OK.

Add a second Page to navigationBasics:

In the Pages view, click New .
Name the new page Page_2.

Create a main section for Page_1 with a button to navigate to Page_2:

Select Page_1 from the Pages View.
Add a Main by dragging it from the Palette into the Outline View as a child of the Page_1 Page Control.
Add a Bootstrap Container as a child of the Main.
Add a Heading as a child of the Main Bootstrap Container and write Form 1, Page 1 in the Create New Control dialog.
Add a Button underneath the Heading and write Goto Page 2 in the Create New Control dialog.

At this point, your Outline view should look like this:

Add an event to navigate to Page_2 when the Goto Page 2 button is clicked:

Select the Page_1 from the Pages view.
Right-click on the Goto Page 2 Button Control and select Events.
In the Events dialog, click Create New Script and name it gotoPage2.
In the new script paste the following code:
```
form.gotoPage(pages.Page_2);
```
Save the script.

Create a main section for Page_2 with a button to navigate (as yet uncreated Form): navigationBasics2

Select Page_2 from the Pages View in navigationBasics.
Add a Main by dragging it from the Palette into the Outline View as a child of the Page_2 Page Control.
Add a Bootstrap Container as a child of the Main.
Add a Heading as a child of the Main Bootstrap Container and write Form 1, Page 2 in the Create New Control dialog.
Add a Hyperlink underneath the Heading and write To Form 2 in the Create New Control dialog.

At this point, your Outline view should look like this:

Add an URL to the To Form 2 hyperlink to navigate to Form navigationBasics2

Select the Page_2 from the Pages view in navigationBasics.
Click on the To Form 2 Hyperlink Control to select it.
In the Properties View tick the Link is external property.
In the Properties View write navigationBasics2.eb in the External URL property.

The Properties View should look like this:

Create a second Form called navigationBasics2 in the navigationBasics Folder:

Right click on the navigationBasics Folder and select New > Form.
Name the Form navigationBasics2.
Click OK.

Create a main section for Page_1 with a hyperlink to navigate back to Form navigationBasics

Select Page_1 from the Pages View in navigationBasics2.
Add a Main by dragging it from the Palette into the Outline View as a child of the Page_1 Page Control.
Add a Bootstrap Container as a child of the Main.
Add a Heading as a child of the Main Bootstrap Container and write Form 2, Page 1 in the Create New Control dialog.
Add a Hyperlink underneath the Heading and write Goto Form 1 in the Create New Control dialog.

At this point, your Outline view should look like this:

Add an event to navigate to Form navigationBasics when the Goto Form 1 hyperlink is clicked:

Select the Page_1 from the Pages view in navigationBasics2.
Click on the Goto Form 1 Hyperlink Control to select it.
In the Properties View change the Control name property to toForm1.
In the Properties View click on the On Click property button.
In the resulting Configure - on click event dialog, click Create New Script and name it hyperlinkToForm1.

In the new script paste the following code:

controls.toForm1.useExternalURL = true;
controls.toForm1.href = "navigationBasics.eb";

Save the script.

Test the Form in your browser:

Press the Save All button in the main toolbar.
Click the Test button in the main toolbar and press Submit in the resulting dialog.
Navigate around the pages by clicking on the buttons and hyperlinks we have created.