Input Controls

Input controls allow users to enter data (text, dates, numbers, etc.) into your form and automatically prevent them from entering the wrong data types. For example, if users enter letters into a number control, your form will display an error message and the Submit button will not be enabled until valid data is supplied. This validation happens automatically; you do not have to do anything special. The purpose of each input control is described below.

To validate the content in each input control,  assigns a default XML schema data type to each control.  The table below shows the default data types for each input control.

The explanations below describe the controls generically—before you edit them to impose additional restrictions or define behavior specific to the form you’re creating.  

Text 

Allows users to type any text and is intended for short, one-line entries.

TextArea

Lets users type any text and is intended for longer, multi-line submissions. When users enter data, scroll bars appear as needed to accommodate the text. This control has a # of Rows property that controls the default number of lines visible in the input area.

In HTML there is no way to set a maxLength on a textarea control which is why the textarea control does not have the maxlength property like the text control. If you need a maxlength, it's best to either choose the text control, or this can be accomplished via a business rule. See the Business Rule for textarea Max Length.

Since users typically enter multi-line text into textarea controls this can pose a challenge if you want to display that text in an html page. For example you may want to display the entered text in your form's Doc Action display message, in an html formatted email or in on a web page such as your Confluence wiki. The challenge is caused by the fact that line breaks entered into a web form text area are represented by a single newline character \n while line breaks in an html context are represented by the html break characters:

<\br>

In order to display the text in a html context you need to replace the \n with the html break characters. See the business rules chapter textarea newline vs break for a working example.

Date, Time, Date/Time

The date control can be used in a form as a date, time or date plus time control. The Control Type property  lets you select from a dropdown of choices: date, time or date/time. Refer to Setting Properties for the details. Rules can be applied to the Date/Time control in all variations. See the Rules Examples chapter containing numerous examples and code samples.

Time Zones

In general, form data is displayed in the browser’s time zone and saved in Coordinated Universal Time (UTC) in the submission document. The form’s time zone is inferred automatically from the browser’s time zone. The time zone, once set, cannot be changed for that form instance. An example can be seen when you click on the  test icon in the  designer. The form URL will have the &_formTz=<tz> parameter with the value of the browser's timezone appended to it. The URL for a form being tested in the Eastern DayLight Time (EDT) timezone would be:

http://localhost:8082/frevvo/web/tn/rap.com/user/rap/app/_w-eeENIYEeGYrP3vLLbERA/formtype/_CXKywNIaEeGYrP3vLLbERA/popupform?embed=true&_extId=0.04202334303408861&_formTz=America/New_York

The browser’s time zone can be overridden by appending the &_formTz=<tz> parameter to the form URL. Modern Time Zone Strings must be used with the &_formTz parameter. Other time zone formats are not supported. The time zone strings can be found here. A Product Order form running in the PST timezone displays all the time and date/time control data in the America/Tijuana timezone if the &_formTz=<tz> is appended to the URL as shown below. 

http://localhost:8082/frevvo/web/tn/qa.com/user/rap1/app/_cm8JIGR7EeG4D7_jeDNSHQ/formtype/_XyC2wGbsEeG2-p_Sm3q9pA/popupform?locale=&_formTz=America/Tijuana

When users enter data into a form, the &_formTz=<tz> parameter is not required.

Time data in a form is always converted from the browser's timezone to a valid UTC format when posted in the form XML document in the submissions database. Refer to Viewing XML Documents for more information. Business Rules execute in the form time zone. 

Email

Requires users to enter a valid EMail address. The address must conform to the following syntax: <name>@<name>.<string>

Money

Allows users to enter U.S. currency. Users may type commas and a decimal point, but if they don’t, the form will display these symbols for them. For example if a user types 4000, the form will redisplay the value as 4,000.00. The form also will round all entries to two decimal places. (Note that if a user types more than two digits after the decimal place the XML submissions document will store as many digits as the user entered but will not include the dollar symbol, decimal point or commas.)

Phone

Used for entering a phone number and allows any of the following formats: xxx.xxx.xxxx, xxx-xxx-xxxx, xxx.xxxx, or xxx-xxxx.  If you want to enforce one of the 10-digit formats (to require an area code), you can edit the control’s Pattern.

Quantity

Used for entering quantities or any whole numbers (integers). The form displays an error message if users enter decimal points, commas, or anything other than an integer.

Number

Used for entering decimal numbers. Users may enter any number of digits after the decimal place.

Selection Controls

 supports 4 types of Selection controls. Selection controls let users choose from a list of options instead of having to enter text.

• Dropdown
• Radio
• Checkbox
• T/F

The palette does not include a Combo Box control — a dropdown list in which a user can type a new value or option — because they are not part of standard XHTML. However, many customers use dropdowns, radio buttons, or checkboxes with an Other option in combination with Business Rules. If a user selects Other, the rule then displays a text control (such as Details or New Entry) the user can type in.

Dropdown

This adds a dropdown list to your form. By default the first choice in the dropdown list will be blank; you define the other choices by editing the control’s Options properties.

Radio

This adds mutually exclusive radio buttons. You define the number of radio buttons and the specific choices by editing the control’s Options properties. Note: If you select a radio option as the default and later decide you do not want an option selected by default, you must remove that option from the control and tab out of the options property so that it is removed from the control. Then add the option back to the control's option list. Now that option is no longer a selected default.

Checkbox

This adds a set of checkboxes so users can check one or more. As with the other selection controls, you edit the control’s Options properties to define the number of checkboxes and the specific choices.

T/F

Use a T/F (Boolean) control in your form for situations where the values will only be Yes or No. For Example: The image shows a T/F control in the Preferences section of a company Travel Request. The label for this field has been changed to Non-Smoking Hotel Room. The employee filling out the request checks the box if they prefer a Non Smoking room.

The control options default to "true=Yes" and "false=No". When you drag the control from the palette, only the "Yes" option will be visible. You can change the option labels from Yes and No to whatever you want. It is important to note changes to the label for false are irrelevant as it will never be visible on the form. The option values cannot be changed and will always stay as true and false. Blank labels for options are not allowed. Checking the “Yes” checkbox of the Boolean control results in a true value in the XML document.

Leaving it unchecked will translate to a false value( no value will show in the XML document).

Notice the Required (false) property on the T/F Properties pane. This property is unchecked by default. If checked, the XML entry shows a false value even when the T/F value is not selected.

A T/F control, added to a table, will hide the "Yes" option label. A Boolean checkbox should be used only if there are two states: Y/N. The column header label in the table can help make the choice obvious. For Example, you could create a column header - Non-Smoking Room in the table and if the user checks the box the value will be true and if the box remains unchecked, the value will be false.

Use another selection control if the choices are not restricted to Y/N. An example would be a gender control where the possibilities are male or female.

Upload Control

Use this to allow the user to upload and submit attachments with your forms. You can attach photos from your device photos library or take a new photo with the device camera. The upload control contains special properties to control the max attachment size allowed (in bytes), the min and max number of attachments to accept per form submission and to allow the form designer to specify restrictions on the types of files allowed to be uploaded to the control/form. When a user uploads content to an upload control with a content filter applied,  will check the upload against the filter and if there is no match, reject the upload with an error message.

Attachments are viewable in the Submissions Repository. You can configure your form's Doc Action property to send attachments to a URL endpoint (ex: servlet) that can save the attachments locally within your company. For more details see handling attachments.

Min/Max Number of Attachments

You can specify the minimum and maximum number of attachments that can be uploaded to your form using the Min # and the Max # properties. Setting the min and max values to 0 or if the maximum # field is left empty means an unlimited number of files can be uploaded. Setting the min # to a value greater than zero makes the field required. Set the min # to 1 to ensure that the user uploads at least one attachment to your form. Use the max # for the maximum attachments allowed. The upload control will be grayed out when the maximum # of attachments have been uploaded. No further uploads will be allowed. Setting the Max # to 1 disables the multi-select feature. See below for more information.

Restricted Content Types and Other Mime/Ext

Use the Restricted Content Types field on the Upload Control Property pane to restrict the content type of the files uploaded to your form. This property lets the designer specify one or more types which restricts the content to those types. Uploads can be restricted by using MIME Types (limited set supported) or File Extensions or both.

Select the content types you want to allow by checking the associated check box in the Restricted Content Types field. The choices are: pdf, MS Word, MS Excel, MS PowerPoint, MS Access, gif, jpeg, png, tiff, rtf, tar, zip, gzip, xml and bmp.  will map the content types that you choose to one or more mime types. Content type filtering will be enabled for the extensions selected. For example, the image shows an upload control in a form that will only allow files with .jpeg, .pdf and .png extensions. This list can be expanded for customers using in-house by modifying the context parameter: frevvo.upload.file.types in the web.xml file. See Installation Tasks for the details.

An easier way to add extensions or other mime types for filtering can be accomplished via the Other Mime/Ext field. You can use this field to restrict uploads to a mime type or file extension that is not included in the subset of the most common file content types provided by . Enter one or more extensions (of any length) or mime types, separated by a space, to enable extension and additional mime type filtering. An upload matches on an extension if it's name ends in a period followed by one of the extensions.  The comparison is case insensitive.  Likewise, an upload matches on mime type if it's mime type matches one of the additional mime types entered. For example, the extensions, txt and htm, shown in the Other Mime/Ext field in the image above, restricts uploaded files to ones that have .jpeg, .png, .pdf, .txt and .htm extensions.

Error Messages

The user will see error messages if upload filtering is applied and the uploaded content types do not match. The error message, shown below, will be displayed if content type only filtering or both content type and extension/mime filtering has been applied and the uploaded content does not match either restriction. For instance, uploading a file with a .jpeg extension will not match the selected content type choices or the .docx file extension listed in the Other Mime/Ext field as shown in the Upload Control Property Pane image:

When extension and additional mime type filtering only has been specified and the uploaded content does not match, the error message below will display:

Multi-select

The user can select more than a one file (during a single file browse) to be uploaded by holding down the control/command key then click on each file you want to select. The multi-select feature support has been added in HTML 5 with a multiple attribute. Multi-select of files for the Upload control is supported in newer versions of browsers. For example, multi-selection of files works in Safari, Chrome and Firefox.

The multi-select of files in the browser is dependent upon the max files property of the upload control. Multi-select is disabled by setting the max # files to 1. It is possible to select too many files . For example, turn on multi-select by setting the max # to 2. Multi-select 3 files. This will show an error and none of the 3 will be uploaded.

Max Size

 itself sets an upper limit on attachment sizes. If you enter a value into the control's max attachment size property greater than ' internal default upper limit, you will see an error message displayed on the upload control.

In-house, a download customer can control ' internal upper limit via the web.xml parameter frevvo.attachment.maxsize. Initially, this value is set to 10485760 bytes. You can also set the max attachment size per user by editing the user's profile as the admin user and editing the Configuration field shown below:

[mysqld]
max_allowed_packet = 16M

Enable Camera

The"Enable Camera" property for the upload control refers to the camera in your mobile device .It is enabled by default. Here is how it works:

• It has no effect in a desktop browser
• If maxFiles=1, you will be able to take a picture with the camera and upload it. You may see a prompt similar to the image below when you tap "Choose Files".
• If maxFiles=0 or if maxFiles > 1, on mobile iOS, you can enable or disable the camera. If enabled, you can take a picture with the camera and upload it but cannot upload multiple files at a time. If disabled, you can upload multiple files at a time but the user will not be presented with the option to take a picture from the camera for uploading. 

Message Control (for Static Text)

Use this when you want to add static text or custom client-side JavaScript to your form. You provide the text in the control’s Message property and can include arbitrary XHMTL with your text—maybe you want two lines with different font sizes or colors, for instance. The browser will format the XHMTL when users access the form.

Lets say you wanted to add the following header information to your form:

This can be done using 2 panels and 2 message controls.

The first message control contains the following text:

<center style="font-weight:bold;"> 
Connecticut Surgeons, LLC 
</center> 
<center style="line-height:1.2em;"> 
82 Anderson Road<br/> 
Branford, CT 06180<br/> 
</center>

The 2nd message control contains this text:

<center style="line-height:1.2em;text-align:right;">
<br/> 
Bruce Wainwright, M.D.<br/> 
Nancy Smith, M.D.<br/> 
Jennifer Lewis-Barr, PA-C 
</center>

Link Control (for URLs)

Use the Link Control when you want to include a URL in your form. When users click the link, the target URL will open in a separate browser window.

Image Control

This control lets you include an image (picture, logo, etc.) in your form. The control allows you to use .JPG, .GIF, and .PNG files or any other image type that your browser supports. 

When you drag in the control, you’ll see a Browse button and an Upload Image button. Click Browse, navigate to the image you want, and click Upload Image. After you upload the image, the Browse and Upload Image buttons disappear, so if you aren’t satisfied with the image, delete the image control and drag in a new one.  

Choose images that fit sensibly in your form before you upload it. The “regular” form size is 600px. You can resize an uploaded image by selecting the image control in the designer, clicking on the style tab in the properties panel and setting the width. Units are px, % or em. Make sure you include the unit. For example 50% will resize the image to half the width of the form or panel.

Video Control

This lets you include video files in your form and works the same way as the image control. The control supports .SWF files and other video file formats that are supported by your browser.

Trigger Control

The trigger control adds a button to your form and is used in conjunction with rules. If your form does not have rules you will not need the trigger control. If your form does have rules, see Triggers & DynamicOptions for details on how to use trigger controls and examples of when you might want to use them.

Submit Control

The submit control adds a new button to your form that, when clicked, will submit the form. By default, new forms already contain a single submit button labeled "Submit." Submit buttons can only be added to the bottom of the form in a special drag/drop area.

Group Controls

Group controls help you organize your forms and give them a professional appearance free of visual clutter. Each group control is described below.

Sections

Use sections to create groups of controls that users can expand and collapse.

Click the icon to expand a collapsed section or to collapse an expanded section. When users access your form the section can be expanded or collapsed—it’s up to you. If you want the section collapsed initially, make sure it is collapsed when you save (finish) your form. 

After you drag a section control into your form, you can drag any other controls inside it—panels as in the example below, or even another section control. 

If you have a required control inside a collapsed section, the section label turns red to cue users that they must expand the section and supply the required information before they submit the form.  

If you delete a section control while designing your form,  will automatically delete all controls you dragged inside the section.

See Optional Sections for details on using the required property with sections and how that affects the validation.

Tabs

This group control lets you create a tabbed view as in the example below.

When you drag the tab control into your form you’ll start with three individual tabs. To add or remove a tab, click any tab and then click the or  icon. Added tabs appear to the right of the tab from which you clicked the add  icon.

To rearrange the tab order, drag one tab on top of another tab; the tab you dragged will move to the right of the tab upon which it was dropped. (Since you can’t move tabs left, if you wanted the Shipping Details tab before the Customer Info tab in the example above, you’d drag the Shipping Details tab and drop it on the Product Info tab.)

You can drag in other controls (including other group controls) into any individual tabs.  As you’d expect, users will see only those controls in the currently selected tab—in the example above we dragged the First Name, Last Name, Phone and Email controls into the Customer Info tab, so these will not be visible when users select the Product Info or Shipping Details tabs. When users click the Shipping tab, they see different controls as shown below.

To move your entire group of tabs to another spot in your form, click the area to the right of your last tab and drag the entire group to the desired location.  

Tab controls have some limitations:

• Individual tabs in a tab group must be the same size and fit on one row
• Individual tab labels must fit on one line
• Centering of a column header cannot be done

Tab Widths

Multiple rows of tabs are not fully supported, so if your tabs spill over to the second row, adjust the width of your tabs and also possibly the Form Width. To edit the tab widths, click the unlabeled area to the right of your last tab; this will display the tab group properties on the left side of the Forms Designer. 

Type a percentage in the tab group’s Width property field. With five tabs, for example, typing 19% will cause each individual tab to take up 19% of your form’s width. As with panels you must account for space consumed by tab borders—so if you try to set the width to 20% the five tabs won’t fit on one row.

Panels

Use panel controls to create columns. If you want two columns in your form, drag in two panels; drag in three panels for a three-column layout, and so on.

By default a panel's width is set to 49%, so when you drag two panels into your form, the second panel automatically will line up next to the first panel. Panels have a 1px border so you can see their boundaries; so for a two-column layout this means you cannot make both widths 50% or there will not be enough room on your form to line up the panels side by side. 

Since panels are group controls, you drag other controls inside them.  Below are three panels that have been dragged in to the palette for use in a three-column layout. Inside the first panel is a text control (city), a dropdown control (state) and another text control (zip). Note that when you drag in the third panel, it will not align side-by-side with the first two columns, since at this point the width of all three panels adds up to 147%.    

Since our example calls for three columns and we want the first larger than the others, we can modify our panels widths to be 55%, 20%, and 23% respectively. As soon as we adjust the width of the third panel, all three panels automatically will line up next to each other and look like columns, as in the illustration below. 

If you want to rearrange the order of your panels, be aware of ' drag-and-drop restriction that prevents you from dropping a control below a group control. If you have three columns and want the middle column at the far right, you must drag the middle column above whichever control is directly beneath your panels. (If you haven’t dragged other controls into your form, drop the middle column over the submit button.)  Also, in a three- or four-column scenario if you want to move one of the middle columns or the right-most column to the far left, you must drag and drop it above your left-most column.    

Although panels have labels you can edit during design, the panel labels and panels themselves are not visible to users or to you when you test or preview your form. (In the example above users will not see the "Three-column layout" panel label.) Only the controls inside your panels are visible; these controls will be organized visually according to the width of the panels. Although users don't see panels, you still may wish to give your panels meaningful labels if you plan to add them to your custom palette and reuse them in other forms.

If you delete a panel  automatically deletes any controls you’ve dragged inside it.

Table

A table/grid layout in a form is a useful space saving technique. Previous practices of using panels to create columns or customizing a theme to create a table can be replaced by using the table control. This control makes table/grid form layout easy by allowing you to create a table with user designated columns and rows. You can edit the table name, column names, drag and drop new controls from the palette, and set the widths of the columns. You can control the number of rows in the table by clicking on Add/Remove icons that appear to the left of the first column in the table. You can also use business rules for computed values, enabling/disabling fields, showing/hiding fields etc.

When you drag the table control into your form, the control will have three rows and three columns. The columns will display the default names of col 0, col 1 and col 2 respectively. The  and   icons will display for each row in the table, allowing addition and deletion of rows. Deleting all the rows will result in a table with one row. 

Rearrange table columns by clicking on the green arrow  that appears when you click in the column heading of the column that you wish to move. For Example, to move the “Business” column to the right of the “Years Acquainted” column in the table, click the green right arrow  in the Business column until it reaches the desired position. Columns will move to the right until the last column position in the table is reached.

There is a property panel for the table and a separate panel for each column and cell in the table. Labels for the table control will not display in Use mode.

Users can add/delete rows in a table control in a form depending on the requirements of the task. The forms designer can control the number of rows in a table by setting the Min/Max properties on the table properties panel. Min # defaults to zero and Max # to10. The Min #  value will dictate the minimum number of rows in the table and the Max # value specifies the maximum number of table rows allowed. Setting the Min# and Max# to zero will default the Max# to 1 resulting in a table with one row. All the cells in this one row table will be displayed in the designer and use mode with a pink color indicating the entire row must be filled in to submit the form. See Min/Max and Required properties for more information.

Add/Remove icons will automatically appear to the left of each row in the table. Click  on the   icon to append a row to the bottom of the table until the number of rows reaches the Max # value specified in the property panel.

The image below shows an Expense Report created using the Table control. The Min # property is set to zero and the Max # is set to 10. Nine expense items can be specified in the table as shown. One more row can be added by clicking the icon.

When  the table consists of 10 rows,  the will icon will disappear and the icon will remain. Clicking on the icon will delete one row from the bottom of the table. The minus icon will become a when the Min # value is reached or there is only one row in the table. 

The Table control can also be used for static grids where the number of rows is fixed. Set the Min # equal to the Max # and the Add/ Remove icons will not display. The image below shows a table control in a Time Sheet form. Users enter the work data into the grid and are not able to add /delete rows.

Columns in a table may require different properties depending on your specifications. There is a properties panel for each column where the properties shown in the image below can be selected. Checking a property on the column property panel will apply the selection to all the rows in that column in the table. The required and comment properties for the dropdown, radio and checkbox controls are selectable on the cell property panel. 

Modifications made to one cell in a table on the cell property panel will be replicated in all the rows of the column in the table. The Control Type drop down, provides choices to change the type of control from a text control to one of the following types: Email, Money, Phone, Quantity, Number. Changing the Control Type of one cell will change the control type for all of the cells in the column of the table. For example, all of the cells in a column in a table that will be used to collect mileage information can easily be changed to number controls by selecting that choice in the Control Type dropdown on one of the cell property panels.  

Required cells in a table will display in the edit and test modes with a pink color as shown. When you drag the table control from the palette into your form, all cells are marked required. Individual cells can be designated as required/optional by checking/unchecking the required checkbox on each cell property panel. Changes made to the required property in one cell in a column will add/remove the requirement from all the cells in the column. Refer to Setting Properties for more information.

Error messages for invalid data in a table will display one at a time. 

The table control has some limitations:

• The Table control cannot be published by dragging to the custom palette. Currently, this can be done by clicking on Publish Control Template link in the properties panel.
• Drag and drop of a Table control into a Repeat control is not supported. 
• Schema controls cannot be added to a table that is dragged from the palette and dropped into a form.

• Centering of a column header in a table cannot be done at this time but might be possible in a future release.

• Margins given in percent for the table and table cells will not work in IE8. Use px values.

   

Column Widths

Column widths can be adjusted using the Column Width property found on the table Style Properties tab. To edit the column widths, enter a value in percentages (Ex: 50%), or px values, separated by a space, for each column in the table. For Example, the Description of Expense column in the table shown has a width of 50%, of the Form Width while the Meals and Mileage columns are set to 25% of the form width. 

Here is how the Table control looks with these column widths.

Adding a Column to the Table Control

Other controls can be dragged into the table (Dropdown, Radio, Checkbox, Message, Text, Text area, Date, Email, Money, Phone, Quantity, Number, T/F). Drag the control from the palette. The new control will appear as a column positioned to the right of the column where it is dropped. For Example, a date control can be dragged from the palette and dropped over the Description of Expense column. Adjust the column widths in the table if necessary. Notice that the cells in the added control column do not have the Required property checked. The form designer must set the Required property as appropriate for newly dragged columns.

Help icons for a column with a label that has multiple lines may not align properly. Adjust the column widths if possible or apply a custom theme.

Labeling the Rows of a Table

Dragging a message control from the palette and dropping it into a table will provide a column in the table that can be used to label the table rows. Move the message column to the desired position. The text of the message control of each cell in that column can then be set as desired.  The days of the week in the Day column of the Timesheet form shown below is an example of using the message control with modified text for row labels. 

A Message Control dropped into a table will not have hint, help, or enabled properties. Be sure to check the "hide label" property if you have a message control as a column in your table and you do not want a column label on it. The column label will be hidden in use and edit modes if "hide label' is selected.

Deleting a Table Control

Select the entire table control by clicking in the table label. A red  will display. Click on the x to delete the entire table.

To delete a column in the table, click on the red  in the top right corner of the column.

Repeats

Say you want users to be able to enter one or more addresses, phone numbers, or other data. With repeating controls, your form can dynamically display as many controls as a user needs rather than always showing extra input controls that may not be needed.  

Drag the repeat control into your form and then drag another control into the repeat control just like you would for sections, tabs or panels. When the control is inside your repeat control, click the control to see its properties (on the left hand side of the Forms Designer). Notice that two Settings properties have been added to the properties you normally see for the control: Min# and Max#. These properties default to 1, 1. You must change them as described below to make the control repeat.

These minimum and maximum properties control the behavior users will see on the form. In the example below we’ve set the phone control min # to 2 and the max # to 5, so when they access the form users will see two phone controls and both will be required. Also, both will have an  icon; clicking this automatically displays another phone control. If you click during design, the min # property will be incremented automatically. The  icon above each control is optional and appears because we set the phone control's Help property.

It is often helpful to tell the user how to add additional repeat items. You can easily do this by dragging a message control into the form with the following text:

<center>Click on the <img src="/frevvo/images/icons/add.gif"/> icon to addmore phone numbers to the list.<br/></center>

The first items in order up to the min# must be filled in when the form is used in order for the submit button to be enabled. Thus if the user enters a value into the 1st repeat item and then the 2nd repeat item, and then clicks plus on the first repeat item, a new item will be added to the form between what was the 1st and the 2nd moving what was the 2nd item to the 3rd position in the list. The new 2nd item will become required because it has no value. Until the new 2nd item is filled with a value the form will not be submittable.

Thus it is not enough that 2 items contain values when min# is 2. The 1st two items must contain values.

If users elect to supply the maximum number of values, after all controls are displayed, the icons will disappear from the form and only the  icons will remain.

When you edit the label or any properties of a control inside a repeat control, your changes will be applied to every instance of the control inside the repeat control. The same is true if you decide to delete a control inside the repeat control—all instances of the control will be deleted.

As with panels, repeat controls are hidden when testing or using forms and only the controls inside your repeat controls are visible. (The input controls will have  icons as a visual cue to users.)   

There are some key differences between repeat controls and the other grouping controls:

• You may drag in only one control, and you may not drag in tab controls, panels or other repeat controls. 
• You may not drag in trigger, message, image, video, link, upload, tab, table or signature controls. 

You can have multiple controls inside a repeat. To do this, first add your controls to a section control, and then drag the section into the repeat control.

If you add a control from a repeating element that was uploaded as part of a schema (maxOccurs > 1),  automatically will generate a repeat control and nest the repeating item in that control. The repeat control will automatically enforce the minimum and maximum occurrence constraints.

When referring to repeat controls in various places such as Form Action display message, you must use a special template syntax. See templates for repeat controls for the details.

PageBreak

Mobile forms work best when they are broken up into small, logical pieces. The PageBreak control lets the designer create a mobile layout consisting of multiple pages where each page contains a small number of controls (logical groupings). The user navigates between the pages via Back/Next buttons, or on a device that supports it, by swiping left/right.

Tablet and Smartphone forms are generated using HTML5 controls so features like Custom Keyboards, Date pickers etc. can be used. For example:

• Money, Number and Quantity controls will display a numeric keyboard.
• An Email control will display a keyboard with an @ sign.
• A Phone control will display a phone-specific keyboard.
• Date, Time and Date-Time controls will display the appropriate pickers.
• Drop-downs will use the device specific pickers.

Panels will be ignored on a smart phone, rendering all controls one below the other. Panels on a tablet will be rendered as usual.  The +/- icons are rendered larger so that it's easier to touch them with a finger. Your mobile form takes up the entire width of the device.

Drag and drop a Page Break control from the palette into your form to specify pages on your mobile devices. You can set a page break for Phone, Tablet or both by checking the Tablet and Phone checkboxes on the Properties panel of the control. If neither is selected, it has no effect.  When the designer clicks Finish, will generate a Smartphone layout and a Tablet layout with the page-breaks specified. If page-breaks are not specified, there will be just one page. The Employee on Boarding form shown below, when rendered on the iPad and iPhone, displays the company information, the new employee's date of birth and manager's name on the first page and the new employee's name, social security number and home phone on the next page because the first PageBreak control has both phone and tablet checked. If tablet is unchecked on the second PageBreak control, the name and address panels will display on the same page on the tablet.

The PageBreak control cannot be dropped BELOW any control. It can be dropped BETWEEN 2 controls or ABOVE any control. Let's say you are designing a form for mobile devices. You drag and drop one control on the form. Now you want to add the PageBreak control and then add other controls below it. You cannot drop the PageBreak below any control so you will have to add the other controls first and then drop the PageBreak control where you want it. Once you add more than one control to the form, you can drop controls from the palette or the form above or below the page break. You can drag and drop the PageBreak itself anywhere at the root of the form. The PageBreak control should not be inside sections, panels, tables or repeat group controls. The only exception is the Tab control. See below for the details.

PageBreaks in a Tab Control

Dropping a page break control in one tab of the tab control adds the page break to all tabs. You must drag and drop the Tab control into the form first and then drop the PageBreak into one of the tabs in the tab control. If you drag and drop the PageBreak control onto the canvas first and then try to move it into a tab control, it will not work. When you drag and drop a page break control into a tab, it will always be at the top. You cannot drag it but if you drop another control from the palette or the form it will always drop below the page break control even if you drop it on the tab header. Setting/unsetting a property (e.g. uncheck Phone) in one Tab will duplicate the action in all tabs. If you try to add more than one PageBreak control to a tab, you will see the following message:

You cannot move the PageBreak out of a tab. The only way to remove it from one of the tabs is to click on the  delete icon which will remove it from all the tabs.

Here is how a PageBreak control dropped into a Tab control looks in the designer.

Tabs containing a Page Break will be rendered as separate pages on the appropriate device e.g. if phone is checked and tablet is unchecked, the Tabs will turn into pages on the phone and stay as Tabs on the tablet.

Signature

Drag a signature control from the palette to add an electronic wet signature in your form. You cannot enter a signature into the control in edit mode. In use mode, clicking or touching a signature control presents the signature entry dialog that is illustrated in the image below. Use your mouse, track pad, touchscreen or a stylus to sign. You can clear the signature in order to sign again by clicking the Clear button.The Cancel button negates any changes. All signature controls are empty of any signature (shows the X and a line) when the user first displays the form. Entered signatures are only applied to the use mode form when the user selects Done. Notice the signature is displayed in the form scaled down into the signature control.

will display the error message "Signature support not available. Please use a later browser version with HTML5 support for canvas." if your browser does not support HTML5 canvases. 

Refer to Electronic Signatures for more information.

Limitations

•  does not support drag and drop of a Signature control into a repeat control or its descendants or a table control.