C Web Form and Web Form Control Property Reference

This appendix provides a description of the properties available for web forms and web form controls.

This appendix contains the following sections:

C.1 Web Form Properties

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.

C.1.1 Settings Tab

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.

Printable

Displays a print icon at the top of your form. If you do not want users to print your form, disable this checkbox. You can control which form fields are visible in the PDF print view via the printable property in each web form control of your form.

Save

Causes all submissions for this form to be stored in forms' submission repository. This property is enabled by default.

If you deselect this checkbox, the form submission will still be logged in the submission repository and you will be able to view the metadata about the submission (time/date submitted, success/failure conditions) but no form field data is saved.

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.


C.1.2 Style Tab

Property Description

Width

Specifies how wide your form will be. The default "regular" width is 600px, but the drop down also includes thin (400px) and wide (800px). You also may pick the custom option; this will enable the box to the right of the Width drop down and let you specify your own 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 checkbox and radio controls will be displayed vertically or horizontally.

Theme

Enables you to define a theme to which changes the appearance of your form. Oracle BPM provides two global themes: 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.

You can create a custom theme instead of using the default themes. After you have added the customized them it appears in the drop down list along with the pre-defined options.

Font Name, Font Size, and Font Color

Defines the font name, size and color properties that are applied to all labels and text on your form. You can override these properties for a particular control by editing the properties for each individual control.

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 depend on the theme you have chosen or the template you used when you created the form.


C.2 Web Form Control Properties

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.

C.2.1 Web Form Control Properties - Settings Tab

The settings tab defines the general properties of a control. The following table 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.

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:

  • Selection controls (drop down lists, radios, and check boxes).

  • Most input controls (text, text area, email, phone, quantity and number).

  • Date controls (date, time, or date/time).

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.

There are some limitations: you cannot change a selection control to an input control or vice versa. You can switch a checkbox to a drop down 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.

If your control was generated from a schema element, it will have a Display As property instead of a Control Type property.

CSS Class

Defines 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 CSS when customizing themes.

One built-in CSS class name is 'f-page-break'. If you want to add a page break to the printed view of the form's PDF, tiff, add f-page-break to the control that you want to start 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. By using this property, dates entered into the form get translated according to the chosen format and will be reformatted to match the selected format.

  • A date typed into a form field will be reformatted to match the selected Date Format

  • A date entered into a form field will be translated according to the selected format. For example, if you choose a European format of DD-MM-YYYY and enter 10-05-2009 the date value will be translated as May 10, 2009. If you choose a US format of MM-DD-YYY the date value will be translated as October 5, 2009.

  • If you choose any of MM-DD-YYYY using either "-" "/" or "." as the separator, all will be valid for that format but will be translated to the selected separator

  • Users can still enter dates like Feb 3, 2001. It will be translated into the specified format

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 will change the control's appearance but will not affect how the control handles data. If you need to 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, Repeat, 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 until all required fields are filled and contain valid data. However, sometimes you may wish to override the form's default behavior and allow the user to submit a form even if it is invalid. To do this, deselect this property.

This property applies only to Submit controls.

Enabled

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 can 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.

Error Msg

Enables you to 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.

Help

Enables you to 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.

Hide Label

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.

Hint

Enables you to create a tool tip that will display in your form when the user mouses over the control. Simply type the text for your tool tip in the Hint field.

Label

Defines the label of this 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 first 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 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.

Labels

Enables you to change the controls labels, although 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 (i.e., 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 a Options property; if the control was generated from a schema element, it has a Labels property instead.)

Max Length

Used to limit how many characters users can supply in the control. Simply type a number (positive integer) in the Max Length field. Text area controls do not support this property due to an HTML limitation. However it is very easy to add this functionality to the TextareaMaxLength text area control using a business rule.

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 will be formatted and displayed by the browser. This property applies only to message controls and is where you enter the static text that will appear on your form.

Min # and Max #

Enables you to define the minimum and maximum values 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 repeat control and apply to the input control. Simply type a number (positive integer) in the two property fields. 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 will be unable to submit the form, but they may enter as many as ten.

The minimum and maximum properties for the Table Control allow the user to add/delete table rows in a form as needed.

Min/Max properties are not editable for controls generated from an uploaded schema, since the schema already specifies this via the minOccurs and maxOccurs attributes.

Name

Defines the name of this control. This name is automatically generated and defaults to the control's label minus 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, this makes the name valid as a xsd schema element name. Control names will be truncated to 32 characters for all the controls except triggers and panels.

If you have two controls with the identical labels and at the same level, the control's name is automatically made unique. If you try to edit the name such that it would no longer be unique, Oracle Web Forms will prevent 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 then a control dropped outside a section.

Also 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 will allow you to name the controls the same. For example both Car and Boat can contain a control named VIN.

The Name property is used in several different contexts in Oracle BPM:

  • Determines how you reference the control in within form rules.

  • Used when initializing form fields via the Web_Forms_data URL parameter for controls added from the palette. Note: For controls added from XSD schema, you must use the underlying element name to initialize the control via _data.

  • Determines how you refer to form fields from document URIs.

  • Used in Form Action Display Message and Go to URL templates.

  • Used in Doc Action Email Address Templates.

  • Is the name given to the XML element corresponding to the control you drag into your form from the palette.

You can change the Name of controls from 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 could change the name of one of these controls to ''FirstName'' to make them unique within the form. This is helpful if you're 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.

Options

Defines how to populate the choices the user sees in these controls. This property appears for drop down, radio and checkbox controls.

You may have option labels different from option values. The syntax for the options is <value>=<label>. The <label> is what will be displayed on your form and the <value> is 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 overlay the values in the Options property with the values you want and add more (or delete) as necessary.

If you do not enter both <value> and <label> using the <value>=<label> syntax, then the value will default to the label. As soon as you tab off the options property, options without values will automatically be converted to the syntax.

Here the options are entered without values. In this case Oracle Web Forms will default the value to the label.

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 drop down 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 drop down 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.

What if you want a '=' character to appear in your options? Since the 1st equal sign is the delimiter between the value and the label, you can put an equal in the label as follows. For example, suppose you want your label to be "good = gold." If you enter this as the option, what you'll see in your drop down is the label "gold." To solve this, use this options string: "a=good = gold". Now the label will be as you wish.

The choices cannot be changed if they have been generated from an uploaded schema, since the schema specifies the choices. On controls generated from schema, you won't see the Options property in the Properties area. However, you can change the option labels. See Labels.

Password

Causes a the text entered in this field to be blocked out.

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).

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 will permit 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't type letters in a number field anyway. Since essentially you would be attempting to expand the allowed data types in the control, Oracle Web Forms would ignore this pattern if you entered it.

You have to first save the form before the pattern takes effect. Thus patterns cannot be tested in the form designer, only in use mode

Printable

Determines whether or not this form field will appear in the in the PDF document view of the form. If unchecked, the field will not appear in either view.

You can set the property on a section control and it will automatically apply to all controls inside the section control. This is often used in web form rules.

Required

Defines that a control is 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 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 via the minOccurs attribute. If a control from schema appears as required and you don't want it to be required, edit the XSD and set minOccurs=0. Re-upload the XSD. Then the control will no longer appear required.

This property is very useful when using rules to hide/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

Determines 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 checkbox if the data users will enter into this field contains sensitive data that should not be visible when viewed in the user interface.

Time Format

Defines the time format used by the control.

This property applies only to the Time control which is created by selecting the Time or Date/Time option from the Date control drop down. It supports standard and military time formats. By using this property, time entries entered into the form get translated according to the chosen format and are reformatted to match the selected format.

  • A time entry typed into a form field will be reformatted to match the selected Time Format.

  • A time entered into a form field will be translated according to the selected format. For example, if you choose a military time format of hh:mm:ss and enter 2:00 PM the time value will be translated as 14:00:00.

Visible

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.

# of Rows

Defines the initial size of the text area. This property applies only to text area controls. Scroll bars will appear automatically when the user reaches the # of rows you specify.


C.2.2 Web Form Control Properties - Style Tab

Use the Style tab to define display-specific properties of the text control. The following table 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.

Property Description

BG Color

Enables you to specify the color that will appear behind the control. 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.

Bold

Causes the control's label to be bold.

Border Color

Defines the border color of the control.

Border Width

Enable you to 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.

Border Style

Defines the border style of the control.

Italic

Displays the controls label in italics.

Item Width

Used to change the layout of the options from vertical (one radio/checkbox button below the next) to horizontal. This is useful to save vertical space on long forms. And 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 checkbox 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.

Margin

Enables you to add extra space around the outside of your control, while the padding permits you to add extra space within your control's boundary.

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.

Option Width

Used when option values are longer than a single line. In some cases this may cause the option value to start below the radio or checkbox on certain browsers. You can correct this by selecting a smaller option width such as 80%.

This property is used by the Radio and Checkbox controls.

Padding

See the margin property.

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. A common example is setting a text control's width to 90% for street addresses when you use the text control inside a panel as part of a two-column layout. (When a control is inside a panel or other grouping control, the width percentage is relative to the grouping control. When a control is not inside a grouping control, the width percentage is relative to the entire form.)

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, Oracle Web Forms 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.