Testing a Capture OnTheGo Template

A Capture OnTheGo (COTG) template will be used to create a form, that can be downloaded, filled out and submitted using the COTG app. Before starting to actually use the template, you will want to make sure that it produces a form that looks good and functions as expected. This topic explains how to preview the form, and how to submit data and preview the submitted data.

Previewing the form

On a PC

A Capture OnTheGo template can be previewed on a PC in two different ways. Note that Capture OnTheGo form elements will not be functional unless they are sent to a device.

  • Within PlanetPress Connect Designer. You can open the Preview tab or the Live tab in the Workspace. This displays the output HTML along with any variable data being added. On the Live tab you can even fill out the form and submit it, and if the "Get Job Data File on Submit" option is enabled (by clicking the toolbar button of the same name), the Designer will receive an XML with the submitted data (see Get Job Data File on Submit ). However, remember that COTG Form elements are only functional in the COTG app, so they won't submit any data.
  • Within the default browser on your computer. Click the Preview HTML button in the toolbar. This opens your operating system’s default browser and displays the form in that context.
    In the Designer, you can test the responsiveness of a form using the Responsive Design button at the top right of the workspace.
    Some browsers also let you test the responsiveness of a form. In Firefox, for example, select Developer > Responsive Design to view a form in different sizes.

Previewing a COTG Template in the app

A COTG Template cannot only be previewed on a PC; it can also be previewed on a mobile device. This will show the template within the Capture OnTheGo mobile application, and all widgets will be functional.

In order to test or use any Capture OnTheGo features you need to have a Repository account (also called a COTG Server account or the Repository ID). You can get a trial account for this purpose; please see this page for more details: http://www.captureonthego.com/en/promotion/.

Once you have your Repository ID and Password, you also need to create a user account:

  1. Go to the Capture OnTheGo Repository Login: https://config-us.captureonthego.com/.
  2. Login with your Repository ID and Password.
  3. Go to the Users page.
  4. Add a new user. The user name should be in the form of an email address.

Next, make sure that the Capture OnTheGo mobile application is installed and that it is logged on as a known user of the Capture OnTheGo Repository.

Now, with your Capture OnTheGo template open in the Connect Designer module, click on the Send COTG Test… button in the toolbar.

Enter the appropriate information in the Send Test dialog (see Send COTG Test).

Click Finish to send the document. It should automatically appear in the app's Repository for 4 days from the moment it is sent. Once downloaded it remains accessible in the app's Library for 2 days.

To manually delete a test template from the app's Library, swipe it to the left.

Submitting and previewing data

When you hit the Submit button in a template in the Designer (on the Live tab), the submitted data can be sent back to the Designer in the form of an XML file (see below). The advantage of this is that you can immediately start creating a data mapping configuration and use the data in a template.

Data submitted from the Capture OnTheGo app can be sent to you in the form of an email or saved via a Workflow configuration. Both options are explained below.

The Form's validation should ensure that the submitted data is valid. Set the Form's validation method to jQuery and set the requirements and a message per field (see Changing a Form's validation method and How to make COTG elements required).

Get Job Data File on Submit

It is possible to test a COTG Form in the Designer and get access to an XML file that contains the submitted data, without having a Workflow configuration to handle the data.

This option requires that:

  • Workflow has been installed on the local machine, and the Workflow HTTP/Soap Service has been started. To do this, in the Workflow menu, click Tools > Service Console, then right-click HTTP/Soap Server and start it.
  • In the Designer menu Window > Preferences > Web, the Workflow URL has been set to the correct host. The default is http://127.0.0.1:8080/_getSampleFormData_. This points to an internal process of the Workflow component running at that host.

If these conditions are met, you can get the XML file as follows:

  1. Open the Form in the Designer, toggle to Live mode and fill out the form. Click the Add Dummy Data button (found on the toolbar and only available in the Live view) to populate empty form fields with dummy data. This adds dummy data to standard HTML form inputs as well as COTG inputs like the camera and signature widgets. Inputs that already contain data are left untouched. For a list of dummy data values, see the table below.
  2. Click the Get Job Data File on submit toolbar button. This replaces the default form submit action and will send the form data to the ​​​Workflow's ​HTTP Service (which needs to be running in the background).
    Workflow's HTTP Service must be running, but not necessarily the Workflow Service itself.
  3. Hit the Submit button. Now the data file will be sent directly to the Designer. Once the Job Data File is received by the Connect server, a dialog appears asking where to store it.
  4. Save the XML file to disk. You can view it, create or update a data mapping configuration for it (see Data mapping configurations), and insert the data in a template, using the data mapping configuration (see Personalizing content).
Checkboxes and Radio buttons that are unchecked will not be submitted to the job data. This is standard behavior in HTML. One can work around that by adding a hidden field before the respective checkbox with the same name and for example value 0 (see Using COTG Elements).
Standard For​​​​m input dummy data values
Input Dummy Value
Text "Lorem ipsum dolor sit amet"
Textarea (multi-line text field) "Lorem ipsum dolor sit amet"
Email "pparker@localhost.com"
Number random integer
Password 1234567890
URL "http://www.localhost.com"

Checkbox

Checkboxes in Dynamic Tables and in the Fields Table control (time sheet) are checked.

Radio button

Selects the first radio button that is not disabled in each radio group. The radio group will be left untouched when there is a selected radio button.
​Capture On The Go input dummy data values
Input Dummy Value
Signature Receives SVG signature data and the onscreen presentation of that data.
Camera

A dummy foto is added, and a (SVG) annotation if that option is set for the widget.
Note that the script doesn't look at the PNG/JPG or resolution options, the only option it considers is the annotation option.
Geolocation widget A geo location
Date Picker (formatted and standard) Today's date*
TimePicker (formatted and standard) Now*

Device Info widget

"{"available":true,"platform":"Android","version":"9.9.9","uuid":"17206724b8077491","cordova":"3.6.4","model":"Connect Designer"}"

User Account widget

"user@localhost.com"

Locale widget

en-US

* Note that the formatted date and time can be different from the values that the COTG app provides. In the COTG app the formatted date comes from the COTG API, and the formatted date and time normally depend on the locale/region settings on the mobile device. The ISO date and time should be the same as when using the COTG app.

Get submitted data via email

Getting submitted data via email requires the Form's action to be set to a test URL that contains an API Key. You can obtain an API Key as follows.

  1. Go to https://learn.objectiflune.com/.
  2. Create an account, or log in to your account.
  3. Go to your Profile Page, and click the API Key link.

Now, when creating or editing a COTG Form, you can use the API Key in the Form's action:

  1. Select the Form (see Selecting an element).
  2. On the Attributes pane, paste the following URL in the action field: https://learn.objectiflune.com/services/cotg-debug?__ol__auth_key={{APIKEY}}.
  3. Replace {{APIKEY}} by your API Key.

When you submit the form in the COTG app (see Previewing a COTG Template in the app), the debug service will compose an HTML email that contains the form element names and the submitted values. Image files, like pictures and signatures, are added to the email as attachments. The email will be sent to the email address that you provided via your Learn profile.

For a more detailed description of this test procedure, see this how-to: Testing a COTG template.

Get submitted data via Workflow

Eventually, when a user submits a Capture OnTheGo Form, the data are received by the Workflow HTTP Server Input task (see Workflow Help: HTTP Server Input) that has the same HTTP action as the one specified in the Form's action (see COTG Forms). The Workflow configuration should then handle the submitted data. But even if it doesn't, when no other tasks are present in that Workflow configuration, Workflow can output an XML file that contains the submitted data and save it in a location specified for the Send To Folder plugin in Workflow.
This XML file contains the actual data submitted by all Form elements, including COTG elements, such as a signature or barcode.