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

All Web Template Wizards in Connect 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 and 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).

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 detail 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.
3. Click Next and make adjustments to the initial settings.
   • 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.
   • Background color: Enter a valid hexadecimal color code for the page background color (see w3school's color picker).
   • Enter a valid hexadecimal color code (see w3school's color picker) for the background color of the navigation bar at the top and another 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; see COTG Elements and Using COTG Elements.

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 Variable Data and Personalizing content.

• Last Topic Update: 24/01/2017 09:32
• Last Published: 7/6/2017 : 9:48 AM