dynamicViewPanel - Dynamic View

Displays data from documents in rows and columns allowing dynamic selection of the base view.

Category

Extension Library

Syntax

<xe:dynamicdynamicViewPanel attributes>
	<xe:this.facets>
		<xp:pager attributes></xp:pager>
	</xe:this.facets>
	<xe:this.data>
		<xp:dominoView attributes></xp:dominoView>
	</xe:this.data>
	<xp:viewColumn attributes">
		<xp:viewColumnHeader attributes></xp:viewColumnHeader>
	</xp:viewColumn>
	...
</xe:dynamicdynamicViewPanel>
Table 1. Essential properties
Property Description
id (dynamicViewPanel) Defaults to dynamicViewPanel1, dynamicViewPanel2, and so on.

(viewColumn) Defaults to viewColumn1, viewColumn2, and so on.

(viewColumnHeader) Defaults to viewColumnHeader1, viewColumnHeader2, and so on.

rows (dynamicViewPanel) This is the number of rows displayed at once which is 30 by default.
data (dynamicViewPanel) Binds a Domino® view to the control.
viewName under data (dynamicViewPanel) Determines the view. Can be changed.
pageName (dynamicViewPanel) By default the XPage associated with the document's form is used to open a selected document when a column item is a link. Here a specified XPage can be used.
columnName (viewColumn) The column names from the data source are set up through the view creation dialog and can be changed later.
displayAs, (viewColumn) By default items display as text. Specify displayAs="link" to change these items to links to the underlying documents.
value (viewColumnHeader) This is the label for the column header.
Table 4. All properties (viewColumnHeader)
Category Properties
accessibility role
basics attrs, binding, htmlFilter, id, loaded, rendered, rendererType, sortable, value
format contentType, iconAlt, iconSrc, showCheckbox
styling disableTheme, style, styleClass, themeId

Pagers

A facets region containing a pager or pagers is part of the view depending on Design specifications. You can place other controls, such as panels, in the facet region. Use Source mode to work within the facet region.

Here is a sample facet for pager controls:

<xp:this.facets>
	<xp:pager partialRefresh="true" layout="Previous Group Next"
		xp:key="headerPager" id="pager1">
	</xp:pager>
	<xp:viewTitle xp:key="viewTitle" id="viewTitle1" value="View Title"></xp:viewTitle>
	<xp:pager partialRefresh="true" layout="Previous Group Next"
		xp:key="footerPager" id="pager2">
	</xp:pager>
</xp:this.facets>
The following boxes on the Display tab under Properties affect the facet content as follows:
  • Show pager in header (selected by default) generates a pager control of key headerPager. No facets regions is generated if this is cleared.
  • Show pager in footer (cleared by default) generates a pager control of key footerPager.
  • Show title (cleared by default) generates the viewTitle control.

Usage

A View control essentially displays a Domino® view. In Design mode, you provide the name of the bound Domino® view and other information in a dialog when you create the dynamicViewPanel control. After creation, you can right-click or use the menu to add insert, append, and delete columns.

When you configure views to display categories of data, users can expand and collapse (toggle) the categories at run time. Categories are collapsed by default. When users toggle categories, the XPage reloads so that the data on the XPage stays synchronized with the server.

For paging, a collapsed category counts as one row. For example, if you have configured a pager to navigate five rows and there are five collapsed rows of data in the view, each time a user clicks the back or forward button, the pager counts five categories, not individual hidden rows. Also, the toggle state of categories persists as users navigate back and forth through the pages of data.

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

Examples

Upon opening, this page displays the main view. Thereafter the user can select a view from a combo box.
<xp:label id="label1" value="Select a view"
	style="color:rgb(0,128,255);font-weight:bold">
</xp:label>
<xp:comboBox id="comboBox1" value="#{viewScope.viewName}">
	<xp:selectItems>
		<xp:this.value><![CDATA[#{javascript:var v = database.getViews();
		var a = [];
		for(var i=0; i<v.size(); i++) {
			a[i] = v[i].getName()
		}
		return a}]]></xp:this.value>
	</xp:selectItems>
	<xp:eventHandler event="onchange" submit="true"
		refreshMode="complete">
	</xp:eventHandler>
</xp:comboBox>
<xp:br></xp:br>
<xe:dynamicViewPanel id="dynamicViewPanel1">
	<xe:this.data>
		<xp:dominoView var="view1">
			<xp:this.viewName>
				<![CDATA[#{javascript:return viewScope.viewName == null ? "main" : viewScope.viewName}]]>
			</xp:this.viewName>
		</xp:dominoView>
	</xe:this.data>
</xe:dynamicViewPanel>