V2.0 Form Designer
From Frevvodocs
Forms Designer
The frevvo Live Forms™ Designer is the heart of frevvo's simple, quick, no-coding required form creation. The Forms Designer enables you to add controls quickly to your form, customize their appearance and layout, and add rules that affect the behaviour of the form.
- Standard Edition users, just click New
to launch the Form Designer and start creating a new form. Or, to work on a form you’ve already started, click the name of an existing form or click the Edit 
icon below the form name.
- XML Edition users, start by clicking New to add your first application. Then click the name of the application or the Edit icon and click New to create your first form.
A unique and arbitrary form name will be generated automatically--Form 31 in this example. You'll change this name when you begin working on your form. Also, you'll see that your form already has Submit and Cancel buttons, since these are part of every form.
The Form Designer has several components. Each is described below.
Palette
The palette contains the controls you can use in your forms. Click on the control you want and drag it into your form.
Custom Area
This area stores controls you’ve already created and customized so you can re-use them. Maybe you’ve created a dropdown list with your ten branch offices, for example. To add a customized control to this area, drag it from the form you’re working on and drop it over the shaded area that says “Custom.” (You can’t drag the control into the area beneath this.) The name you see in the Custom Area will be the control’s label; if you can't see the entire label, hover over the control to see the full name. You also may add to the Custom area any of frevvo’s pre-built control templates by clicking Templates > Customs from the top menu and clicking Add.
To use a customized control from the Custom Area, click on it and drag it into your form. Once the control is in your form, you can modify any of its properties or simply leave it as it was. Any modifications you make apply only to the form you’re working on—your changes will not affect the version of the control that has been dragged inside the Custom Area.
To delete any control from the Custom Area, simply click the 
icon.
Properties Area
This is where you define values in a dropdown box, set the max length for an input field, create tooltips, and more control customization. When you click on a control in your form, the Properties area displays the control’s properties so you can view and edit them. There are also form properties; click the toolbar at the top of the forms work area to access these.
Data Sources (XML Edition only)
This area displays the list of XML schemas added to the current application. You may add to your form one or more elements from any schema listed here by clicking Add from Schema, but you first must upload the schema into your application from the Schemas tab.
Forms Work Area
The right side of the Form Designer is the work area for the forms you create. At the top of this area is the toolbar.
Toolbar
The toolbar at the top of the forms work area is visible when you are designing your forms but it is not visible to you when you test your forms or to your users when they access your forms. The toolbar includes the following buttons:
- Click Preview to see the form as it will appear to users. You cannot enter data or click buttons in Preview mode (but frevvo’s Test feature lets you do this).
- Click Controls when you are finished working in Rules mode. If your form has no rules, you don’t need to use this button.
- Click Rules to display your form’s existing rules, edit the rules, delete them, or create new ones. When you click this button, the left-hand portion of the Forms Designer becomes disabled until you click the Controls button. Rules are discussed in detail below.
- Click Finish to save the changes to your form.
- Click Cancel to discard changes you’ve made to your form.
Submit and Cancel Buttons
At the bottom of the forms work area are a Submit button and a Cancel button. They are part of every form you create and are both disabled while you are designing your form. When you test your form or users access it, the Submit button will be enabled dynamically only after valid data has been supplied in all required controls. Both buttons have properties that you can customize, so you are free to change the names of these buttons by editing their labels.
Palette Controls
frevvo’s palette offers a rich variety of controls that let you create virtually any form. All controls provide functionality as soon as you drop them into your form but need to be customized (edited) to suit the form you are designing. The purpose of each control is described below.
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, frevvo assigns a default XML schema data type to each control. The table below shows the default data types for each input control.
| Input Control | XML Schema Type |
|---|---|
| Text | xsd:string |
| Date | xsd:date |
| types:emailType, an xsd:string restriction pattern defined in types.xsd | |
| Money | types:number, an xsd:double restriction defined in types.xsd |
| Phone | types:phoneType, an xsd:string restriction pattern defined in types.xsd |
| Quantity | xsd:integer |
| Number | types:number, an xsd:double restriction defined in types.xsd |
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.
Date
The date control lets users enter a date by typing it or by clicking the calendar 
icon. If users click the calendar to choose the date, the date they pick will be displayed in mm-dd-yyyy format (e.g., 09-01-2008). If users hand-type the date they may enter any of the allowable formats below, but the date immediately will be redisplayed on the form in mm-dd-yyyy format. XML Edition users should note that in the submissions XML document, the date will be converted to the standard xsd:date format of yyyy-mm-dd.
Allowable Date Formats and Examples:
- yyyy-mm-dd (2008-09-15 or 2008-9-15)
- mm/dd/yy (09/15/2008 or 9/15/2008)
- m-d-yy (9-5-08)
- mmm dd yy (Sep 15 08)
- mmm dd, yyyy (September 15, 2008)
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 a dollar sign, 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. (XML Edition users should 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 (although you can edit the control’s Max Length or Pattern property to impose a practical limit).
Selection Controls (Dropdown, Radio, and Checkbox)
Selection controls let users choose from a list of options instead of having to enter text.
- 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.
- 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.
Message Control (for Static Text)
Use this when you want static text on 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.
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.
You cannot resize your image after it is in your form, so make sure the image will fit sensibly in your form before you upload it. The “regular” form size is 600px but by editing your form’s Width property you can use larger and smaller form sizes that may allow you to accommodate your image without forcing you to resize it.
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 using triggers with rules for details on how to use trigger controls and examples of when you might want to use them.
Group Controls (Sections, Tabs, Panels and Repeats)
Group controls help you organize your forms and give them a professional appearance that is 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 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, frevvo will automatically delete all controls you dragged inside the section.
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
Multiple rows of tabs are not fully supported, so if your tabs spill over to the second row, adjust the width of your form or the width of the tabs. 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.
To delete a tab group, you must delete the individual tabs one at a time; there is no way to delete an entire tab control in one shot. When you delete a tab, frevvo will delete any controls you dropped inside it.
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 frevvo’s 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 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 frevvo automatically deletes any controls you’ve dragged inside it.
Repeats
Say you want users to be able to enter one or more addresses, phone numbers (or other data); they might have only one address or phone number but could have more. With repeating controls, your form can display dynamically as many controls as users need as opposed to always showing extra input controls that might rarely 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 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.)
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 or video controls.
If you want a section inside your repeat control, build the section first (with all the controls inside the section) and then drag the section inside the repeat control.
For XML Edition users, if you add a control from a repeating element that was uploaded as part of a schema (maxOccurs > 1), frevvo 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.
Adding Controls (Drag & Drop Troubleshooting)
From the Palette
Initially, a form is created with no controls except for a Submit and Cancel button. You must add controls to the form in order to make it useful. Controls can be dropped from the palette or generated from a schema.
When you create a new form from scratch, it has no controls other than the Submit and Cancel button. To make your form useful you must start by dragging in controls from the Palette and dropping them in your form.
As you begin to drag a control from the Palette, you’ll see this 
icon, which means the control is not yet over a droppable area. You must drop controls into the body of the form; you can’t drop them into the toolbar nor can they be dropped below the Submit and Cancel buttons.
As you bring the control over the body of your form, the icon will change to one of the icons below:
-
This means your control will be placed above the control over which you are hovering. You’ll see this icon when you drag the control over the top half of a droppable area.
-
This means your control will be placed below the control over which you are hovering. You’ll see this icon when you drag the control over the bottom half of a droppable area.
-
If you are hovering over a group control--tab, panel, section or repeat--this means your control will be placed inside the group control. (If other controls already are inside your group control, this icon appears only when you hover over the group control header and means your control will be placed inside the group, at the top. You’ll see the and icons as you hover over any controls inside your group control so you can govern exactly where inside the group control your new control will go.)
If you are not dragging your control over a group control, this means your control will be placed at the top of your form. Anywhere to the left of the print 
icon is a droppable area.
-
This means your tab will move to the right of the tab on which it is being dropped. This applies only to tab controls.
Other important drag-and-drop rules:
- If you let go of a control while the
icon is showing, your control will go back to where it was—either back to the Palette or where it was in your form before you tried to move it.
- You can only drop individual tabs in a tab group on other tabs in the tab group (and you’d do this only if you wanted to rearrange the order of the individual tabs inside a tab control).
- You can never drop any control directly below a group control. If you want the control you are dragging to go below the group control, drop your control above a different control that is below the group control or first move the group control. Remember that the Submit and Cancel button are controls, too.
- You can never drop two different controls into a repeat control—for example, you cannot drag in a quantity control if your repeat control already contains an email control. If you need multiple controls inside a repeat control, first drag the controls into a section, then drop the section into the repeat. Once the section is inside your repeat you may not add anything else to the section, so build the section first in this case. You also may never drop a panel, tab or another repeat control inside a repeat control, nor may you drag in trigger, video, image or link controls. See Repeats for more details.
XML Edition users also should note that repeat items automatically generated from a schema may not be dragged outside the repeat control since this would violate the constraints imposed by the schema.
From Schema
If you have the XML Edition you can generate controls automatically from schema elements, but you must first upload your schema into your frevvo application. Once you've uploaded the schema and added schema elements to your form's Data Sources area, you can generate controls from these elements automatically. See Generating Controls from Schema Elements
Editing Controls
To edit a control’s properties, click on the control in your form. The Forms Designer’s Properties area will display the control’s existing properties, so you can edit them.
Controls have Setting properties and Style properties. Generally speaking the Setting properties influence the control’s behavior and the Style properties affect its appearance. The specific properties you see depend on the type of control you’ve selected in your form; some controls have more properties than others. All properties are optional, with the exception of the control label.
Control Setting Properties
Each control setting property is explained below. Keep in mind that all controls do not have the same setting properties.
Label
A control’s label is displayed on your form beside or above the control. When you first drag in a control it is assigned an arbitrary and unique label—checkbox 43 for example. Obviously for your users’ sake you will want more meaningful labels. Change a control’s label either on the form itself (by clicking the control and selecting the label) or by overlaying the arbitrary name in the Properties Label field. Message controls are the only controls without labels—they are used for static text so you don’t need a label, too.
You aren’t restricted to plain text for labels. You may use arbitrary XHMTL when typing the label name. Say you want two different font sizes and colors for a label as in the illustration below.
In the Label field, type this XHTML: Password <span style = "font-size:0.9 em; color: red; "> (6 characters) </span>.
When typing labels you are free to use any special characters with the exception of the less-than sign (<). If you need a less-than sign in your label, substitute the characters & l t ; (with no spaces between) for the less-than symbol.
XML Edition users should note that a control's element name defaults to its label name. If you add a label that is not an allowed xsd element name, make sure you also give that a control a valid Element Name.
Pattern
Most controls automatically ensure that users provide the correct data type, but patterns give you the flexibility to impose additional restrictions on what users enter in a particular control.
For example, if your form has a phone control users must enter a seven or ten-digit phone number, but what if you want users to include an area code? By using a pattern that requires 10 characters you can make this happen. In fact, say you want to require a specific area code—area code 203, for example. Again, you can accomplish this by using a pattern that requires 10 characters, of which the first three must be 203.
In the Pattern field in the Properties area, type your pattern using XML schema regular expressions. In our example, this would be: 203-\d{3}-\d{4}. This will require users to supply a phone number that starts with 203, followed by a dash, followed by three digits, followed by another dash, followed by four more digits.
Another simple example is a pattern that restricts a text control to only allow strings formatted as a US zip code: \d{5}(-\d{4}). If you type this expression in the Patterns property, your form will permit values entered into this field only if they are five digits followed by the '-' character, followed by 4 digits.
When you define patterns you don’t have to restrict what the control handles automatically. It is not necessary to enter a pattern [a-z] for a Number control, since users can’t type letters in a number field anyway. Since essentially you would be attempting to expand the allowed data types in the control, frevvo would ignore this pattern if you entered it.
Hint
This property lets you create a tooltip that will display in your form when the user mouses over the control. Simply type the text for your tooltip in the Hint field.
Help
This property lets you provide for your users more detailed help about a specific control. If you enter text here, a icon will appear next to the control on your form. When the user clicks , the help text you supplied in the Help property will be displayed in a floating box.
Error Message
This lets you display a specific error message if the user does not supply a valid value in the control. If you leave this property blank users will get generic feedback (an “invalid value” message, for example) if they supply a bad value—but if you use this property, you can make the error message more helpful.
For example, if you are using a pattern that requires the user to enter an area code of 203 or 860 in a phone control, you can use the Error Message property to let users know this explicitly if they try to enter a different area code.
Type ID
This is used for rules only and is a string ID. See Rules for details.
Control Type
This applies to selection controls (dropdowns, radios and checkboxes) and most input controls (text, text area, email, phone, quantity and number) and is populated automatically when you first drag in a control. You can change this property if you want to switch a control in your form to a different type of control. This saves you from having to remove the original control and drag in a new one.
There are some limitations: you cannot change a selection control to an input control or vice versa. This means you easily can switch a checkbox to a dropdown list, but you cannot use this property to change a checkbox to a text control.
This property is also useful for verifying what kind of controls are in your form. Since you assign new labels to your controls after you drag them in, you occasionally might forget whether you are looking at a text control or phone control, for example. This property lets you know what kind of controls are in your form no matter what the labels say.
Note: If your control was generated from a schema element, it will have a Format As property instead of a Control Type property. See below.
Format As
This property applies only to controls generated from schema elements. (If the control was dragged in from the palette, it has a Control Type property; if the control was generated from a schema element, it has a Format As property instead, as shown below.)
You can adjust the Format As property to change the way your control looks on your form--for example, by changing a dropdown to a text control or vice versa. This will change the control's appearance but will not affect how the control validates data. If you need to modify the control's validation behavior, you must update the schema.
Max Length
This property is available for text controls and other input controls and limits how many characters users can supply in the control. Simply type a number (positive integer) in the Max Length field.
# of Rows
This property applies only to text area controls and lets you define the initial size of the text area. Scroll bars will appear automatically when the user reaches the # of rows you specify.
Required
Make a control required when you want to force users to enter a valid value in the control before they submit your form. To do this, check the REQUIRED checkbox in the Properties area. If the data is optional, leave the checkbox unchecked.
As soon as you mark a control required, red asterisks appear next to it on your form. Until users populate all required controls with valid data, they will not be able to submit the form because the Submit button will be disabled.
You cannot mark grouping controls (tabs, sections, panels and repeats) required. Input controls that are direct children (directly inside) of repeat controls also cannot be marked required, nor do they need to be, since the min# and max# properties take care of this already. You may, however, make controls required when they are inside sections, tabs and panels.
XML Edition users cannot edit the required property for controls that have been generated from an uploaded schema, since the schema already specifies this via the minOccurs attribute.
Options
This property appears for dropdown, radio and checkbox controls and is how you populate the choices the user sees in these controls.
When you first drag one of these controls into your form they have generic values: Option 1, Option 2 and Option 3. This matches the generic text you see in the Properties area. To supply your own values, simply overlay the values in the Options property with the values you want and add more (or delete one) as necessary.
The order of choices in your control will match the order in the Properties area. If you have choices that need a logical order (you’d want a dropdown of US states to be sorted alphabetically, presumably), make sure the order is correct in the Properties area. (You can’t sort the text you enter in the Options property field but you can cut and paste.)
In addition to the generic Option 1, 2 and 3 choices, a dropdown control also includes a blank option that by default will appear first in the list. This blank option will appear no matter what text you supply in the Options property. You cannot remove the blank option but you can make one of the other options the default. See setting defaults.
XML Edition users cannot change the choices if they have been generated from an uploaded schema, since the schema specifies the choices. In this case, you won’t see the Options property in the Properties area.
Enabled
This property determines whether the control is enabled or disabled when users first access your form. If you check the DISABLED checkbox, users may not enter a value in the control until the control is enabled. (You enable the control using a Rule.)
For example, say you are creating a wedding invitation form and want to know if the people completing your form are bringing a guest. Your form might include a text control for the guest’s name that becomes enabled only after users indicate (in another control) that they are in fact coming to the wedding.
You are not permitted to disable grouping controls.
Visible
This property determines whether the control is visible or hidden when users first access your form. It is almost identical in concept to the Enabled property, but instead of disabling the control you hide it and write a Rule that makes it visible based on what users enter in another control.
Hide Label
This property determines whether the control’s label will be displayed on your form. Check the checkbox to hide the label on your form; leave it unchecked to show the control’s label.
Message
This property applies only to message controls and is where you enter the static text that will appear on your form. In addition to regular text, you may include in this property field arbitrary XHTML markup that will be formatted and displayed by the browser.
Min# and Max#
These properties appear only when your form has an input control inside a repeat control and apply to the input control. Simply type a number (positive integer) in the two property fields. If you specify a min # of 1 and max # of 10, users must enter values in at least one input control or they will be unable to submit the form, but they may enter as many as ten. See repeat controls for more details.
If you set the min# to 0, users initially will see one email control but won’t be required to supply an EMail address to submit the form.
For XML Edition users, these are not editable in the Properties area for repeating controls that have been generated from an uploaded schema, since the schema already specifies this via the minOccurs and maxOccurs attributes.
Password
This property applies only to text controls and other input controls. If you check the Password checkbox, the text the user enters will appear on the form as asterisks. (It will be submitted as normal text, however).
Sensitive
This property determines whether the value saved in the submissions repository is encrypted using an SHA algorithm. Check the checkbox if the data users will enter into this field contains sensitive data that should not be visible when saved to disk.
CSS Class
This is the control’s class name that was added to your form's XHTML markup. You can use this CSS class to reference the control in any custom CSS or JavaScript when customizing themes.
Element Name
This is used in the XML Edition only and is the name given to the XML element corresponding to the control. You do not need to specify a value here. If you omit the name, it will be inferred from the label. The element name cannot be changed for controls that have been generated from an uploaded schema, since the schema specifies the element name. For such controls, this field will not appear in the Properties area.
The element name must be unique in your form.
Control Style Properties
To access a control’s style properties, click on the control in your form, then click the Settings tab in the Forms Designer’s Property area.
Some controls have more style properties than others, so the specific style properties you see depend on which control you click in your form. As you define style properties for individual controls, remember that these will override any form-level properties you have defined.
Each control style property is described below. XML Edition users, for more complex styling consider customizing a theme.
Width
Most controls have a width property. For input controls, the property specifies the width of the area in which users enter data, so for example you might narrow a control used for entering zip codes or widen a control if users typically will be supplying lengthier text. A common example is setting a text control's width to 90% for street addresses, when you are using the text control inside a panel as part of a two-column layout. (The percentage is relative to the entire form when the control is not inside a panel or other grouping control, but becomes relative to the grouping control once inside it.)
This property is crucial for panel controls because you must adjust the panel widths before your columns will line up side by side. For tab controls you access the width property by clicking the unlabeled area to the right of the last tab in your tab group; the width you specify will be applied uniformly to each tab in group. (See Panels and Tabs for more details.)
There is no Width property for section or repeat controls; however, you can edit the Width property of controls you drag inside these controls. Also, if you drag a section or repeat inside other group controls, frevvo automatically adjusts the width to a sensible size.
When setting a control’s width property you may use standard CSS relative values—for example, 5%, 5em, 5ex or 5px.
Margin and Padding
Margin and Padding These are two separate style properties but they are similar and often used together. The margin lets you add extra space around the outside of your control, while the padding permits you to add extra space within your control’s boundary.
In this example below, the controls have margin and padding properties of 30 px (pixels).
Type your margin and padding properties using standard CSS syntax. Type a single value such as 5% to apply a 5% margin or padding uniformly on all four sides of the control.
You also can type specify different margin or padding on the various sides of the control: for example, a 5px 10px 15px 20px margin property will give your control a five-pixel top margin, a ten-pixel right margin, a 15-pixel bottom margin and a 20-pixel left margin.
Background Color
This lets you specify the color that will appear behind the control. In the property field type any valid CSS color name or its hexadecimal RGB equivalent. For example if you want a red background, you can type the word RED or #aa2211.
Border Width, Border Style and Border Color
These properties let you specify the thickness, format and color of a border around any control. With the exception of sections and repeats, the border is applied only to the area where the user enters data and does not surround the control’s label.
For tab controls, click the unlabeled area to the right of your right-most tab to access the border properties. Your border properties will be applied uniformly to each individual tab in the tab group. You may not apply borders to panels but you may create borders around controls you drag inside panels.
Remember to make the border color property different from the form’s background color or users will not be able to see the borders. Specify the color using the standard CSS convention of typing the name of the color or its hexadecimal equivalent. When specifying the border width property, using pixels (5px, for example) works best.
Label Color and Label Size
These properties give you an easy way to change the font size and color for any specific control on the form. Specify the color by typing any valid CSS color name or its hexadecimal equivalent.
These properties work well when you want your entire label to have the same size and color, but for more sophisticated labels you can type XHMTL in the control’s label property field. For instance, use XHMTL if you want to apply two different font colors inside the same label. Typing XMHTL also gives you more font precision, since the label size property lets you pick generic font sizes only--small, medium, and so on. There may be controls for which you want a font size somewhere between the small and medium options in the dropdown, for example.
Bold
Check this checkbox to make the control's label bold.
Italic
Check this checkbox to italicize the control’s label.
Setting a Default Value for a Control
When designing your form, you can set default values for most controls. When users access your form, they’ll see the defaults you supplied.
For checkboxes, radio buttons and dropdowns, simply pick the choice you want as a default. For text controls and other input controls, just type the value in the control. Save (finish) your form with the defaults you want. If during design you decide you don’t want the default, just delete the text (for input controls), uncheck the checked checkboxes (for checkbox controls), unclick the radio button (for radio controls), or pick the blank option (for dropdown lists).
Keep in mind that any default value you set must conform to the control’s data type requirements. For example, you cannot set a default of ABC in a quantity control.
Undoing Design Changes
The current version of frevvo does not include an “Undo” or “Redo” feature. If you accidentally delete a control, you must re-add it.
Removing a Control
To remove a control, click on it in your form. You’ll see a red X in the right corner of the control; click the X and your control will be deleted immediately. Keep in mind that there is no Undo feature and that deleting a group control automatically will delete all input controls inside it.
As noted earlier, you cannot delete a tab control in one keystroke. You must delete the individual tabs one by one.
Control Templates
As with form templates, there are two types of control templates: control templates we’ve created for you and those you create yourself. To use one of your own controls as a template, simply drag it from your form into the Custom area of the Forms Designer.
To use one of frevvo’s control templates, choose Templates > Custom from the top menu. You’ll see the same three options you see for form templates:
- Try lets you preview the control and try it—you see a form that includes only the control and the Submit and Cancel buttons.
- Email launches a new message in your default email system and includes a link to the form with the control and Submit and Cancel buttons
- Add automatically adds the control template to the Custom area of the Forms Designer
Once the control template is in the Custom area, you can drag it into any form you like. (If you are using the XML Edition you can drag it into any form in any application.) Control templates are for your own use and are not available to other frevvo users.
Editing Form Properties
At the top of the Forms Work Area click the toolbar (where you see the Finish and Cancel buttons) to access the form’s properties,which are shown in the lower-left portion for the Forms Designer. In the Standard Edition forms have Settings and Style properties; these are displayed on separate tabs. In the XML Edition, there also is an Advanced properties tab.
Form Settings Properties
Each form setting property is described below.
Form Name
This is the name you see on the Forms home page where your forms are listed. We recommend changing the name to make it more meaningful than the arbitrary name assigned when you create it, but keep in mind it is a working name only, so users will not see it.
Description
By default all form descriptions say, “Edit the form to change this description,” but you can change this if you wish. The description appears as a tooltip when you mouse over the area just to the right of the form’s share 
icon on Forms home page. You also see this description when you view individual submission documents.
Form Action
This property tells the browser what to do after users submit your form.
- Display Message – If you choose this option, the browser will display a standard frevvo page with text after the user submits the form. For example, the message might say, “Thank you for completing our form.” You supply the specific text in the form’s Message property field. This option works best for relatively brief messages. It can be tricky to enter or edit large amounts of text in the Message property field, so for verbose messages consider creating a simple HTML page for your message and choosing the Go to URL option.
- Go to URL – After the user submits the form the browser will be redirected to another URL, which you supply in the form’s URL property field. You must include the http:// prefix. For XML Edition users the application can have a Form Action Base URL and Doc Action Base URL, which you set in the application properties. For example, you can have http://www.frevvo.com/frevvo/web/static/ in the base URL and simply “hosted” in the form’s Form Action. This is helpful when the various forms in your application will go to many different pages on the same web site.
- Post document – After the user submits the form the browser will POST the user’s data to the URL you specify in the form’s URL property field and display whatever is returned—the next page to display, for example.
Next to the three form action options is an unlabeled dropdown box with three choices: Frame, Parent and Top. This tells the browser where to show the text (if you chose Display Message) or the new Web page (if you chose Go to URL or Post Document option).
- Frame means inside the iframe
- Parent means inside the iframe’s immediate parent
- Top means at the top of the page, regardless of how many parents are outside the iframe.
For URLs, choose the Parent or Top option instead of trying to display the new Web page in the iframe, unless you have created a special page with a display message that you know will fit correctly within the form’s iframe, as in the example described above in which you need to display a verbose display message.
Doc Action (XML Edition Only)
The document action property lets you POST the submitted data to an additional URI. For example, you may wish to POST data to an email service (which sends an email) but display a different page to the user. There are three options:
- No Action. This is the default option, which simply stores the data in frevvo's document repository. (The two options below also store the data in the repository, but provide additional functionality.)
- Email document. Select this option and specify an email address in the input field below. When the form is submitted, frevvo will send an email message with the XML documents containing the submitted data. You are limited to one email address or email template. See Email Integration for further details.
- POST document. Select this option and type in any URI in the input field below. When the form is submitted, frevvo POSTs the document set to the specified URI and ingores any returned XHTML or redirect. This option may be used for additional processing of data.
The document action can be synchronous (default) or asynchronous. If it is synchronous, the document action is first completed and then the form action is executed. For example, the document may be POSTed to a URI and a Thank You message displayed to the user. This POST will complete before the message is displayed. However, you may make the action asynchronous by unchecking the Synchronous checkbox in the Form Properties area.
Synchronous (XML Edition Only)
This checkbox is used in conjunction with the EMail Document and POST Document options for the Doc Action property. See above.
Message
This works in conjunction with the Form Action property’s Display Message option and is how you specify the text users see after they submit your form. If you have selected the Go to URL or Post Document option for your form action property, you won’t see the Message property.
URL
This works in conjunction with the Form Action property’s Go to URL and Post Document options and is how you specify the URL. This is a relative URL, so you must include the http:// prefix.
XML Edition users do not need the prefix if it is included in the application property's Base URLs.
EMail Results
If you supply an email address in this property field, frevvo will send an email message to the addressee each time the form is submitted. You are limited to one email address or email template. See Email Integration for further details.
Printable
If you check this checkbox a print icon will be displayed at the top of your form. If you don’t want users to print your form, uncheck the checkbox so users will not see the print icon.
Save
This property is checked by default. If you uncheck the checkbox you will not see submission data for the form on the Submissions page, so uncheck it only if you are sure you don’t want to view or keep track of data submitted by the form’s users.
Show Logo
This property is checked by default and causes the “powered by frevvo” logo to appear on your form. Uncheck the checkbox to remove the logo from your form.
Form Style Properties
Each setting property is described below.
Width
This specifies how wide your form will be. The default “regular” width is 600px, but the dropdown also includes thin (400px) and wide (800px). You also may pick the custom option; this will enable the unlabeled dropdown box to the right of the Width dropdown and let you specify your own width.
Height
You typically do not have to edit your form’s height property since the form will resize dynamically as you drag controls into it or take advantage of collapsible and expandable sections. However, you can specify a height if you want your form to fit exactly inside your page’s iframe, for example.
Controls
This property applies whether the options you define for checkbox and radio controls will be displayed vertically or horizontally. In the current version the property is always to set to vertical and cannot be changed.
Theme
You can choose either of two themes for your form: clear or professional blue. The clear theme gives your form a clear (white) background and the professional blue gives your form a soft blue background. XML Edition users may customize a theme instead of using the clear or professional blue theme. After you have added the customized them it will appear in the dropdown list along with the clear and professional blue options.
Font Name, Font Size and Font Color
Your form’s font name, size and color properties will be applied to all labels and text on your form. You can override these properties for a particular control by editing the control’s properties.
When you create a form from scratch these properties are blank; the specific font, size and color of the labels and text in your form will depend on the theme you have chosen or the template you used when you created the form. Simply supply values in any of the three font property fields to change the form defaults.
Form Templates
There are two types of form templates; templates we’ve created for you and those you publish yourself.
Publishing Your Own Templates
You can make any of your existing forms into a template that you can then use as a starting point when creating a different form. The forms you publish will be available to all users on www.frevvo.com, or (if you using the download version) to all form designers in your company).
From the Forms home page, click the Publish 
icon next to the name of the form you wish to make a template.
When you click the icon, you’ll see the Publish Template page. It has three fields:
- Template Name – This defaults to the name of your form. You can keep this name or overlay it with a different one.
- Tags – In this field type at least one tag that will help you quickly find your template. Type as many tags as you like; if you type more than one, separate them with a comma. Your tag may be more than one word.
- Description – This defaults to the form’s description. Keep this description or overlay it with a different one.
Click Submit to publish your template or click Reset to clear the three fields and start over. If you change your mind and don’t want to publish your template, click the X to close the form. After you publish a template, you and all other logged-in frevvo users may use it.
Using Your Own Template
To use a template when creating a new form, click Templates > Forms from frevvo’s main menu. You’ll see the tags you created when you published your templates. Some tags are in larger font; this means you’ve used these tags for more than one template. Click any tag to display a list of matching templates.
After the list of matching templates is displayed, you can:
- Test the template by clicking (the Try icon)— the template displays as a fully functional form so you can enter and validate data before deciding whether you want to use it.
- Use the template in a new form by clicking (the Add icon). By definition since this is a template you will be able to use it in as many forms as you want. Once you’ve used it to create your form, you can customize your form without ever affecting the template.
- Email the template by clicking (the EMail icon). This launches a new message in your default email system. The email message includes a link to the template, which the recipient can view and test.
If you choose to add the template, you’ll be walked through a wizard that allows you to make minor modifications before your new form is launched. If you like your template exactly as it is, skip the wizard by clicking Finish. This is the same wizard you see when you create a new form without using a template.
Using frevvo’s Form Templates
To use one of the templates that come with frevvo, click New to create your new form and choose the template name from the dropdown list. You also can access these templates by choosing Templates -> Form Templates from the top menu.
Deleting Unwanted Templates and Tags
If you publish templates or tags you don’t want there is no way to delete them in the Standard or XML Editions. (If you are using the download version, the frevvo admin user may delete them.)
Backspace Key
Unless you are editing text in a property field or inside an input control, clicking the backspace key will cause you to jump to the frevvo home page. Just click your browser’s Forward button to return to where you were. You will not lose any changes if you were in the middle of editing a form.
Rules
Rules add behavior to forms. For instance, you can add a frevvo rule that will show/hide certain form controls or entire sections based on the state of other form controls. Displaying form fields in a context-sensitive manner reduces clutter and makes it easier for users to navigate your forms. Rules can also be used to update form values. For instance, you can compute the total invoice price on an order form from values of other form fields such as item quantity and price.
You can create rules for any form by clicking the Rules tab in the form designer. In this version of frevvo, a rule is created as a piece of JavaScript code. A future version of frevvo will provide a Rules wizard that makes it easier to create rules in a visual manner. Rules are saved and runable after you commit your form. In order to test a rule you must first commit your form. Then either test it in use mode by clicking on the 
icon, or edit the form and test the rule in the preview tab.
A rule is of the form:
if (condition)
{
true actions;
}
else
{
false actions;
}
You can create more advanced rules primarily for the purpose of looping over repeating items. We will describe these later.
Rules do not currently support the syntax:
- if (condition) statement1 else if (condition) statement2
- switch statements
Control Type Id
Rules usually need to reference form controls. This is accomplished by assigning each control a Type Id. The edit container for each control has a Type Id field. You may enter any string as the Type Id.
Note that this is [in a sense] the Id of the type meaning all control instances of that type will have the same Id. This is important for repeating controls. Let's say you have a repeating control 'Email Address' and you assign it a Type Id of Email. If the user wishes to enter three email addresses and creates three instances of the repeating 'Email Address' control, all three instances will have the same Type Id (Email). The rule must reference these repeating items as an array. We will describe repeating items in more detail below.
For now, it's important to understand that you must assign a Type Id to every control that you wish to reference in a Rule.
Rule Identifiers
As described above, rules refer to form controls using a Type Id. Let's say you have a control to which you have assigned the Type Id 'T'. You can refer to properties of this control in rules using identifiers.
Rules identifiers must always be of the form Type Id.<property>. In the current version of frevvo, the following properties are supported:
- visible : Set to false to hide a control and true to make the control visible.
- value : Read or write the value of a control. This is not applicable to sections, tabs and other controls where it does not make sense to set a value.
- enabled : Set to false to disable (grey out) a control so that a user can not change its value and true to enable it. This is not applicable to sections, tabs and other controls that do not make sense to disable/enable.
- expanded : Set to false to collapse a group control (sections & repeat controls only) and true to expand a group control.
- valid : The value of this property is true if the control contains a valid value otherwise false. Validity is based on the control’s type. For instance a numeric control will be invalid if the user enters a string value that cannot be converted to a number. This property can be read as well as written.
- required : Set to true to make a control required and display the red asterisk. (NOTE: only effects palette controls and not controls generated from XSD schema data source)
- options : A write only property that enables dynamic select control options (radio, dropdown & checkbox controls only).
- clicked : This property works with trigger controls. Its initial state is false. When a user clicks a trigger its state turns true.
- itemAdded : This property works with repeat controls. Its initial state is false. When a user clicks "+" to add a repeat item AND when a repeat item is added via a Document URI as the form loads its state turns true.
Examples of identifiers used in frevvo rules are:
- FirstName.value
- BillingAddress.visible
- Email[1].value
- Email[i].visible
The latter two are examples of repeating controls. We will discuss repeating controls in more detail below. Note that the case of the properties is important. FirstName.value is a valid rule identifier but FirstName.Value or FirstName.vAlUe are not.
When are rules executed ?
Rules execution is triggered by a change of state on any of the controls the rule depends on. A rule will typically refer to one or more form controls and their properties and it will be executed if any of those properties change value. Note that Rules are not fired when the page is loaded. For example, the rule below will only be executed when N1.value changes its value.
if (N1.value > 0 || N2.value > 0) {
T.value = N1.value + N2.value;
}
Now let's assume a use case where you want to show a message if a user enters an invalid email. The form has a required email input control (Type ID=E) and an action should be executed if the email control 'valid' property is 'false'. One could write the rule:
if (!E.valid) {
// code to show message here.
}
The code above would not work as expected. E is a required field and therefore E.valid initial value is 'false' since the field is in initially empty. When the user enters an invalid email address, E.valid would still have the value 'false' and the rule would not execute since there is no state change. The code below would work properly.
if ((E.value.length > 0) && (!E.valid)) {
// code to show message here.ita
}
Now, the rule depends on both the value of E.valid and E.value.length and therefore, when a string longer than zero characters is entered the rule will be executed and the message will be shown.
Rule Examples
Rules are probably best described using a number of examples.
Calculate a Total
You have a form with three controls and you have assigned them Type Ids N1, N2 and T respectively. When the user enters a value in either N1 or N2 you want to set the value of T to the sum of N1 and N2. The rule would be written as
if (N1.value > 0 || N2.value > 0) {
T.value = N1.value + N2.value;
}
This rule will automatically fire whenever the user types something in N1 or N2 and will set the value of T appropriately. You can use any legal JavaScript operators in the expression such as subtraction or multiplication. However, it's important to ensure that the calculated value is valid with respect to the type of T. For example, if T was of type integer and the computed value of the expression was decimal (such as 1.5), then the rule would be attempting to set an invalid value in T. This is an error. The rule will set the value as requested, but will mark the field as invalid and take appropriate action such as disabling the submit button, displaying the control with a red background etc. Also, if controls are added to the form from the palette, it is important to ensure they have the correct type. For example, for a numeric calculation as described above, the controls should be of type Numeric (found in the palette).
Show/Hide Billing Address
You have a form with two controls and you have assigned them Type Ids B and S respectively. B is a checkbox with a single option - Yes. If checked the user wishes to enter a different billing address in S and you want to display S. The rule would be written as
if (B[0].value == 'Yes') {
S.visible = true;
} else {
S.visible = false;
}
This rule will automatically fire whenever the user checks or unchecks B and will show/hide the billing address section S. Again, you could use any legal JavaScript expression to compute the visible property of S as long as it evaluates to a boolean true or false value.
In this example, you would typically set the checkbox B to be initially unchecked and the section S to be initially hidden.
Enable/disable a question
You have a form with two controls and you have assigned them Type Ids B and Q respectively. B is a checkbox with a single option - Yes. . If checked the user is a smoker and you wish to ask an additional question in Q. The rule would be written as
if (B[0].value == 'Yes') {
Q.enabled = true;
} else {
Q.enabled = false;
}
This rule will automatically fire whenever the user checks or unchecks B and will enable/disable the question in Q. Again, you could use any legal JavaScript expression to compute the enabled property of Q as long as it evaluates to a boolean true or false value.
In this example, you would typically set the checkbox B to be initially unchecked and the control Q to be initially disabled.
Compute a subtotal for each item
This rule is an example of working with repeating items. Let's say, you have a form with a repeating section representing an Item that the user may purchase. Each section has a Price (with Type Id P), a Quantity (Type Id Q) and a Subtotal (Type Id S). There are multiple items on the page and the number of items on any given page is unknown. The price field is filled in automatically. When the user enters a value in the quantity field for any item, you wish to compute the subtotal.
The rule would be written as:
for (var i = 0; i < S.value.length; i++) {
if (Q[i].value > 0) {
S[i].value = Q[i].value * P[i].value;
}
}
This rule will automatically fire whenever the user enters a value in the quantity field for any item. It will compute the subtotal for each item, for which the quantity is greater than 0 and fill in the subtotal field for that item with the computed value. If a particular item does not have a quantity, the subtotal is not computed.
Compute an invoice total
Consider the same form as the example above. Let's say you have a control named Total with Type Id T. You want to set the value of Total to be the total invoice price, which is the sum of all the computed subtotals above. This rule would be written as:
var tot = 0;
for (var i = 0; i < S.value.length; i++) {
tot = tot + S[i].value;
}
T.value = tot;
This rule will fire whenever a subtotal is updated, for example, when it is updated via the rule above. It will add the values of all the subtotals to arrive at an invoice total. Note that you must use a temporary variable to compute the total. If you write the rule as:
T.value = 0;
for (var i = 0; i < S.value.length; i++) {
T.value = T.value + S[i].value;
}
it will not work correctly. This is due to internal limitations in the way rules are evaluated.
Dropdown Options
This example automatically sets the option selected in one dropdown based on the option selected in another. This is often useful when you have a form with choices that were dynamically populated. For example, imagine product choices which are descriptive text. When the user selects a product, your form needs to perform an action based on a product ID rather than the descriptive product text. A nice way to do this is to have the rule that dynamically populates the product choices dropdown also populate a product ID dropdown which remains an invisible control in the form. The product choices dropdown control was assigned TypeId 'P' and the product ID dropdown control was assigned TypeId 'ID'
if (P.value.length > 0)
{
var i;
for (x in P.options) {
if (P.value == P.options[x])
i = P.options.indexOf(P.options[x]);
}
ID.value = ID.options[i] + '';
}
Here is a rule that dynamically populates both the product choices and product ID dropdowns.
if (S.value.length > 0) {
eval('x=' + http.get('http://localhost:8182/products/?category=' + S.value));
P.options = x.products;
ID.options = x.ids;
}
Here's another example of a rule that uses the frevvo Database Connector to retrieve the product choices from a Database.
if (searchproducts.clicked) {
eval('x=' + http.get('http://localhost:8181/database/products?category=' C.value));
var opts1 = ['']; // default 1st option to blank
var opts2 = [''];
for (var i=0; i < x.resultSet.length; i++) {
if (x.resultSet[i]) {
opts1[i+1] = x.resultSet[i].docdescript;
opts2[i+1] = x.resultSet[i].docnum;
}
}
P.options = opts1;
ID.options = opts2;
}
Clearing Dropdown Options
This sample resets a dropdown option to the automatically added blank option. For dropdowns added from palette controls and from schema, frevvo automatically adds a blank option so the dropdown initially shows no choice by default. To reset the dropdown to this sta