Put simply, Controls are the tools you use to create your form. They all have different capabilities allowing you to create robust mobile forms. Controls are organized into 4 different categories in the left pane:
Basic: Textbox, Rich Text, Checkbox, Checkbox List, Radio Button, Dropdown, Date, Time Picker
Advanced: Camera, Signature, Annotation, Location, Timestamp, Barcode, Repeating Photo, Zendesk
Display & Layout: Title & Logo, Display Picture, Display Value, Divider Line
Buttons: Switch Page, Query, Submit, Custom Button
(Click on each of the category drop downs to expand it and see the Controls beneath it.)
Click a control in the left pane to add it to the bottom of your form in the center pane. After adding a control, you then click on the control in the center pane to view and edit its Properties (e.g. font size; image placement; color etc.) and Logic (business logic--e.g. default values and calculations; rules etc.) in the left pane.
(Pictured: Left - Control Tabs, Right - Control Properties)
When a change is made in the Properties view, you need to click the Apply button to see the change reflected in the center pane.
Duplicate, Delete and Drag Controls.
Notice that when you click on a control in the center pane it displays 3 icons in the upper right corner of the control frame:
(Pictured: Red border highlighting Copy, Trash, and Grab/Move icons)
The 1st icon will duplicate your control and its formatting, which is handy if your form needs several of the same controls with similar settings.
When you click on the trash can icon, it deletes the control from the center pane. This action cannot be undone. However, if you accidentally delete a control you can Close the form without pressing Save and Publish, then re-open it from the last time it was saved. Your deleted control should be there when you reopen your form. Note that deleting a control does not delete its associated Data field from the right pane. Best practice is to delete that field also.
The 3rd icon allows you to Click and Hold the control to drag the it into a different position above or below in the center pane.
These are the simple kinds of controls you would expect to see in any form.
The Textbox control allows mobile users to type in any kind of information from a keyboard. Whatever is typed into the textbox will be the value of the associated data field.
To avoid typing on a device, we recommend you opt instead for a control that lets the user simply choose an option. Checkboxes and Dropdown lists, for example, are much more efficient to use on a mobile device.
(Pictured: Textbox control and Properties)
Rich Text (HTML)
The Rich Text control provides an easy way to present instructions and other information as formatted text. It also allows you to add your own HTML code for more advanced customization. After you add the Rich Text control to your form, click on it in the center pane. In the left pane, you will see where you can add instructions or add HTML.
A Checkbox consists of a label and a small box that can be selected or deselected. You can customize whether the Checkbox is checked by default, as well as changing the label. The value in the data field is binary, and you can set it to be either true/false or 1/0.
(Pictured: Checkbox Control and Properties)
The Checkbox List control is similar to the regular Checkbox, but allows multiple selection. As seen in the example below, you can set up multiple checkboxes with custom or predefined values so users can select any that apply. Also, you can specify a default value. In the scenario below, North America is the default value that will be automatically selected when the mobile user opens the form on their device.
(Pictured: Checkbox List Control and Properties. This Checkbox List has a predefined list with a default value)
Radio Buttons present a list of options for the user of the form to choose from. You can offer as many choices as you want. The user can only choose one of them. Click on the Radio Button to add it to the center pane. Then click on the Radio Button control in the center pane, then in the left pane click on the Properties button. Click on the Edit Items button to modify the predefined list. Notice the several layout options available for how the Radio Buttons will appear. For a long list of items, columns can be a good layout.
The whole set of Radio Buttons is associated with a single data field, and its value will be a digit based on which item is selected.
(Pictured above: Radio Button control with values from a custom list)
(Pictured above: Using a custom list to create values for Radio Buttons)
Read how Radio Buttons can be used to calculate the results of an inspection or survey.
Dropdowns are like Radio Buttons in the sense that they offer the user a single choice from a list of items.
There are a few differences:
- Radio Buttons are more efficient in that they require only one tap to make a choice while Dropdowns require two. But dropdowns are more efficient in that they take up less space in the form. Rule of thumb: Use dropdowns for longer lists and Radio Buttons for shorter lists of items.
- Dropdowns use the label text as the data field value for the selected item, while Radio Buttons use digits.
- Dropdowns give you the option of pulling a list of items from a data source, such as an online SharePoint list or an attached Excel spreadsheet. Select Data Source from the dropdown above the Edit Items button to specify a data source.
(Pictured above: Dropdown control with values from a predefined list)
(Pictured above: Using a predefined list to populate values for a Dropdown control)
The Date control allows the user to choose a date consisting of the month, day, and year. Using a Date control makes it is easier for the user, and provides more reliable data than manually typing a date in a textbox. By default, the date is shown in a MM/DD/YYYY format, but other formats can be chosen.
By default, the Date control's value is set to today. To change that setting, on the Logic tab click Field Values.
(Pictured: Date control and Properties)
The Time Picker control allows the user to select a time of day, which can be displayed in either 12 or 24-hour formats. An early afternoon time, for example, can be displayed as either "1:07 PM" or "13:07". This display option does not affect how the time selection mechanism works on any mobile device.
(Pictured: Time Picker control and Properties)
The Camera control lets the user snap a photo from their device that will be automatically attached to the form. The user can also insert an image from the Camera Roll of their device simply by tapping the image in the center of the Camera control.
This control includes an Annotation option, which gives the user the ability to draw on the photo after inserting it.
To keep the photo in proportion, either the width or the height should always be set to Auto. (Delete the existing number or set it to Zero to revert to Auto.)
For forms requiring many photos, consider using the Repeating Photo control.
(Pictured above: Camera control with Properties)
(Pictured above: Camera control with Annotation and Capture location features enabled, allowing the user to annotate on the photos, and view the location where each picture was taken.)
The Signature control lets the user sign on the screen with finger or stylus, and captures the signature as an image in the form.
(Pictured: Signature control with Properties)
The Annotation control lets the user draw on the screen with finger or stylus for purposes beyond signature capture. By default, the drawing is done over a grid image background. Alternatively, you can upload your own custom background image such as a diagram of a street intersection, the outline of a human body, or any image that your form requires. Click on the Annotation control in the center pane, then click on the Properties tab in the left pane and click on Upload button.
(Pictured: Annotation control with Properties)
The Location control captures the current time and coordinates (latitude and longitude) of the device when the left Refresh button is pressed. The right Locate button displays a map of the current location to the user.
To capture additional location information, click on the Location control in the center pane. Then click on the Properties tab and you will see the options to show the map; the accuracy of the location; the altitude and velocity of the user at the time of the GPS capture.
Note that the Location fields such as latitude and longitude do not show in Fields in the right pane, nor are they visible as Field options when creating rules. You can, however, use these fields in rules by using the Location field and appending /latitude or /longitude to the field name. For example: location1/latitude
(Pictured above: Location control with Properties)
(Pictured above: Location control with Map, Accuracy, Altitude, and Velocity boxes checked.)
The Timestamp control simply captures the current time and displays it in the control. The user can repeatedly update the Timestamp. You can also set the option to have the Timestamp retrieve the time as soon as the form loads. Click on the Timestamp control in the center pane, then click on Properties tab and check the On load checkbox.
(Pictured: Timestamp control and Properties)
The Barcode control lets the user scan barcodes and QR codes using the device's camera by pressing the Scan button. The camera will then scan a barcode and will automatically fill in the Barcode number, Barcode type, and the Time.
(Pictured: Barcode control and Properties)
The Repeating Photo control lets the user include as many photos as desired in the form. To prevent the form from becoming too large to submit, the full-size photo files are stored separately in a location such as Google Drive. The form itself contains only a smaller version of the photo and a link to access the full-size photo file.
You can choose between a Side-by-side layout with a smaller thumbnail, or a Stacked layout with a larger picture included in the form. Click on the Repeating Photo in the center pane, then click on the Properties tab and choose the Layout option you would like.
(Pictured: Repeating Photo control and Properties with options enabled by default)
DISPLAY & LAYOUT CONTROLS
These controls allow the form creator to modify the look and feel of their form. These controls also help improve the usability of the form. These controls are not associated with any fields in the form and they do not require any mobile user input.
Title & Logo
The Title & Logo control is included by default at the top of the center pane when you create a new form. You can custom-brand your form by uploading your own company logo, and choose where that logo displays in relation to a title and optional subtitle. To do that click on the Time & Logo control, then click on the Properties tab in the left pane.
(Pictured: Title & Logo control with company logo image included)
Display picture is a read-only control that displays a picture stored in a field. This may be a picture of where to find a bar code on an object; a simple map of building showing the location of equipment that needs to be inspected, etc.
(Pictured: Display Picture control and Properties)
The Display Value control is a read-only control that displays an alphanumeric value stored in a field. This control cannot be edited by mobile users. Instead, it can connect to a specified field and retrieve it's data. For example, Display Value controls are popularly used for calculation totals that should not be edited by the mobile user.
(Pictured: Display Value control and Properties)
The Divider Line control simply adds a horizontal rule to separate Controls above and below it. When used in the PDF tab, the divider line acts as a page break.
(Pictured: Divider Line control and Properties)
Buttons are controls that perform actions when users press them.
Use the Switch Page button to let users navigate among different pages in your form.
(Pictured above: Switch Page button and Properties)
(Pictured above: Switch Page button with a 2nd Previous button added. This allows the user to cycle through previous/next pages)
Use the Query button to pull online data into your form, for example from a SharePoint list.
(Pictured: Query button)
Use the Submit button to send the completed form to its data destination.
(Pictured: Submit button)
Use a Custom Button to execute rules of your own choosing, such as setting the value of one field based on the value of another. Formotus trivia: Custom Button is the only button that uses button as part of its name.
(Pictured: Custom Button acting as a submit button. Custom Buttons can submit to multiple destinations using logic)
Suggested articles to learn more about Custom Button and logic and rules:
Tags: Pages, Eforms, FormDesigner, CreatorControls