| Section | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Input Controls
| Anchor | ||||
|---|---|---|---|---|
|
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.
...
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
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.
...
| Info |
|---|
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)
| Warning |
|---|
You must specify the _formTz=<tz> parameter appended to the share URL when initializing a form with date, 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 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.
...
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. but will not add them to the data automatically. 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.)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: 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.
...
| Note |
|---|
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
| Tip |
|---|
See the Item Width and Option Width properties for styling options. |
...
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.
...
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 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.
...
Use this to allow the user to upload and submit attachments with your forms. The upload control contains special properties to control 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.
...
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.
...
| Note |
|---|
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.
...
| Info |
|---|
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 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. |
...
In-house, a download customer can control ' internal upper limit via the frevvo.attachment.maxsize parameter in the web.xml parameter or frevvo.attachmentxml files. maxsize, and can also set 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 .
| Info |
|---|
Now that you can take pictures using your mobile device camera and/or upload images to your , the default value of max_allowed_packet may not be large enough if you are using MySql. Refer to this website for detailed information about the MySql configuration parameter. Increasing the max_allowed_packet variable setting in your MySQL Server from the default (1M) to something like 16M (16777125) fixes the issue. To fix the issue temporarily, run the following commands: |
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 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.
...
| Note |
|---|
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. |
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.
...
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.
...
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 one to 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.
...
- 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.
- The current behavior shows that schema controls irrespective of being repeating or non-repeating cannot be dropped into a from-palette tableSchema 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 Widthproperty 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.
| Tip |
|---|
Set the column widths explicitly at either the column cell level or at the table level for consistency in html and print view. |
Adding a Column to the Table Control
...
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.
...
When referring to repeat controls in various places such as Form Action display message, you must use a special template syntax. See 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.
...
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. 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.
| Section | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
Testing Your Mobile Form
Currently, the best way to test mobile forms/flows is to click the 
Test icon on the Forms Home Page in the designer. Sometimes, the mobile form/flow does not look the same in your desktop browser as it does on the mobile device. It is recommended that you design/debug your form/flow completely on the desktop first. Then you can add your form/flow to a space and look at it on the tablet. You can also add &?_device=phone or &?_device=tablet to the raw form/flow link or the share URL for a space or task list to render it for that device in a regular browser. Use ?_device= if this is the first parameter you are adding to the URL. Change the ? to an & if this parameter follows other parameters in the URL.
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
...
for canvas." if your browser does not support HTML5 canvases.
| Tip |
|---|
If you add a Signature control from schema to your form and then change any property of that control, the Signature control will display with a border. Change the border property on the Style tab back to none to remove it. |
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.
- The signature control in thin forms is not supported.
Form Viewer Control
The Form Viewer Control is used to allow a generated PDF to be viewed as part of a form activity in a flow. In this version of , this control only appears on the Forms palette when you click the icon to edit an activity in the flow designer. Refer to this documentation for the details.,
The ability to generate additional PDFs in the Forms designer is available in version 5.2. This control will be visible in the Forms designer palette in this release when generating "Pixel Perfect' PDFs.
To permanently set it, choose one of the two methods listed below:
mysqld --max_allowed_packet=16M
[mysqld] max_allowed_packet = 16MOn Mac OS, you can access the my.cnf file by typing
The location of the my.ini/my.cnf file varies by configuration.