Capture OnTheGo template wizards

With the Designer you can create Capture OnTheGo (COTG) templates. COTG templates are used to generate forms for the Capture OnTheGo mobile application. For more information about this application, see the website: Capture OnTheGo.

A Capture OnTheGo Form is actually just a Web Form, that you could add without a wizard, but the COTG Template Wizards include the appropriate JavaScript files for the Capture OnTheGo app, and styles to create user-friendly, responsive forms. They are built upon the Foundation framework.

Foundation

With the exception of the most basic one, all Web Template Wizards in the Designer make use of the Zurb Foundation front-end framework. A front-end framework is a collection of HTML, CSS, and JavaScript files to build upon. Foundation is a responsive framework: it uses CSS media queries and a mobile-first approach, so that websites built upon Foundation look good and function well on multiple devices including desktop and laptop computers, tablets, and mobile phones. Foundation is tested across many browsers and devices, and works back as far as IE9 and Android 2. See http://foundation.zurb.com/learn/about.html.

For more information about the use of Foundation in the Designer, see Using Foundation.

After creating a COTG template, the other contexts can be added, as well as other sections (see Adding a context and Adding a Web page).

Tip: If the COTG Form replaces a paper form, it can be tempting to stick to the original layout. Although that may increase the recognizability, it is better to give priority to the user-friendliness of the form. Keep in mind that the COTG form will be used on a device and don't miss the chance to make it as user-friendly as possible. See Designing a COTG Template.

Creating a COTG template using a wizard

To create a COTG template with a template wizard:

1. • In the Welcome screen that appears after startup and when you click the Home icon at the top right, choose Browse Template Wizards. Scroll down until you see the Capture OnTheGo Starter Template Wizards.

   • Alternatively, on the File menu, click New, expand the Template folder, and then expand the Capture OnTheGo Starter folder.

2. Select a template. There are 8 types of Web Template Wizards:

   • Blank. The Blank COTG Template has some basic design and the appropriate form, but no actual form or COTG elements.

   • Bill of Lading. The Bill of Lading Template is a transactional template that includes a Dynamic Table with a checkmark on each line, along with Signature and Date COTG elements. Use this wizard as a way to quickly start any new Zurb Foundation based form for Capture OnTheGo.

   • Event Registration. The Event Registration Template is a generic registration form asking for name, phone, email, etc.

   • Event Feedback. The Event Feedback Template is a questionnaire containing different questions used to rate an experience.

   • Membership Application. The Membership Application Template is a signed generic request form that can be used for memberships such as gyms, clubs, etc.

   • Patient Intake. The Patient Intake Template is a generic medical questionnaire that could potentially be used as a base for insurance or clinic form.

   • Kitchen Sink. The Kitchen Sink Template includes a wide range of basic form and COTG form elements demonstrating various possibilities of the software.

   • Time Sheet. The Time Sheet Template is a single page application used to add time entries to a list. This template demonstrates the dynamic addition of lines within a COTG template, as the Add button creates a new time entry. There is no limit to the number of entries in a single page. Submitted data are grouped using arrays (see Grouping data using arrays).

3. Click Next and make adjustments to the settings. The wizard remembers the settings that were last used for a COTG template.

   • Create Off-Canvas navigation menu: an Off-Canvas menu is a Foundation component that lets you navigate between level 4 headings (<h4>) in the form. Check this option to add the menu automatically.

   • Submit URL: enter the URL where the form data should be sent. The URL should be a server-side script that can accept COTG Form data.

   • The Title and the Logo that you choose will be displayed at the top of the Form.

   • Colors: Click the colored square to open the Color Picker dialog (see Color Picker) and pick a color, or enter a hexadecimal color code (see w3school's color picker) for the page background color.
     Do the same for the background color of the navigation bar at the top and for the buttons on the Form.

4. Click Next to go to the next settings page if there is one.

5. Click Finish to create the template.

The Wizard creates:

• A Web context with one web page template (also called a section) in it. The web page contains an 'off-canvas' Div element, Header, a Section and a Footer element with dummy text, and depending on the type of web page, a navigation bar, button and/or Form elements.
• Style sheets and JavaScript files related to the COTG form itself and others related to the Foundation framework (see above). The style sheets can be found in the Stylesheets folder on the Resources pane. The JavaScript files are located in the JavaScript folder on the Resources pane.
• A collection of snippets in the Snippets folder on the Resources pane. The snippets contain ready-to-use parts to build the web form. Double-click to open them. See Snippets and Loading a snippet via a script for information about using Snippets.

The Wizard opens the Web section, so that you can fill the Capture OnTheGo form.

6. Make sure to set the action and method of the form: select the form and then enter the action and method on the Attributes pane.

The action of a Capture OnTheGo form should specify the Workflow HTTP Server Input task that receives and handles the submitted data. The action will look like this: http://127.0.0.1:8080/action (8080 is Workflow's default port number; 'action' should be replaced by the HTTP action of that particular HTTP Server Input task).

The method of a Capture OnTheGo form should be POST to ensure that it doesn't hit a data limit when submitting the form. The GET method adds the data to the URL, and the length of a URL is limited to 2048 characters. Especially forms containing one or more Camera inputs may produce a voluminous data stream that doesn't fit in the URL. GET also leaves data trails in log files, which raises privacy concerns. Therefore POST is the preferred method to use.

Filling a COTG template

Before inserting elements in a COTG Form, have the design ready; see Designing a COTG Template.

In a Capture OnTheGo form, you can use special Capture OnTheGo Form elements, such as a Signature and a Barcode Scanner element. For a description of all COTG elements, see: COTG Elements. To learn how to use them, see Using COTG Elements.

Tip: If you have started creating your Capture OnTheGo template using a COTG Template Wizard, you can find ready-made elements in the Snippets folder on the Resources pane.

Foundation, the framework added by the COTG template wizards, comes with a series of features that can be very useful in COTG forms; see Using Foundation.

Naturally, Web Form elements can also be used on COTG Forms (see Forms and Form Elements) as well as text, images and other elements (see Content elements).

Capture OnTheGo templates can be personalized just like any other type of template; see Personalizing content.

Tip: Use the Outline pane at the left to see which elements are present in the template and to select an element.

Use the Attributes pane at the right to see the current element's ID, class and some other properties.

Use the Styles pane next to the Attributes pane to see which styles are applied to the currently selected element.

Tip: Click the Edges button on the toolbar temporarily adds a frame to certain elements on the Design tab. These will not Print or output.

Tip: If you have started creating your Capture OnTheGo template using a COTG Template Wizard, you can find ready-made elements in the Snippets folder on the Resources pane.