Using the Single Page Application Wizard

The Single Page Applications Wizard lets you create an initial design framework for an XPage mobile application by using a "wizard" to guide you through the application creation steps after you drag a Single Page Application control onto an XPage.

The wizard panels give you the information to help you create new Application Pages and populate them with various mobile controls. The wizard also lets you specify how to navigate between the Application Pages and generate custom controls for the content of each Application Page.

Getting Started

To launch the wizard, drag a Single Page Application control from the Control Palette to the desired XPage. The first wizard panel appears to help you through the steps of creating your mobile application.

Building a list of multiple application pages

The first panel of the wizard gives you the option to add just a Single Page Application control to the XPage. To do this, select Finish and this will close the wizard.

However, you can also create a list of multiple Application Pages in your application by specifying the name and type of each desired Application Page. The supported page types are:

  • General
  • Application Navigator
  • Document Collection
  • Document Viewer

Subsequent wizard pages guide you through the configuration of each Application Page defined on this Wizard page. The next sections provide more detail on each supported page type.

From this panel you can also choose the Initial Application page. A "star" graphic will indicate the Initial Page. You can select another page by clicking with the mouse or by hitting the SPACE key. If you hover over the "star" a usage tip (for the Initial Application Page) is displayed.

General page type

This page type lets you configure an Application Page with no initial function. Multiple controls can be added to this general Application Page type. By selecting options on the panel, a Page Heading, Back button, Tool Bar and a Tab Bar with Tab Bar Buttons can be added to your page. Multiple Tab Bar Buttons or Tool Bar buttons are specified with a comma separated list.

Application Navigator page type

If you choose this page type, you can specify a list of "links" to other Application Pages. You first configure the basic structure of the Application Page as you would for a General Page and then you are presented with an additional configuration panel. This panel lets you define the list of links that you want on this Application Navigator page.

Document Collection page type

If you choose this page type, you can create an Application Page that will display a list of documents once you have configured a data source. For example, you can configure a Notes View Data Source for the page by following the instructions on the panel. In this example, you would select Domino View from the Select Data Source drop-down list, select the application where the view can be found, and, finally, specify the specific View name of the view that you want as the Data Source.

Once the NSF (application) and View have been chosen you are then presented with the options to configure the control that will display the document collection. For example, a DataView control can be chosen and you can configure the options needed for that control. In this case, these would include Summary column name, Target page, and Infinite Scroll options.

With this page type, you can also enable the target application perform basic Create, Read, Update, and Delete operations. Check boxes are provided to the Main Options Wizard Page to let you add fully operational New, Edit, Save, and Delete action buttons to the target application.

Document Viewer page type

This page type lets you configure an Application Page to view a document in "read-only" mode. As indicated with the previous Document Collection page type, the Data Source must first be configured, only this time a Form must be chosen.

You are then be presented with an options panel to select and configure the document fields that will appear on the Application Page. From this panel, you can alter the field labels as well as the control that will be used to bind the data source for each field. Fields can also be reordered or removed as required.

Additionally, you can also position the Tab Bar above or below the Form Table. Select this by using a radio group on the Main Options Wizard page. Controls can be selected on the Document Viewer fields Wizard page.

With this page type, you can also enable the target application perform basic Create, Read, Update, and Delete operations. Check boxes are provided to the Main Options Wizard Page to let you add fully operational New, Edit, Save, and Delete action buttons to the target application.

Completing the application

When the Finish button is clicked, the wizard closes and the desired type of application is created. If you have chosen the "Create a Custom Control for the content of each Application Page" option on the wizard Start page, then a corresponding custom control is created for each Application Page.