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 form submission is prevented 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.  

Input controls have a two new properties: Decorator and Placeholder. Refer to Setting Properties for the information.

Text 

Allows users to type any text and is intended for short, one-line entries. Placeholder and decorator properties have been added to the text properties pane in

v5.2. See Setting Properties for the details.

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:

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.

A new Placeholder property has been added to the textarea properties pane. The Textarea control is the only input control that does not have a decorator.

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. The designer can choose from a variety of formats for each type. Rules can be applied to the Date/Time control in all variations. See the Rules Examples chapter containing numerous examples and code samples.

You can specify whether or not you want to display the date picker via a checkbox on the Style Properties tab. If checked, you will see the date picker inside the the date control and the date portion of the date/time input control. The date picker brings up a calendar that can be used to enter a date.

The Time control is used to denote the time of the day. This means it has no dependencies on time zones or offsets. It will not shift based on whether or not Daylight Savings Time is observed in a time zone.

The Date/Time control relies on the timezone of the browser. The time portion will be calculated based on the date and whether or not Daylight Savings Time is observed in that time zone.

For example, A time of 5:00 PM is entered into a Time control and a date of 2/5/2014 plus 5:00 PM into a Date/Time control by a user located in the America/New_York (Eastern Standard Time). When the submission is viewed in the EST time zone, the Time Control displays 5:00 PM. This value will not change. The time portion of the Date/Time control also displays 5:00 PM, because it takes on the timezone of the browser (EST) and it is not further adjusted because Daylight Savings Time is not observed in EST on February 5th.

If the submission is viewed in the Tijuana (Pacific Standard Time), the Time Control will display 5:00 PM as it did in EST but the Time portion of the Date/Time control will show 2:00 PM as it will be adjusted by the browser timezone, PST. 

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:

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.

Here is an example: 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. 

Some timezones may not return the expected results. This is a known issue with the JVM. Contact Customer Support for assistance.

When users enter data into a form, the &_formTz=<tz> parameter is not required. You may notice that URLs for the following

 functions will contain the  _formTz parameter appended to them:

• Edit form/flow

• Test form/flow

• Initialize submission

• Access form/flow/tasklist (outside space)

• Access form/flow/tasklist (from space)

You must specify the _formTz=<tz> parameter appended to the share URL when initializing a form with time or date/time controls from an XML init document, the _data parameter or a business rule that uses the rule identifier,form.load. The form server needs to know the timezone in which to return the date and time. Successful initialization cannot be guaranteed if the &_formTz parameter is not supplied. Refer to Initializing Forms with Data for the details. This URL parameter is not needed if your form/flow only contains Date controls.

Time data is no longer 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

will not add them to the data automatically. The form also will round all entries to two decimal places. For example, if the user enters 4000, it will display as 4000.00 when the user exits the field.

Phone

Used for entering a phone number and allows any of the following formats: ###.###.####, ###-###-####,###-####, or ##-####.  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.

You may notice that the Max Length property for the numeric controls: Number, Quantity and Money is no longer present in the v5 designer. Uploading forms that were designed in v4.1.7+, with the Max Length set to a value, will not show this property in the v5 designer. However, the max length value will be honored when the form is executed in v5 use mode.

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

See the Item Width property for styling options.

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 and the Comment property to provide a text box for additional information when the last option in the selection control is chosen. 

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. Keyboard selection of an option is not currently supported but is planned for a future release. Users can type-ahead. For example, select a dropdown control and type "S" and it jumps you to options that start with "S". This is extremely useful for dropdown controls that have a long list of options. This control is a standard HTML dropdown so it does not allow using backspace to clear selected options. The Comment property can be used to provide a text box for additional information when the last option in the selection control is chosen. 

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.

Do not use the '>' character in a radio control option label if the radio is used inside a repeat control. This causes a known issue where the selected option in one radio repeat deselects when the value in the next radio item is selected.

A  Comment property can be used to  provide a text box for additional information when the last option in the selection control is chosen. 

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. A Comment property can be used to  provide a text box for additional information when the last option in the selection control is chosen. 

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 is decorated with an image that cannot be changed.

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. Clicking on Add Files will not display the upload lightbox 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.

You will not see the Required property on the Properties panel for the Upload control. This is because "Required" is not a valid property of an upload control so trying to set that property using a rule will not work. However, you can make the control required by setting the min # property greater than 1. Then you can use a rule to change an upload control from Required to Not Required. If you need to make the Upload control required from a rule, you can put the upload control into a section and then create a rule to make the SECTION required.

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.

You may notice that some file types are misidentified when uploaded in Use mode. Files with .xls and .ppt extensions are described as an application/msword file and .docx and .xlsx are shown with an application/zip description. This is a limitation of the mime detection library used in

version 5.1. This library will be replaced in a future release.

Open

Selecting zip as the Restricted/Mime type, uploading a zipfile and submitting the form may exhibit some unexpected behavior when downloading the zipfile from the submission if you are using IE9+ as your browser. Clicking on the attachment in the

 submission repository does not save the uploaded zipfile as a zipfile. Instead, it will save it as a file named Upload91. As a workaround, you can open the file using winrar.exe and then save it or simply use right click and and select the 'save as' option.

 

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 feature is not supported in Internet Explorer (IE 9) or IOS for mobile devices. Furthermore, the name of the uploaded file will be image.jpg. This is not a

issue. It is a limitation of IOS.

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 frevvo.attachment.maxsize parameter in the web.xml or frevvo.xml files. 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:

 

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. 

IOS Safari decides access to the camera on the iPhone or iPad. Unchecking the "Enable Camera" checkbox does not disable the camera because it is not possible. If you check it, it will disable the multi-select (multiple attribute) of files to upload, even when max # is > 1.

Mapping an Upload Control 

You can take a picture with your iPad or iPhone and map the photo into a generated pdf. Image types supported are: gif, png, jpg/jpeg and bmp. Tiff if not supported. Non image file types uploaded are ignored. The designer should be aware of the following when mapping the Upload control:

• The Upload control can be only be mapped to text fields in the pdf acroform.  

• Only a single file will be mapped per control. Mapping takes the first found image file in the case of an upload control with multiple files.  

• The image will resize to the dimensions of the acrofield.

The image shows an upload control in a form where jpg files for a koala bear and a jellyfish have been uploaded.  Drag the Upload control from the Mapping Form Outline and drop it on the text field in your acroform. Viewing the pdf via the Form Viewer control, shows the koala bear image in the pdf.

Message Control

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 a section and 2 message controls.

The first message control contains the following text:

The 2nd message control contains this text:

You can chose a message type to display different background colors, decorators or a border from the Message Type dropdown on the Setting tab of the property panel. See migration considerations for more information. 

Horizontal Layout using the Message Control

Let's say you wanted to modify a section of your form to reflect a horizontal layout as shown in the image.

One approach would be to use the Table and Radio Controls.  Another alternative is to use a Message control in conjunction with a Radio control to accomplish this. Follow these steps: 

1.  Use a Message control for the labels Fellowship announcements, Conferences and workshops and Other major news and events
   
    

   
   
   

2. Place the Radio control with options to its right. 
   
    

   
   
   

3. Check the Hide Label property of the radio control. 
   
   

    
   
   

4. Here is what the form looks like in Use mode: 
   
   

You can use the Message control to center images uploaded to your form. Click here for the details.

Message controls can also be used to display a message to the user if a form/flow contains invalid controls and cannot be submitted. Refer to the topic for more information.

 

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. The Link control has a default button color and is automatically decorated. You cannot remove the decorator or change the button color. Unlike most controls, the default width of the control, when dragged from the palette and dropped into your form is 3 columns. Click here for more information. The New Line  property is checked by default. 

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.

Centering Images using the Message Control

You can add a Message control on the left side of an image uploaded to your form to center the image. Replace the default text in the message control with one or more spaces. Change its Message Type to None. This will add a blank area on the left of that image and move it into the center. Click the Style tab if you need to modify the width of the message control.

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. This control does not allow the designer to resize the video area. If your video is already hosted on another web service it is often best to embed your video into your form using a message control and adding the following html code to that control as shown below:

If you are using MySql and you are uploading a large video, you may see this message:

Open

 The default value of max_allowed_packet configuration parameter may not be large enough. See this documentation for the solution.

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.

Triggers do not work in repeating items.

You can change the color of the Trigger button on the Setting tab of the properties panel. When you drag a trigger control from the palette and drop it into your form the default width is 3 columns. You can change this on the Style Properties tab. You cannot center the text on a Trigger or remove the decorator.

The New Line property is checked by default. Refer to this documentation for migration information. 

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.

The background color of the Submit control is controlled by the color scheme and is not customizable. Submit and Cancel buttons are automatically decorated. The Submit button has a darker gradient background color to highlight it compared to the Cancel button.

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. Sections are always 12 columns wide when you drag/drop it from the palette and each is itself divided into 12 columns. Click here for more information.

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. You can  show/hide the section expand/collapse icon via a checkbox on the control style tab.

After you drag a section control into your form, you can drag any other controls inside it — 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.

Tabs are always 12 columns wide when you drag/drop it from the palette and each is itself divided into 12 columns. 

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; look for the

 green right arrow then release the mouse when the green arrow is in the destination position. 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

Columns can be created with or without the use of the panel control. Click Multi-column Form Layout for an in-depth discussion about this topic.

When you drag/drop a panel control on the canvas, it will have a default width of 6 columns. Notice panels do not have a label. You can identify a panel in the designer by the panel icon seen on top-left header.

Let's make a three-column layout using panels, where the first column is twice the width of the other two. Drag/drop a section onto the canvas. Simply drag/drop the first panel into the section. It will have a width of 6 columns. Drag a second panel to the right of the first and drop it when you see the

green right arrow. Change the width of the second panel to 3 columns. 

Drag the third panel from the palette over the second panel and drop it when  you see the

green right arrow. This panel will automatically adjust to a 3 column width to fill the remaining space in the section. 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)

If you want to rearrange the order of your panels,drag the panel you want to move across the other panels in the direction you want to go and drop it when you see the green arrow. For example, the image below shows the panel for State being moved to the left of the panel for Zip Code.

Once the panel for State is dropped, it will look like this:

You can no longer label panels in the form designer. Panels themselves are not visible to users or to you when you test or preview your form. Only the controls inside your panels are visible; these controls will be organized visually according to the width of the panels.

The width of panels can be 1-12 columns, as desired. Each panel is itself divided into 12 columns irrespective of its width. Panels do not take up visible use mode space i.e. have a 6 column control outside a panel and a 12-column control inside a 6-column panel take up exactly the same width.

Panels can be dropped to the left or right of other panels. You can't drop other controls in a similar manner to the left/right of panels. The same width rule from above applies: a newly dropped panel dropped to the left/right of another panel will take the width of whatever you dropped on.  This makes it very easy to create multi-column layouts.

You can drop another control in between two panels. In the image below, two panels 4 columns wide were dragged/dropped on the canvas. A Money control is dragged/dropped on the canvas and the width is changed to 4 columns. Moving the first panel to the left of the the Money control and dropping it when the 

up green arrow appears will put the Money control in between the two panels.

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 hide the

delete icon to eliminate deletion of a row in a table rows using the deletable property or allow only a certain number of items based on user input using a business rule. You can also use business rules for computed values, enabling/disabling fields, showing/hiding fields etc.

When tabbing through a form, use Shift-Right arrow or click on a table cell to begin tabbing into a table. 

Tables are always 12 columns wide when you drag/drop it from the palette and each is itself divided into 12 columns. Table controls do not have an identifying icon like Panels and Repeats do.

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. Notice the name of each tables column is unique.

It is strongly recommended that column names in a table be unique.

Rearrange table columns by clicking on the

green bidirectional arrow that appears when you click in the column heading of the column that you wish to move. For Example, to move the “Years Acquainted" column to the left of the “Business” column in the table, click the green  arrow in the "Years Acquainted" column until it reaches the desired position. Columns will move to the to the left or right until the last column position in each direction 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.

Designers creating accessible forms/flows can use the Summary property to specify extra help text that will be announced by Assistive Technology tools.

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.

The Min/max fields for table created from schema are not editable. See Setting Properties for more Information.

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. 

 

Labeling column headers, must be done from the properties pane – in place edit of column headers is not possible.

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 yellow background 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.

• The f-page-break css class should not be used in table cells.  

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 Name and Business columns have a width of 25% of the Form Width while the Address and Phone column is set to 30%. The Years Acquainted column is set to 10%.