Forms Authoring

Arrivy provides a full-featured authoring environment for Arrivy forms, integrated into the Arrivy web app. Arrivy Forms can be found under the Settings tab at Settings > Forms. Clicking the Add New Form button or clicking on a form title in Settings drops you into the Forms Authoring environment. Here, the Form editor takes over the entire screen width. The right panel is the layout canvas and the left panel contains a tabbed interface with three regions:

  • Form Info: Contains descriptive information and other metadata
  • +Add Fields: Contains all the components that can be added to a screen/page
  • Edit: Show editing interface for the particular component highlighted on the canvas
An overview of the forms environment

An overview of the forms environment

Form Info

The Form Info tab provides fields for specifying the name and description for the form. This is the name that appears in the Settings list.

The Form Info tab

The Form Info tab

Add Fields

The Add Fields tab contains an assortment of all the controls that can be added to a form, categorized appropriately. The Add Fields tab is automatically shown if there is no selection on the layout canvas, or if it has been explicitly chosen. You can drag-and-drop these components onto the canvas. When moved to the canvas, the item remains selected and the sidebar changes to the Edit tab, showing the appropriate editor for the content type.

The Add Fields tab

The Add Fields tab

The controls available in Add Fields are:

  • Text, Numbers, Date, Time
    • Rich Text: Used to display headlines or paragraph text
    • Text Input: Used to collect single or multi-line text
    • Number: Used to input numerical information
    • Date: Collects/displays dates
    • Time: Shows time data
    • Calculation: Does calculations between multiple operators such as form fields, constants and dynamic fields
  • Images, Signatures
    • Image: Will display an image within a form
    • Signature: Used to collect and display a signature or initials within a form
  • Controls
    • Dropdown: Creates a dropdown control with sets of key/value pairs
    • Checkbox: Creates a single or series of checkboxes
  • Layout
    • Table: Lets the user create a table of static text or numerical values
    • Line break: Inserts a line break within a form
    • Horizontal rule: Inserts a line in a form
    • Screen break: Will break a form into multiple screens with an attendant navigation control

Layout and Controls

You can add forms controls to the canvas using drag-and-drop. Additionally, each controls has three widgets that become visible when moving the cursor over it’s top right corner: Delete, Duplicate and Move. Click Delete or Duplicate to effect that operation and click-and-drag the move icon to rearrange the controls.

Widgets to delete, duplication and move a control

Widgets to delete, duplication and move a control

There is also a resize box in the lower right corner of each control. This is an intelligent resize and will snap-to various pre-programmed ratios.

Form controls have an intelligent resize

Form controls have an intelligent resize

Preview

The Preview button sits next to the Cancel button in the top right corner of the screen. Preview mode lets you gauge the look and feel of the form as crew and customers will experience it–complete with navigation. The two icons in the upper left corner of the preview let you adjust the aspect ration to simulate tablets or phones. No field editing can be done in Preview mode. Click the  Exit Preview button to return to Edit mode.

Form Preview mode

Form Preview mode

Editing Fields

Clicking on a field within the canvas will bring up the edit experience for that field in the left sidebar. Most of the editing controls are self-explanatory. However, there are some common elements worth noting.

Form editing controls in the left sidebar

Form editing controls in the left sidebar

Update Button

You must click the Update button to update the canvas for any changes made in the sidebar.

Field Labels

The field label is the (optional) text that appears just above the top-left side of the input field.

Values

Most of the controls have input fields that can either be blank or filled in with defaults. Those controls can pull their default values from one of three sources:

  1. Default values specified in the forms interface
  2. Values pulled from extra fields specified in the Task
  3. Task or company fields (sometimes called, “dynamic fields”) such as company name, customer address, etc

The source is specified by using the dropdown control in the Value settings (as shown below).

Default values can be pulled from a variety of sources

Default values can be pulled from a variety of sources

Text, Numbers, Date, Time

The Rich Text field

The Rich Text field can be used to add static text–both headlines and paragraph text–to a document. Select the text style from the dropdown menu. One of the unique characteristics of the Rich Text field is that it can use text information from Task data or extra fields attached to the Task. In the example below, two Task fields are used, {{company_mobile_number}} and {{company_phone}}. These fields can be added to the text content by clicking on the appropriate field in the list below the edit box.

Input Fields (Text Input, Number, Date, Time)

The Input fields–text, number, date & time–are similar in their layout and use. Each has a field label and value controls. The principle difference is in their formatting controls, which are appropriate for each of the different data types.

Calculations

Some fields should be the result of calculations between fields and other fields (or constants). For example, we may need a field that calculates Sales Tax (i.e. fieldx * 0.1) and one that calculates a total (i.e. fieldx + sales_tax). The Calculation field supports add, subtract, multiply and divide for its operators. The operands can be either numbers or time (in order to calculate durations).

To create a calculation, drag a Calculation field onto the canvas; select the calculation type (number or time) and click the Edit Formula button. A dialog with a number pad, list of operators and field selection appears. You can choose fields from the form using Reference names to be operands, or extra fields from the Task. You can also type in constants using the number pad. The resulting formula appears at the bottom of the dialog.

Click Save Changes to exit the dialog and then Update to save the formula.

The Calculation field

The Calculation field

Images & Signatures

The Image and Signature fields let you include images (such as a company logo) and collect signatures/initials within an Arrivy form. The Image field allows you to either select an image to use, or choose the company image used within Arrivy. Both the Image and Signature fields let you set the dimensions of the item on the canvas.

Dropdown & Checkbox Controls

The Dropdown and Checkbox controls let you add interactive controls to a page. Dropdowns are, essentially, label/value pairs where labels are the strings displayed as the dropdown choices and values are what is returned when a given label is selected. Those values can be set to be either numbers or values. Additionally, you can either enter labels and values explicitly, as part of the control (as shown below) or have them pulled from extra fields specified as part of Task Details.

The Checkbox control allows you to create a series of checkboxes or buttons that have an on/off (checked/unchecked) state. You can use the Checked? checkbox within the control to set the default state of each checkbox.

Table, Line Break, Horizontal Rule, Screen Break

The Line Break and Horizontal Rule fields are used as layout tools–to separate sections of a form or highlight information. The Screen Break component allows you to break a form into multiple screens when viewed on a mobile device. Each screen can have its own title and a navigation control (with forward/back arrows) is available at the top of the screen.

Advanced Features & Conditionals

The Advanced Panel

All of the Arrivy Forms controls have an Advanced panel that contains several options that will be of use in certain situations:

  1. Is Required marks the field as one that must be filled out. A form cannot be marked complete if an Is Required field is not filled out.
  2. Customer can edit: Certain forms–such as a credit card authorization form–are sent to a customer in advance of the service appointment. Thus, the customer will fill this form out on their own computer or mobile device. Marking a field as Customer can edit unlocks that field for a customer who accesses the form from their own device. All other fields will be locked against customer change.
  3. Reference name is used when the value in the field needs to be used somewhere else in the form. For example, if the field represented the labor hours and you multiply it by the labor rate to get total cost, you might use the reference name, “labor_hours” for this field. Then, you could create a calculation field that does the appropriate calculation using this reference.
The Advanced panel

The Advanced panel

Conditionals

Frequently, forms contain options that call for certain information to be hidden/shown or for certain values to be used instead of others. For example, in a Bill of Lading form, the insurance value is set to a certain figure depending on whether the customer chooses option “a”or “b” for the type of insurance. You can use conditionals to hide or show particular information, or to set the field to a particular value (depending on the value of other fields on the form).

To create a conditional, open the Conditional panel and click the New Condition button. The condition acts on the field that it is attached to. So, the first dropdown, When the condition is true, do this, allows you to either show the field or set the field value to a particular number. In the case of the example below, when the dropdown control insurance_options has the first option selected, the value of the current field is set to “10.”

You can create multiple conditions inside the New Conditional dialog, which affects whether this particular condition is true or false. When you implement multiple conditions inside the dialog, the result is always determined by the When the condition is true, do this control.

Additionally, you can create multiple conditions outside the dialog. This allows you to have multiple end results, as each condition can have a different When the condition is true, do this entry. This allows you to show/hide or establish different values for the field. The conditions are all listed in the Conditionals panel.

The conditionals panel

The conditionals panel

Next: Forms and Tasks >