How to work with controls in form creator

ABOUT

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, Radio ButtonDropdown, Date, Time Picker

Advanced: Camera, Signature, Annotation, Location, Timestamp, Barcode, Repeating Photo

Display & Layout: Title & Logo, Display Picture, Display Value, Divider Line

Buttons: Switch Page, Query, Submit, Custom Button

overview_pane_1.png

(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.

overview_controls_1.png         overview_properties_1.png

(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:

overview_control_icons_1.png

(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.

BASIC CONTROLS

These are the simple kinds of controls you would expect to see in any form.

Textbox

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.

Typing into a textbox can be inefficient on a mobile device, however, so whenever possible 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.

overview_textbox_1.png

(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.

Checkbox

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.

overview_checkbox_1.png

(Pictured: Checkbox Control and Properties)

Radio Button

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.

overview_radio_button_1.png

(Pictured above: Radio Button control with values from a custom list)

overview_radio_button_list_1.png

(Pictured above: Using a custom list to create values for Radio Buttons)

Dropdown

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:

  1. 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.
  2. Dropdowns use the label text as the data field value for the selected item, while Radio Buttons use digits.
  3. 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.

overview_dropdown_1.png

(Pictured above: Dropdown control with values from a predefined list)

overview_dropdown_list_1.png

(Pictured above: Using a predefined list to populate values for a Dropdown control)

Date

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.

overview_date_1.png

(Pictured: Date control and Properties)

Time Picker

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.

overview_time_picker_1.png

(Pictured: Time Picker control and Properties)

 


ADVANCED CONTROLS

Camera

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.

overview_camera_1.png

(Pictured above: Camera control with Properties)

overview_camera_anno_loc_1.png

(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.)

Signature

The Signature control lets the user sign on the screen with finger or stylus, and captures the signature as an image in the form.

overview_signature_1.png

(Pictured: Signature control with Properties)

Annotation

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.

overview_annotation_1.png

(Pictured: Annotation control with Properties)

Location

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

overview_location_1.png

(Pictured above: Location control with Properties)

overview_location_options_1.png

(Pictured above: Location control with Map, Accuracy, Altitude, and Velocity boxes checked.)

Timestamp

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.

overview_timestamp_1.png

(Pictured: Timestamp control and Properties)

Barcode

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

overview_barcode_1.png

(Pictured: Barcode control and Properties)

Repeating Photo

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.

 overview_repeating_photo_1.png

(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.

overview_title_logo_1.png

(Pictured: Title & Logo control with company logo image included)

Display Picture

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.

overview_display_pic_1.png

(Pictured: Display Picture control and Properties)

Display Value

The Display picture control is a read-only control that displays an alphanumeric value stored in a field.

overview_display_value_1.png

(Pictured: Display Value control and Properties)

Divider Line

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.

overview_divider_line_1.png

(Pictured: Divider Line control and Properties)


BUTTONS

Buttons are controls that perform actions when users press them.

Switch View

Use the Switch Page button to let users navigate among different pages in your form.

overview_switch_page_1.png

(Pictured above: Switch Page button and Properties)

overview_switch_pages_1.png

(Pictured above: Switch Page button with a 2nd Previous button added. This allows the user to cycle through previous/next pages)

Query

Use the Query button to pull online data into your form, for example from a SharePoint list. 

overview_query_1.png

(Pictured: Query button)

Submit

Use the Submit button to send the completed form to its data destination.

overview_submit_1.png

(Pictured: Submit button)

Custom 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.

 overview_custom_button_1.png

(Pictured: Custom Button acting as a submit button.  Custom Buttons can submit to multiple destinations using logic)

 

 

Tags: Pages, Eforms, FormDesigner, CreatorControls
Pages/Eforms/FormDesigner.aspx

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.