This appendix provides a description of the properties available for web forms and web form controls.
This appendix includes the following sections:
You can control the behavior and appearance of the web form by changing its properties.
Properties are edited using the properties editor which contains tabbed panes that group the web form properties by function.
The properties listed in Table B-1 are shown on the Properties control's Settings tab when a web form is selected in the designer.
Table B-1 Properties
| Property | Description |
|---|---|
|
Form Name |
Defines the name of the form. |
|
Description |
Provides a description of the web form. By default all forms use the description "Edit the form to change this description." Change this description to something specific to your form. The description appears as a tool tip when you mouse over the area just to the right of the form's share icon in the forms editor. The description is also visible when you view individual submission documents. |
|
Element Name |
Specifies the root element name in the submission xml of a form created from the designer palette. Must be a valid XML name. The name of the form is decoupled from the element name. If you want a form name with international characters, you must enter the international chars into the Element Name field. Note: If you change the element name, all existing submissions become invalid. The error message. "Submission is not valid. An incompatible change was made to the form/flow." is displayed. |
|
Save |
Causes all submissions for this form to be stored in forms' submission repository. This property is enabled by default. If you deselect this check box, the form submission is still logged in the submission repository and you are able to view the metadata about the submission (time/date submitted, success/failure conditions) but no form field data is saved. |
|
Printable |
Displays a print icon at the top of your form. If you do not want users to print your form, disable this check box. You can control which form fields are visible in the PDF print view through the printable property in each web form control of your form. |
|
Save PDF |
Enables the user to save the file as a PDF. This property can only be enabled if the save property is enabled. When selected a PDF image of the file is also saved in the forms submission repository. |
|
Decorated |
Controls whether newly added controls have their control level decorator property set or unset. Does not affect controls already in the form. |
The elements listed in Table B-2 are shown on the Properties control Settings tab when a web form is selected in the designer.
Table B-2 Elements
| Property | Description |
|---|---|
|
Width |
Specifies how wide your form is. The default "regular" width is 600px, but the drop down also includes thin (400px) and wide (800px). The custom option enables the box to the right of the Width drop down in which you can specify a width. |
|
Height |
Specifies an initial height for your form as it is loading into the browser. It does not dictate the actual height. In general, you do not have to edit the form's height property since the form can resize dynamically. However, if your form is very small it can improve the appearance as your form loads if you set height to the actual height of your form. |
|
Controls |
Determines whether the options you define for check box and radio controls are displayed vertically or horizontally. |
|
Layout |
Select a layout. The layout changes the appearance of your form. Layouts include:
|
|
Style |
Apply a style to your form by selecting a choice from the Style drop down. Styles are mainly concerned with colors but you can also specify other properties such as font name, size and color. Choices include Blue, Neutral, Green or Aqua. You can create custom styles. Customized styles also appear in the drop down list along with the pre-defined options. |
|
Print Font |
Use this property to optionally select the font used when rendering PDFs. |
You can control the behavior and appearance of each web form control by changing its properties.
Properties are edited using the properties editor which contains tabbed panes grouping the properties by function.
The settings tab defines the general properties of a control. Table B-3 provides an alphabetical list of all the control properties that appear on the settings tab.
Note:
Not all of the properties on the settings tab are used by every web form control.
Table B-3 Control Properties - Settings Tab
| Property | Description |
|---|---|
|
Control Type |
Defines the type for this web form control. You can change the type of the web form control by selecting the type from the drop-down list. This property applies to the following web form controls:
This property is populated automatically when you first add a control to a web form. 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. You cannot change a selection control to an input control or vice versa. You can switch a check box to a drop down list, but you cannot use this property to change a check box to a text control. This property is also useful for verifying what kind of controls are in your form. You assign new labels to your controls after dragging them in. This property confirms what kind of controls are in your form regardless of the labels. Controls generated from schema elements have a Display As property instead of a Control Type property. |
|
CSS Class |
Defines the control's XHTML markup class name. You can use this CSS class to reference the control in any CSS when customizing themes. Use the built-in CSS class name 'f-page-break' to add a page break to the printed view of the form's PDF, or tiff by adding it to the control that should be at the top of a new page. |
|
Date Format |
Defines the date format used in the form. This property applies only to Date controls and the Date portion of the Date/Time control. It supports European date formatting. Dates entered into the form are translated according to the chosen format and are reformatted to match the selected format.
|
|
Decorator |
If decorators are turned on for the form, when you drag an input control from the palette, it shows a default decorator icon on the left side of the control. The default depends on the type of control being dragged in. You can change the decorator for individual controls by selecting one from the dropdown list. The Textarea control is the only input control that does not have a decorator |
|
Display As |
Enables you to change the way your control looks on your form. For example, to change a text control to a drop down, select drop down from the list of allowable controls. This changes the control's appearance but does not affect how the control handles data. If you must modify the control's validation behavior, you must update the schema. The Display As property is not available for the following schema controls: Message, Upload, Image, Video, Link, Date, Time, Date/Time. This property applies only to controls generated from XSD schema elements. (If the control was dragged in from the palette, it has a Control Type property). |
|
Enable if Valid |
Enables the user to submit the form even if all of the data has not been validated. By default the form's submit button is unavailable until all required fields are filled and contain valid data. Deselect this property to allow the user to submit a form even if it is invalid. This property applies only to Submit controls. |
|
Enabled |
Determines whether the control is enabled or disabled when users first access your form. If you clear the Enabled check box, users may not enter a value in the control until the control is enabled. (You can enable the control using a Rule.) For example, you are creating a wedding invitation form and want to know if the people completing your form are bringing a guest. Your form includes a text control for the guest's name that becomes enabled only after users indicate (in another control) that they are coming to the wedding. Grouping controls cannot be disabled. |
|
Error Msg |
Specifies an error message to be displayed if the user does not supply a valid value in the control. If you leave this property blank users receive generic feedback (an "invalid value" message, for example) if they supply an invalid value. 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. |
|
Help |
Specifies detailed help about a specific control. If help text is provided, an icon appears next to the control on your form. When the user clicks, the icon, the help text you supplied in the Help property is displayed in a floating box. |
|
Hide Label |
Determines whether the control's label is displayed on your form. Check to hide the label on your form; clear to show the control's label. |
|
Hint |
Enables you to create a tool tip that displays in your form when the user mouses over the control. |
|
Label |
Defines the label of the currently selected web form control. This label is displayed in your form beside or above the control. You can hide the label in the form by enabling the Hide Label property When you add a control to a web form, it is assigned an arbitrary and unique name. After creating a control, you can change this to the text you want to appear to the end-user of your web form. You can 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 a label is not required in addition to the static text. You can use plain text or arbitrary XHMTL for the label name. |
|
Labels |
Enables you to change the control's labels. However, the XSD values for the control in the schema do not change. In other words, you can change what a user sees in the form, but not the underlying values. You cannot use the [value=label] syntax you use for palette controls to change the element values. This property applies only to controls generated from schema elements. (If you drag a control in from the palette, it has an Options property; if the control was generated from a schema element, it has a Labels property.) |
|
Max Length |
Limits how many characters, expressed as a positive integer, users can supply in the control. Text area controls do not support this property due to an HTML limitation. However, it is very easy to add this functionality to the This property is available for text controls and other input controls |
|
Message |
Enables you to include a message in your form. In addition to regular text, you may include in this property field arbitrary XHTML markup that is formatted and displayed by the browser. This property applies only to message controls and is where you enter the static text that appears on your form. |
|
Message Type |
You can choose a message type to display different pre-defined background colors, decorators or a border from the Message Type dropdown on the Setting tab of the property panel. These settings can override the values you have specified for BG Color and Label Color. For these values to take effect, select None for the Message Type. Message Type values include:
|
|
Min # and Max # (Repeat) |
Specifies the minimum and maximum times the control can be repeated when inside a Repeat control. expressed as positive integers. The Min# value defines the minimum number of controls that must be added and filled-in by the end user. If the user does not fill in data for the minimum number of controls, the Submit button is not enabled. |
|
Min # and Max # |
Enables you to define the minimum and maximum values, expressed as positive integers, a user can input in a control. These properties appear as part of a Table Control or when your form has an input control inside a control and apply to the input control. If you specify a minimum value of 1 and maximum value of 10, users must enter values in at least one input control or they are unable to submit the form. They may enter values in up to ten input controls. The minimum and maximum properties for the Table Control allow the user to add or delete table rows in a form as required. Min # and Max # properties are not editable for controls generated from an uploaded schema, since the schema already specifies this through the |
|
Name |
Defines the name of the currently selected control. This name is automatically generated and defaults to the control's label less any spaces and special characters. Spaces and special characters are removed in order to make the name valid for use in rules. For XML users, this makes the name valid as an XSD schema element name. Control names are truncated to 32 characters for all the controls except triggers and panels. If you have two controls at the same level with identical labels, the control's names are automatically made unique. If you try to edit the name such that it is no longer unique, Oracle Web Forms prevents the edit. In order to use a control in a rule the name must be unique in your form. When a control is dropped inside a section control, it is at a different nesting level than a control dropped outside a section. For example, two controls, one inside a section called Car and another in a section called Boat are also at different nesting levels. In both cases the form designer allows you to name the controls identically. Both Car and Boat can contain a control named VIN. The Name property is used in several different contexts in Oracle BPM. It:
You can change the names of controls from the schema, although schema controls maintain their underlying XSD element name. For example, suppose you are using controls from two schemas in a form and both contain a control named ''FName''. You can change the name of one of these controls to ''FirstName'' to make them unique within the form. This is helpful if you are adding rules to the form, or if you want to use the form as a template. Except for _data, controls from XSD use the same rules (as above) as controls from palette. |
|
New Line |
The New Line Property will be present for all controls that have the 12 column width selector. Selecting New Line causes the control to appear on a new line in the rendered form. Trigger and Link controls have this property checked by default. |
|
Options |
Defines how to populate the choices the user sees in the control. This property appears for drop down, radio and check box controls. You may have option labels different from option values. The syntax for the options is <value>=<label>. The <label> specifies what is displayed on your form and the <value> specifies what is saved as the selected value when the user submits the form. 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. Add or remove options as required. If you do not enter both <value> and <label> using the <value>=<label> syntax, then the value defaults to the label. As soon as you move the focus away from the options property, options without values are automatically converted to the syntax. In this case the options are entered without values. In this case Oracle Web Forms defaults the value to the label. The order of choices in your control matches the order in the Properties area. If you have choices that require a logical order, ensure the order is correct in the Properties area. You can not 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 drop down control also includes a blank option that by default appears first in the list. This blank option appears regardless of the text you supply in the Options property. You cannot remove the blank option but you can make one of the other options the default. To specify an option string that includes the "=" character, precede the string with "a=". For example, to specify the label "good = gold" specify "a=good = gold" for the option string. Choices cannot be changed if they have been generated from an uploaded schema, because the schema specifies the choices. On controls generated from schema, you can not see the Options property in the Properties area. However, you can change the option Labels. |
|
Password |
Causes the text entered in the field to be blocked out as it is entered, in a way suitable for entry of a password. This property applies only to text controls and other input controls. If you check the Password check box, the text the user enters appears on the form as asterisks. However, it is submitted as normal text. |
|
Pattern |
Enables you to define additional restrictions on the type of data a user inputs into a control. 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. In the Pattern field in the Properties area, type your pattern using XML schema regular expressions. A simple example is a pattern that restricts a text control to only allow strings formatted as a US zip code: \d{5}|\d{5}-\d{4}. If you type this expression in the Patterns property, your form permits values entered into this field only if they are five digits or 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 not type letters in a number field. Since essentially you would be attempting to expand the allowed data types in the control, Oracle Web Forms ignores this pattern if you enter it. You must first save the form before the pattern takes effect. Therefore, patterns cannot be tested in the form designer, only in use mode |
|
Placeholder |
Text entered in this field appears in your input control until data is entered. If data is removed, the placeholder text reappears. This feature does not work in IE8 or IE9. |
|
Printable |
Determines whether or not this form field appears in the in the PDF document view of the form. If unchecked, the field does not appear in either view. You can set the property on a section control and it automatically applies to all controls inside the section control. This is often used in web form rules. |
|
Required |
Specifies that a control is required. The Submit button is disabled and the form cannot be submitted until all required fields contains a valid value. Required controls are marked with a yellow gradient. You cannot mark grouping controls (tabs, sections, panels and s) required. However, sections can be marked required. If a Section has the required property checked, required controls within it show a yellow background in design and Use mode. If the Section has required unchecked, required controls within it do not show the yellow background color in design and Use mode. The yellow background color appears only when one of the required controls in the section is filled making it mandatory to fill other required controls within the section. Input controls that are direct children (directly inside) of controls also cannot be marked required, nor should they be, since the minimum and maximum properties define this. You may, however, make controls required when they are inside sections, tabs and panels. You cannot edit the required property for controls that have been generated from an uploaded schema, since the schema already specifies this through the This property is useful when using rules to hide or show sections depending on something else in the form. If you hide the section you may have to set the required property to false. |
|
Sensitive |
Controls whether the value saved in the submissions repository is hidden when viewed in the forms in the web submissions user interface. The value is not currently encrypted in the database. Click the check box if the data users enter into this field contains sensitive data that should not be visible when viewed in the user interface. |
|
Time Format |
Specifies the time format used by the control. This property applies only to the Time control created by selecting the Time or Date/Time option from the Date control drop down. It supports standard and military time formats. Time entries entered into the form are translated according to the chosen format and are reformatted to match the selected format.
|
|
Visible |
Specifies whether the control is visible or hidden when users first access your form. To dynamically show or hide the control, write a Rule that controls its visibility based on the data entered in another control. |
|
# of Rows |
Defines the initial size of the text area. This property applies only to text area controls. Scroll bars appear automatically when the user reaches the # of rows specified. |
Use the Style tab to define display-specific properties of the currently selected control. Table B-4 provides an alphabetical list all of the properties available on the Style tab.
Note:
Not all of the properties listed below are available for every web form control.
Table B-4 Properties - Style Tab
| Property | Description |
|---|---|
|
BG Color |
Enables you to specify the color that appears behind the control. Enter 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. |
|
Bold |
Causes the control's label to be bold. |
|
Button Color |
Selects the color of a button control. |
|
Center |
Causes the content of the control to be centered. Applies to Message controls. |
|
Date Picker |
Enables an date picker control which pops up an interactive calendar. Applies to Date controls. |
|
Expand/Collapse |
Enables an expand/collapse control. Applies to Section controls. |
|
Italic |
Displays the controls label in italics. |
|
Item Width |
Enables you to change the layout of the options from vertical (one radio or check box button below the next) to horizontal. This is useful to save vertical space on long forms. It is also useful to improve ease of use for forms with questions that each have the same set of options. This property is used by the radio and check box controls |
|
Label Color |
Enables you 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 drop down, for example. |
|
Label Size |
Defines the size (in pixels) of the label. |
|
Width |
Used to specify the width of the control. For input controls, the property specifies the width of the area in which users enter data; for example, you might narrow a control used for entering zip codes or widen a control for a full first, middle, and last name. All control widths are specified in columns, from a minimum of one column to a maximum of 12 columns wide. You can have any combination of controls widths on one line - (e.g. Three controls: 3, 4 and 5 grid columns wide respectively or four controls 2, 2, 4,and 4 grid columns wide.). The width is selected by clicking on a grid in the Style tab. When you drag and drop most controls from the palette on to the canvas, the control will be 12 columns wide. The trigger, link and panel controls are the exception - the default width of the trigger and link controls is 3 columns while the panel is 6. To change the width, click the number of divisions on the grid corresponding to how wide you want the control to be. When you make a control n columns wide (6, for example), the entire control takes up 6 columns. As a result, if there is space, controls will float up next to other controls. You can prevent this using the New Line property. The decorator does not affect the visible control width. The visible width of controls which add up to the same width of another control is exactly the same. For example, a control that is 2 grid columns wide + a control that is 4 grid columns wide is the same width as a control that is 6 columns wide. There is no Width property for sections or tables controls - they are always 12 columns wide. Repeats are also always 12 columns wide. 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. When setting a control's width property you may use standard CSS-relative values; for example, 5%, 5em, 5ex or 5px. Note that control widths are ignored on the iPhone and the iPad even if you have explicitly specified them. |