Mobile Forms to Collect Field Data faster

FREE SIGNUP
Features Getting Started Reference

Forms Reference Guide

Getting Started with Forms
Form Fields and Widgets
Configuration Options
Scripting in Forms

Form Fields and Widgets


Question
Question Label with a predefined set of answer boxes, e.g. Yes No N/A
Answer labels can be customized in the Options field. See also Punch Items
Combo Box
A single or multi-value drop-down list with customizable options, or with a list of Upvise data items (Contacts, Companies, Users, Projects, Products, Deals, Asets, Equipment, Forms)
When the Type field is Combo Box (single value selected) or Multiselect Combo Box (multiple values can be selected), the labels are customized in the Options field.
Text Box
a Text input field of type Text Box, Long Text (multi-line text), Phone number, email, Numeric, Decimal, Web Link, Currency
On the mobile, different data input keyboards are used to enforce the various types: Phone number with digits only, etc...
Date Box
Calendar Widget to enter a Date and/or a Time Widget input field, or a Duration widget.
Photo
Take a Photo with the phone camera or display an Image, or make a freehand Drawing on a Picture.
Photo: Enables to take a camera picture on-site with your mobile.
Use the 'Optimize for Document Scanning' option if you are taking pictures of documents to optimize the picture quality and size.
In the web app, Photo is a file uploaded from the local drive.
Drawing: a picture file must be uploaded in the Template Field Edit screen in the web account. Tap on the Picture in the Edit Form screen to open the Freehand drawing editor and draw with your finger on the Picture (mobile only).
Image: Displays an Image in the Form View screen. The Image file must be uploaded in the Template Field Edit screen in the web app.
Check Box
Button
Displays an Action Button in the View Form screen, to create a new Task, Note, Event or Form when user taps on the Button
Action is configured in the Template Field Edit screen on the web.
Section
Displays a section header separator with a grey background
The section title is set in the Label of the Template Edit Field screen
Label
A read-only piece of text which can span multiple lines
Check the 'Visible in PDF' option in the Template Field Edit screen if you want the label to appear in Form View screen and in the PDF Export
Formula
Use this field to perform calculations using values input in the Form. E.g. enter Width and Height in the Form and output the Surface in the Form View.
The formula is calculated using standard Javascript. See Scripting in Forms
Signature
Use this field to validate a Form with a Signature.
Make the field Mandatory to enforce validation. The Signature is captured by writing/drawing on the screen (mobile only).

Template Field Edit screen parameters

Label: the name or title of the field. Appears in the Form View above the input value.

Position: the rank in the order of appearance of the field in the Form View. Position 1: the field appears at the top of the Form, Position 2 appears under Position 1, etc...
In the web interface Edit Template screen, use the 3-dot context menu to change the Position of the field in the list.

Default Value: a preset value for the field, either a literal value or a variable evaluated using Javascript. See Scripting in Forms. In case of a Combo Box field type, specify one of the string values of the Options parameter.

Onchange: javascript code that is executed when the value of the field is changed in the Form Edit screen. Similar to the onchange attribute of an HTML element. See Scripting in Forms

Mandatory: if this box is checked, the field is mandatory, i.e it must be filled in with a value before submitting the Form. When a Form is submitted, a warning is displayed if there are still mandatory fields to be filled in.

Options: defines the list of string values in Combo Boxes and other multivalue lists.
It is formatted as a pipe-separated list of values and labels: "Value1:Label1|Value2:Label2|Value3:Label3".
Example: "1:Yes|0:No|-1:N/A".
You can omit the values and specify only labels: "Yes|No|N/A".
Specify values if you need to refer to a specific item in the Combo Box.
"P" is a reserved value for Punch Items: specifying this value in a Question will prompt creation of a Punch Item.
Pre-defined Color Values: if you specify certain pre-defined values, the answer boxes will be displayed with a pre-defined background color: 0:RED|1:GREEN|2:YELLOW|4:ORANGE. The default color is BLUE.

Editable: this parameter is only relevant for Templates which have a Workflow defined. It specifies in which State(s) of the Workflow a field can be edited: if set to 'Draft' a field cannot be changed once it has been submitted; 'All' means that a field can always be changed in all states of the Workflow; other values mean that the field can only be changed in the specified state.

Fields in Public Forms:
Supported Fields: Section, Combo Box except Upvise data lists, Question, Check Box, Label, Text, LongText
Non-Supported Fields: Photo, Button, Signature, Contact and other Upvise data Combo Boxes will not be displayed in Public Forms.
Javascript code in Default value, Onchange, Execute on Submit, is not supported.

Configuration Options

Forms tab:

Display Web Forms on 2 columns: applies to the web app, for the Form View and Edit screens. Check this option if you have Forms with a very large number of fields, to optimize screen space and reduce scrolling.
When creating new Forms from other apps, display only Templates with same Linked Record: Example in a Contact screen, the Add Form menu will display only templates that are configured with a Linked Record of type Contact
PDF Archive Email: A PDF export of each Form will automatically be sent to this email when it reaches its final state, e.g. Submitted or other states if a Workflow is defined.

User Rights:
Only Administrators can edit Templates: if checked, Managers are not authorized to edit templates. In any case, Standard users can never edit templates.
Standard Users cannot create Forms: if checked, Managers will need to create a Draft Form first and assign it to the Standard user who will then be able to fill in the Form.
Allow to edit Form Owner, Date & Location: applies to the web app only. If checked, a 'Properties' tab appears in the Edit Form, where a manager or admin can edit the Date, Owner and Location of a Form. Otherwise, the Date, Owner and Location set at form creation cannot be modified, neither by admin nor manager.
Manager can edit Form ID: if checked, Managers can edit the ID of a Form. If not, only Administrators can. In any case, Standard users can never. Note that the Form ID is incremented automatically by the system for each new form created. The Next Form ID is stored and can always be changed in the Edit Template Properties tab.

Export PDF tab:

Company Logo: upload an image file to be displayed in top right corner of the PDF
Company Header: enter your company name, address, registration number, etc... The multi-line text is displayed in the top left corner of the PDF
Include Form Caption: if checked, the Form ID, Date and Owner (Created by) are displayed under the form title in the PDF.
Include Form Location: if checked, the Form Address is displayed under the form title in the PDF.

Groups tab: create Groups to classify your Form templates when you have many templates. Set the Group for a Template in the Edit Template Properties tab.

Custom Dashboard tab: see Scripting in Forms

Scripting in Forms

Forms templates and Fields can be customized in various ways using Javascript code.

In addition to the standard Javascript API, you can use the UpviseJS framework API. See Getting Started with the Upvise Platform.
In your code, you also have access to:

- Variables for each Field. The variable name is the Field ID (as displayed in the Template Field Edit screen), and the variable is initialized with the value submitted in the Form. Example: var F1 = 12; var F2 = 'Blue';...

- The form object variable representing the Form and each of its properties:
form.owner: name of the User who is the Owner of the Form, i.e either has created or has been assigned the Form
form.date: date of creation of the Form in Unix time (number of ms since 1/1/1970)
form.status: macro values DRAFT, SUBMITTED or REJECTED
form.geo and form.address: respectively 'latitude,longitude' geo-coordinates and address of location at form creation
form.linkedtable and form.linkedid: name and id of Linked record if available, e.g. linkedtable: "Contacts.contacts" "Contacts.companies" "Calendar.events" "Projects.projects" "Sales.opportunities" (for a Deal) "Tasks.tasks" "Jobs.jobs"

- The link object variable representing the Linked Record and each of its properties, e.g a Contact or Company or Event or Project or Deal or Task or Job.
Tip: to get the list of properties of an object, goto the web app Import menu and download the CSV or xlsx sample file. The header names in each column are the names of the object properties. Example for a Contact: link.name link.email link.mobile link.phone link.street link.zipcode link.city link.state link.country, etc...
Important: If there is no Linked Record, then the link object is an empty object with empty or null properties.

Execute on Submit of Form
Description: code that is executed when a Form is submitted. Can be used to validate a form or create new items with values input in the Form. Note that this does not apply to workflow based templates. See the next section.
Where to enter code: Edit Template in web account / Submit tab.
Syntax: The code must return true or 1 for the form to be submitted. If return value is 0, form status is not updated to SUBMITTED
Examples
Validate Contact Email on Form Submission:
var email = F1.trim().toLowerCase();
            var level = F2;
            var count = Query.count("Contacts.contacts", "email=" + esc(email));
            if (count > 0) App.alert('Email already exists!');
            else {
                var id = Query.insert("Contacts.contacts", {name:email, email:email, creationdate: Date.now() });
                CustomFields.values = CustomFields.loadValues();
                CustomFields._update("Contacts.contacts", id, "F3", level);
                App.alert('Contact inserted!');
            }
            return 1;
Direct user to a web page after a Form is submitted:
App.web('http://www.google.com');
            return 1

Execute on Load of State in Workflow-based Forms
Description: code that is executed when a Form State is reached. Can be used to create new items with values input in the Form. In this case, the Execute on Submit does not apply.
Where to enter code: Edit Template in web account / Workflow tab / Edit State
Syntax: The code must return true or 1 for the form state to be submitted. If return value is 0, form state is not updated to the next state

Formula field
Description: use to perform calculations using values input in the Form. E.g. enter Width and Height in the Form and output the Surface in the Form View.
Where to enter code: Template Field Edit in web account / Script field
Syntax: any valid Javascript. You can prefix the code with a = and define a function.
Example:
Field F1 is a Width, F2 is a Height. Formula field calculates the Surface:
(F2*F1).toFixed(2) + ' square meters'
Field F1 is a Width, F2 is a Height. Formula field calculates the Surface using a function:
=computeSurface();
 function computeSurface() {
    return (F2*F1).toFixed(2) + ' square meters'
}
Default Value of a Field:
Description: a preset value for the field, either a literal value or a variable evaluated using Javascript.
Where to enter code: Template Field Edit in web account / Default Value field
Syntax: start with a =.
Examples: set a Date field to Today's date; set an Address with a linked Contact's address
=Date.today();
=(link!=null) ? link.street + link.city : "";

Onchange attribute of a Field:
Description: code that is executed when the value of the field is changed in the Form Edit screen.
Where to enter code: Template Field Edit in web account / Onchange field
Syntax: you can access the new value of the field in the 'value' variable. The 'formid' variable contains the unique identifier of the current form. The code must return true or 1 for the field value to be updated.

Example: validation of a selected value in a Combo box
if (value == 'Blue') { App.alert('Wrong color selected');return false;} else {return true;}
Syntax: Use the _valueObj global variable to update one or more field values. _valueObj is the object corresponding to the JSON representation of the form field values.

Example: update the value of fields F2 and F3 with the new field value
 _valueObj['F2'] = value + ' copied to F2';
 _valueObj['F3'] = value + ' copied to F3';
 var values = JSON.stringify(_valueObj);
Query.updateId("Forms.forms", formid, 'value', values);
Example: Change the end date field F2 based on the value of start date field F1:
var d = new Date(new Number(value));
var value2 = d.setFullYear(d.getFullYear()+1);
_valueObj['F1'] = value;
_valueObj['F2'] = value2;
var values = JSON.stringify(_valueObj);
Query.updateId("Forms.forms", formid, 'value', values);
History.reload();
return 0;

Custom Dashboards:
Description: in the Forms web app, the Dashboard displayed in the main screen and Dashboard tab in each of the Template sections can be customized using Javacsript
Where to enter code: in the Options menu / Custom Dashboard tab for the Forms main screen; and in the Configuration / Templates menu / Dashboard tab for each template
Syntax: replace the Forms.viewDashboard and Report.writeDashboard functions in place. Draw charts with the Chart object
Examples:
Replace the Dashboard in a Template section:
Report.writeDashboard = function(templateid) {
            var template = Query.selectId("Forms.templates", templateid);
            List.addItemTitle(template.name + " Dashboard");
         }

Below is the code for the existing Forms.viewDashboard function, which you can customize:
    Forms.viewDashboard = function (tab) {
        var groupid = null;
        Toolbar.addTab("Overview", "Forms.viewDashboard()");
        Toolbar.addTab("By Staff", "Forms.viewDashboard(1)");
        Toolbar.addTab("By Template", "Forms.viewDashboard(2)");
        if (tab == null) {
            var where = (groupid != null) ? "groupid={groupid}" : null;
            showDateChart(where);
        } else if (tab == 1) {
            Forms.writeDashboardStaff();
        } else if (tab == 2) {
            Forms.writeTemplateChart();
        }
        List.show();
    }

    function showDateChart(where) {
        var startdate = Date.addDays(Date.weekStart(), -8*7);
        var map = new HashMap();
        for (var i = 0; i < 8; i++) {
            var date = Date.addDays(startdate, i*7);
            map.set(date, 0);
        }
        var where2 = "date>={startdate}";
        if (where != null) where2 += " AND " + where;
        var forms = Query.select("Forms.forms", "id", where2);
        for (var i = 0; i < forms.length; i++) {
            var form = forms[i];
            var date = Date.weekStart(form.date);
            map.increment(date, 1);
        }
        Chart.init();
        Chart.setTitle("Forms created by week");
        Chart.addColumn('string');
        Chart.addColumn('number');
        for (var i = 0; i < map.keys.length; i++) {
            var date = map.keys[i];
            var count = map.get(date);
            Chart.addRow(Format.week(date), count);
        }
        Chart.show("bar");
    }

You will find more template samples on this page.
Please feel free to contact us for help and advice on how to code your javascript statements using the UpviseJS Framework.

Make your business mobile with Upvise

FREE SIGNUP



Get it on Google Play Download it on AppStore Download it on Microsoft Store