dynamicContent - Dynamic Content (Extension Library - control)

Contains dynamic content.

Category

Extension Library

Syntax

<xe:dynamicContent attributes>
	<xp:this.facets>
		<xp:panel xp:key="facetID">content</panel>
		...
	</xp:this.facets>
</xe:dynamicContent>
Table 1. Essential properties
Property Description
id Defaults to dynamicContent1, dynamicContent2, and so on.
Table 2. All properties
Category Properties
basics binding, defaultFacet, id, loaded, partialEvents, rendered, rendererType, useHash
events afterContentLoad, beforeContentLoad
styling disableTheme, themeId

Usage

This control defines areas of alternative content that is loaded dynamically. Each content area is a panel in a facet.
To display dynamic content in a server-side script, execute the following code where dynamicContent1 is the control identifier and key_1 is the facet identifier:
getComponent("dynamicContent1").show("key_1")

Alternatively you can use a simple action. See Change Dynamic Content (Simple actions).

The Dynamic Content control can initially load a facet by identifying it as the default:
defaultFacet="key_1"

See Dynamic content for additional information.

Examples

This Dynamic Content control contains two facets. Each facet contains a panel and each panel contains a button and a Domino(r)® view. By default, the mainView facet appears at page load. Clicking the button in the mainView facet displays the subjectView facet. Clicking the button in the subjectView facet displays the mainView facet.
<xe:dynamicContent id="dynamicContent1" defaultFacet="mainView">
	<xp:this.facets>
		<xp:panel xp:key="subjectView">
			<xp:button value="Switch to main view" id="button4">
				<xp:eventHandler event="onclick" submit="true" refreshMode="partial" 
					refreshId="dynamicContent1">
					<xp:this.action>
						<![CDATA[#{javascript:getComponent("dynamicContent1").show("mainView")}]]>
					</xp:this.action>
				</xp:eventHandler>
			</xp:button>
			<xp:viewPanel rows="30" id="viewPanel1">
				<xp:this.facets>
					<xp:pager partialRefresh="true" layout="Previous Group Next" 
						xp:key="headerPager" id="pager1">
					</xp:pager>
				</xp:this.facets>
				<xp:this.data>
					<xp:dominoView var="view1" viewName="subject"></xp:dominoView>
				</xp:this.data>
				<xp:viewColumn columnName="subject" id="viewColumn1">
					<xp:viewColumnHeader value="subject" id="viewColumnHeader1"></xp:viewColumnHeader>
				</xp:viewColumn>
				<xp:viewColumn columnName="number" id="viewColumn2">
					<xp:viewColumnHeader value="number" id="viewColumnHeader2"></xp:viewColumnHeader>
				</xp:viewColumn>
				<xp:viewColumn columnName="$2" id="viewColumn3">
					<xp:viewColumnHeader value="last modified" id="viewColumnHeader3"></xp:viewColumnHeader>
				</xp:viewColumn>
			</xp:viewPanel>
		</xp:panel>
		<xp:panel xp:key="mainView">
			<xp:button value="Switch to subject view" id="button3">
				<xp:eventHandler event="onclick" submit="true" refreshMode="partial" 
					refreshId="dynamicContent1">
					<xp:this.action>
						<![CDATA[#{javascript:getComponent("dynamicContent1").show("subjectView")}]]>
					</xp:this.action>
				</xp:eventHandler>
			</xp:button>
			<xp:viewPanel rows="30" id="viewPanel2">
				<xp:this.facets>
					<xp:pager partialRefresh="true" layout="Previous Group Next" 
						xp:key="headerPager" id="pager2">
					</xp:pager>
				</xp:this.facets>
				<xp:this.data>
					<xp:dominoView var="view2" viewName="main"></xp:dominoView>
				</xp:this.data>
				<xp:viewColumn columnName="category" id="viewColumn4">
					<xp:viewColumnHeader value="category" id="viewColumnHeader4"></xp:viewColumnHeader>
				</xp:viewColumn>
				<xp:viewColumn columnName="subject" id="viewColumn5">
					<xp:viewColumnHeader value="subject" id="viewColumnHeader5"></xp:viewColumnHeader>
				</xp:viewColumn>
				<xp:viewColumn columnName="number" id="viewColumn6">
					<xp:viewColumnHeader value="number" id="viewColumnHeader6"></xp:viewColumnHeader>
				</xp:viewColumn><xp:viewColumn columnName="$2" id="viewColumn7">
					<xp:viewColumnHeader value="last modified" id="viewColumnHeader7"></xp:viewColumnHeader>
				</xp:viewColumn>
			</xp:viewPanel>
		</xp:panel>
	</xp:this.facets>
</xe:dynamicContent>