Working with Controls

Applies to:
Online Form Creator

 

Controls are organized into different categories in the left pane. Click a category 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, click it in the center pane to view and edit its properties and logic in the left pane.

When a change is made in the Properties pane, you may need to click the Apply button to see the change reflected in the center pane canvas.

Duplicate, Delete and Drag Controls.

Notice that when you select a control in the center pane it displays three icons in the upper right:

The first icon will duplicate your control and its formatting, which is handy if your form needs several of the same control with very similar settings.

The second icon deletes the control from the canvas. This action cannot be undone. However, if you accidentally delete a control you can exit the form without pressing Save and Publish, and re-open it from the last time it was saved. Note that deleting a control does not delete its associated data field from the right pane. Best practice is to delete that field yourself.

The third icon is where you can click and hold to drag the control into a different position in the canvas.


 Basic Controls

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

Textbox

Textbox is a common control in most forms. It lets users 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 opt instead for a control that lets the user simply choose an option. Checkboxes and dropdown lists, for example, are much more efficient on a mobile device.

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.

Radio Button

Radio Buttons present a list of options for the user to choose from. You can offer as many choices as you want, and the user can only choose one of them. Click Edit Items to enter your own custom choices, or start with a predefined list and modify it as desired. 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.

Dropdown

Dropdowns are similar to 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.

Date

The date control allows the user to choose a date consisting of the month, day, and year. This 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.

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 picking mechanism works on any given device.


Advanced Controls

Camera

The camera control lets the user snap a photo from their device into the form. The user can also insert an image from the camera roll by tapping the image instead of the camera button. 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 a large number of photos, consider instead the Repeating Photo control.

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.

Annotation

The annotation control lets the user draw on the screen with finger or stylus for purposes other than a signature. By default the drawing is done over a grid image background, but you can upload your own custom background image such as an automobile or a human body as your form requires.

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 include a map of the location in the form, select the Show Map option. Other options let you capture the elevation, velocity and accuracy of the location.

Note that the location fields such as latitude and longitude do not show in the Fields pane on the right, 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

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.

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. 

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.


Display & Layout Controls

These controls do not involve user input and are not associated with fields in the form.

Title & Logo

This is a compound control designed to work well as a header at the top of the form. It is included by default at the top of a blank 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.

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.

Display Picture

Display picture is a read-only control that displays a picture stored in a field.

Display Value

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

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.


Buttons

Buttons are controls that perform actions when users press them.

Switch View

Use the switch view button to let users navigate among different views in your form.

Query

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

Submit

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

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.

 

 

 

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

Have more questions? Submit a request

0 Comments

Article is closed for comments.