Development tools : XUI editor : XUI widgets and containers : Containers Description : Form
  
Form
The Form container is used to fill with other widgets and submit data. For example, developers usually place widgets like text, label and combo box in a form container. These widgets are often bound to predefined data within the transaction.
See
Implementation base
Properties for the Form widget
Cross-field validation
See also
Containers Description
Implementation base
The Form widget is a Dojo-based widget:
▪ com.ibm.btt.dijit.Form
See also
Form
Properties for the Form widget
 
Property
Description
id
The identifier for the widget.
validateOnSubmit
The validateOnSubmit property specifies whether validation is required for the widgets that are contained in the form. If the validateOnSubmit property is set to true and any of the widgets that are contained in the form fail during validation or the cross validation fails, the submit button is disabled. The default value is true.
fastTab
The fastTab property specifies Boolean value. The form can be focused by Tab when the fastTab property is specified astrue (default).
defaultAction
The defaultAction property specifies the default server-side action that ran when the form is submitted. This property is set in the Action tab of the Properties view. The defaultAction property consists of the following subproperties:
flowEvent
The flowEvent is the event that is sent to the UDTT navigation flow and causes the processor to proceed to the next state when the form is submitted.
flowId
The flowId is the ID of the UDTT flow that is started when the form is submitted. If a flowId is specified, a new flow instance is created and initiated on the server.
operationId
The operationId is the ID of the UDTT operation that is started when the form is submitted.
The values that are specified for the defaultAction property are used in the following scenarios:
▪ When a user clicks a submit button and the action property of the submit button does not have a value.
▪ When a user submits a form by using a mechanism other than by clicking a submit button, for example, by pressing the Enter key.
▪ When the submit() method is started by client-side code.
styleClass
The styleClass property specifies the name of the CSS style ( also known as CSS style class) associated with the widget. This property is set by selecting a style from the CSS styles table in the Style tab of the Properties view. If you do not configure the styleClass property, the default style is used instead. For more detailed information, refer to Setting CSS style to widgets.
width
The width property specifies the width of the widget. This property is set in the Appearance tab of the Properties view.
height
The height property specifies the height of the widget. This property is set in the Appearance tab of the Properties view.
generateLayout
The generateLayout property specifies whether to generate the HTML layout. The default value is true.
generateInlineStyle
The generateInlineStyle property specifies whether to generate the inline styles. The default value is true.
See also
Form
Cross-field validation
Cross-field Validation function is used to validate multiple fields in a form if their values are correlative. Submit type buttons in the form is disabled until all the defined cross-field validations for the form are valid. For more information, see Defining xValidation in XUI editor.
See
ECA editor support
See also
Form
ECA editor support
The following events, properties, and functions can be configured for the Form widget with the ECA editor.
Events that can be added to the Form widget by using the ECA editor
 
Event
Description
onClick
Is fired when the left mouse button is clicked.
onFocus
Is fired when the widget receives focus because the user moves the mouse pointer over the widget.
onBlur
Is fired when the widget does not receive focus, or when the user clicks outside the widget, or when the widget is hidden.
onKeyDown
Is fired when a keyboard key is pressed.
onKeyUp
Is fired when a keyboard key is released.
onKeyPress
Is fired when a keyboard key is pressed or held down.
onMouseDown
Is fired when a mouse button is clicked.
onMouseUp
Is fired when a mouse button is released.
onMouseEnter
Is fired when the mouse pointer moves over the widget.
onMouseLeave
Is fired when the mouse pointer moves out of the widget.
onMouseMove
Is fired when the mouse pointer moves over nodes that are contained in the widget.
onSubmit
Is fired when the form is submitted.
onReset
Is fired when the form is reset.
onValidStateChange
Is fired when the valid state of the form changes.
onLoaded
Is fired when the form and the widgets inside the form loaded.
onAsyncOK
Is fired when the page successfully updated with AJAX.
onAsyncError
Is fired when the page failed to be updated with AJAX.
onAsyncTimeOut
Is fired when the AJAX times out.
onWidgetChange
Is fired when any widget value inside the form is changed.
Properties that can be configured for the Form widget by using the ECA editor
 
Property
Description
id
This property can be used in the Condition part of ECA rule.
validateOnSubmit
The validateOnSubmit property specifies whether validation is required for the widgets that are contained in the form. If the validateOnSubmit property is set to true and any of the widgets that are contained in the form fail during validation, the submit button can be disabled. The default value is true.
This property can be used in the Condition and Actions part of ECA rule.
asyncStatus
The asyncStatus property specifies the status of the AJAX. The status is provided as an HTTP status code.
This property can be used in the Condition part of ECA rule.
asyncErrorMessage
The asyncErrorMessage property provides an error message an AJAX. The error message is retrieved from the browser-side.
This property can be used in the Condition part of ECA rule.
asyncCode
The asyncCode property specifies the code that is used as the identifier for the AJAX.
This property can be used in the Condition part of ECA rule.
styleClass
This property can be used in the Actions part of ECA rule.
Functions that can be configured for the Form widget by using the ECA editor
 
Function
Description
isValid
Returns a value of true if all the widgets that are contained in the form are valid according to client-side validation rules. Client-side validation rules are defined as Type parameters.
This function can be used in the Condition part of ECA rule.
validate
Returns a value of true if the form is valid. The validate function has the following two features that the isValid function does not have:
▪ Highlights the widgets that are contained in the form that are not valid.
▪ Calls the focus() method on the first invalid widget that is contained in the form.
Note This function can be used in the Actions part of ECA rule.
submit
Programmatically submits the form data to the server, and then the action that is specified in the defaultAction property is performed on the server.
Note This function can be used in the Actions part of ECA rule.
callAsyncOperation
Submits the form data in an asynchronous request, which runs the specified operation that is specified in the 'operationId' parameter. After the operation ran, the form is updated with the response data and the 'asynCode' property of the form is set as the value specified in the 'asynCode' parameter. The 'timeOut' is the specified number of milliseconds of the asynchronous request. The 'inputMapper' maps browser form fields to operation context. The 'outputMapper' maps operation context to browser form fields.
The mappings for AJAX operations relate form fields with the started operation
See also
Cross-field validation