NC4: E Team - R9.8 E Team Form Builder - Properties Settings

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 seen depend on the type of control selected on your form. Some controls have more properties than others. All properties are optional, with the exception of the control label.  This area can also be used to set default values for your controls.

Properties - Settings

Upon entering the Form Builder design workspace Settings displays only the Form Name and Description given during the initial create steps along with some default values. There is no need to edit the Form Properties.

As controls are selected, or dragged and dropped onto the form, additional fields are displayed allowing the user to further define the fields.

To edit a control’s property Settings click on the control in your form. Properties area will display the control’s existing Settings, so you can edit them.

• 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. Change a control’s label either on the form itself (by clicking the control and selecting the label) or by entering data in the Properties Label field. Message controls are the only controls without labels—they are used for static text so they do not need a label.  Users are not restricted to plain text for labels. XHMTL may be used when typing the label name. For example to include a standard label with additional text in two different font sizes and colors as seen below:
  
  In the Label field, type the following 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) to produce the symbol.
• 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.
• Name - A control's name defaults to its label removing any spaces and special characters. Spaces and special characters are removed in order to make the name valid for use in rules and for XML users, valid as a xsd schema element name.  Also note that if you have two controls with the same label, the control's name will automatically be made unique. Users will be prevented from editing the name such that it would no longer be unique by appending a numeric value to the 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 addition if you want to require a specific area code—area code 203, for example. 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. For purposes of this 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, this pattern would be ignored if entered.  It is recommended when using a pattern that you enter a corresponding Error Msg and applicable Help text for display to your users.
• Max Length - This property is available for text controls and other input controls and limits how many characters users can enter in the field. Enter a positive integer in this 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 number of rows specified.
• 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 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.  If you set the min# to 0, users initially will see one control but won’t be required to supply an input value to submit the form.
• Error Msg - This property 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.
• 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.
• Hint - This property lets you create a tooltip that will display in your form when the user mouses over the control.
• Help - This property lets you provide more detailed help about a specific control. If you enter text here, an 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.
• 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 replace the values in the Options property with the values you want.  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 want a dropdown of US states to be sorted alphabetically) 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.
• 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.  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.
• 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.
• 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. However, it will be submitted as normal text. This option is generally used in conjunction with a custom forms rule based on your specific needs.
• 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.

Properties - Style

To access a control’s style properties, click on the control in your form, then click the Style tab in Properties. Some controls have more style properties than others, so the specific style properties you see depend on which control you click in your form.

• 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.  This property is important for panel controls because you must adjust the panel widths before your columns will line up side by side. The width 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.  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, form builder 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.
• Item Width - Radio and Checkbox controls have this extra property called Item Width. You can use this property to change the layout of the options from vertical (one radio/checkbox button below the next) to horizontal.
• Margin and Padding - Margin and Padding are two separate but similar style properties 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. Enter 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. When no value entered the default background is white.
• Border Width, Style, 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.  You may not apply borders to panels but you may create borders around controls you drag inside panels. Specify 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 works best.
• Label Color and Size - These properties let you specify 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.
• Bold - Check this checkbox to make the control's label bold.
• Italic - Check this checkbox to italicize the control’s label.

Setting Default Values

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 (click 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.

When pasting data into any Properties field, we recommend you first place the data into notepad then copy and paste it into you custom form design.