formTable - Form Table

Formats input controls in rows and columns. Provides header, footer, and message areas.

Category

Extension Library

Syntax

<xe:formTable attributes>content</xe:formTable>
Table 1. Essential properties
Property Description
id Defaults to formTable1, formTable2, and so on.
formTitle Specifies a title for the top of the table.
formDescription Specifies text to be placed under the title.
labelPosition Specifies the default position for labels in rows in relation to the control: left (default), above, or none.
Table 2. All properties
Category Properties
accessibility ariaLabel, legend
basics binding, disableErrorSummary, disableRowError, errorSummaryText, fieldHelp, formDescription, formTitle, id, labelWidth, loaded, rendered, rendererType
format disableRequiredMarks, labelPosition
styling disableTheme, style, styleClass

Examples

This example displays a table with two columns each with one row containing an edit box. The effect is to display the edit boxes on one line. A header provides explanatory text and a footer provides save and cancel buttons.
<xe:formTable id="formTable1" formTitle="Subject and number"
formDescription="Provide your input in the boxes below.">
	<xe:formColumn>
		<xe:formRow id="formRow1" label="Subject" for="inputText1">
		<xp:inputText id="inputText1"
			value="#{document1.subject}">
		</xp:inputText>
		</xe:formRow>
	</xe:formColumn>
	<xe:formColumn>
		<xe:formRow id="formRow2" label="Number" for="inputText2">
		<xp:inputText id="inputText2"
			value="#{document1.number}">
		</xp:inputText>
		</xe:formRow>
	</xe:formColumn>
	<xp:this.facets>
		<xp:panel xp:key="footer" id="panel1">
			<xp:button value="Save" id="button1">
				<xp:eventHandler event="onclick" submit="true"
					refreshMode="complete" immediate="false" save="true">
				</xp:eventHandler>
			</xp:button>
			<xp:button value="Cancel" id="button2">
				<xp:eventHandler event="onclick" submit="true"
					refreshMode="complete" immediate="true" save="false">
				</xp:eventHandler>
			</xp:button>
		</xp:panel>
	</xp:this.facets>
</xe:formTable>