inPlaceForm - In Place Form

Contains a dynamic form.

Category

Extension Library

Syntax

<xe:inPlaceForm attributes>content</xe:inPlaceForm>
Table 1. Essential properties
Property Description
id Defaults to inPlaceForm1, inPlaceForm2, and so on.
Table 2. All properties
Category Properties
basics binding, id, loaded, partialEvents, rendered, rendererType
events afterContentLoad, beforeContentLoad
styling disableTheme, themeId

Usage

This control defines a dynamic form which acts as a container for other controls.
To display the form in a server-side script, execute the following code where inPlaceForm1 is the control identifier:
getComponent("inPlaceForm1").show()
To hide the form, execute the following code:
getComponent("inPlaceForm1").hide()
To show or hide the form depending on the current state, execute the following code:
getComponent("inPlaceForm1").toggle()

See In place editing for additional information.

This control is not tested against the latest accessibility standards. The recommended accessible path is the Data Table or Data View control.

Examples

Here a view-based repeat control contains a computed field, a link, and a dynamic form. The dynamic form contains an edit box and a button. The computed field displays the subject column for each row in the view. Clicking the link for the row displays the dynamic form whose edit box is bound to the subject data for that row, or hides the dynamic form if it is in display mode. With the form in display mode, the user can modify the data in the edit box. Clicking the button saves the data and hides the dynamic form.
<xp:this.data>
	<xp:dominoView var="view1" viewName="subject"></xp:dominoView>
</xp:this.data>
<xp:repeat id="repeat1" rows="30" value="#{view1}" var="row">
	<xp:text escape="true" id="computedField1" value="#{row.subject}"></xp:text>
	<xp:link escape="true" id="link1"><xp:this.text>
		<![CDATA[#{javascript:var c = getComponent("inPlaceForm1")
if(c.isVisible()) {
	return "Close";
} else {
	return "Edit"
}}]]></xp:this.text>
		&#160;
		<xp:eventHandler event="onclick" submit="true"
			refreshMode="partial" refreshId="repeat1">
			<xp:this.action>
				<![CDATA[#{javascript:getComponent("inPlaceForm1").toggle()}]]>
			</xp:this.action>
		</xp:eventHandler>
	</xp:link>
	<xp:br></xp:br>
	<xp:panel>
		<xe:inPlaceForm id="inPlaceForm1" partialEvents="true">
			<xp:inputText id="inputText1" value="#{document1.subject}"></xp:inputText>
			&#160;
			<xp:button value="OK" id="button1">
				<xp:eventHandler event="onclick" submit="true"
					refreshMode="partial" refreshId="repeat1">
					<xp:this.action>
						<xp:actionGroup>
							<xp:saveDocument></xp:saveDocument>
							<xp:executeScript>
								<xp:this.script>
									<![CDATA[#{javascript:getComponent("inPlaceForm1").hide()}]]>
								</xp:this.script>
							</xp:executeScript>
						</xp:actionGroup>
					</xp:this.action>
				</xp:eventHandler>
			</xp:button>
		</xe:inPlaceForm>
		<xp:this.data>
			<xp:dominoDocument var="document1" action="editDocument"
				documentId="#{javascript:row.getNoteID()}" formName="main">
			</xp:dominoDocument>
		</xp:this.data>
	</xp:panel>
</xp:repeat>