configuration - Application Configuration

Controls the structure of the application layout.

Syntax

Syntaxes for xe:applicationConfiguration and xe:oneuiApplication

<xe:this.configuration>
	<xe:applicationConfiguration attributes>content</xe:applicationConfiguration> |
	<xe:oneuiApplication attributes>content</xe:oneuiApplication>
</xe:this.configuration>

Syntax for xe:simpleResponsiveConfiguration

<xe:this.configuration>
	<xe:simpleResponsiveConfiguration attributes>content</xe:simpleResponsiveConfiguration> |
</xe:this.configuration>

Table 1. Properties for `xe:applicationConfiguration` and `xe:oneuiApplication`
Property	Description
`banner="true\|false"`	Whether the banner is visible. Defaults to true. The banner is at the top of the layout area and contains the application logo, other application links, and a login link.
`<xe:this.bannerApplicationLinks>nodes </xe:this.bannerApplicationLinks>`	Application links in the banner. See treeNodes for the content of `nodes`.
`<xe:this.bannerUtilityLinks>nodes </xe:this.bannerUtilityLinks>`	Utility links in the banner. See treeNodes for the content of `nodes`.
`defaultNavigationPath="path"`	Default navigation path.
`footer="true\|false"`	Whether the footer is visible. Defaults to true. The footer is at the bottom of the layout area and contains the footer links. See `mastfooter` to place footer content outside the layout area.
`<xe:this.footerLinks>nodes </xe:this.footerLinks>`	Links in the footer. See treeNodes for the content of `nodes`. You can add multiple links or groups of links. Links appear vertically and groups appear horizontally.
`leftColumnLabel="text"`	Descriptive text for an assistive technologies label.
`legal="true\|false"`	Whether the legal bar is visible. Defaults to true. The legal bar is below the footer area and contains the legal logo and text.
`legalLogo="image"`	Pathname for an image on the legal bar. The image should be the logo for the organization holding copyright access to the content.
`legalLogoAlt="text"`	Alternate text for the legal logo image.
`legalLogoClass="class(es)"`	CSS style classes to be applied to the legal logo. Used for CSS image sprites.
`legalLogoHeight="30px\|50%\|10em\|auto\|inherit"`	Height of the legal logo image. Setting this slightly improves browser performance.
`legalLogoStyle="style(s)"`	CSS styles to be applied to the legal log.
`legalLogoWidth="50%\|30px\|10em\|2cm\|auto\|inherit"`	Width of the legal logo image. Setting this slightly improves browser performance.
`legalText="text"`	Text displayed on the legal bar. The text should be for copyrights, trademarks, and license information.
`loaded="true\|false"`	Whether the tag instance should be created when the page is loading. Defaults to true.
`mastFooter="true\|false"`	Whether the mast footer is visible. Defaults to true. The mast footer follows the layout area as a facet with the following properties: attrs binding facetName (must be `facetName="MastFooter"`) id loaded rendered rendererType
`mastHeader="true\|false"`	Whether the mast header is visible. Defaults to true. The mast header precedes the layout area as a facet with the following properties: attrs binding facetName (must be `facetName="MastHeader"`) id loaded rendered rendererType
`navigationPath="path"`	Navigation path.
`placeBar="true\|false"`	Whether the place bar is visible. Defaults to true. The place bar is just above the main content area and contains the place bar name and actions.
`<xe:this.placeBarActions>nodes </xe:this.placeBarActions>`	Links on the place bar. See treeNodes for the content of `nodes`. The links are displayed as buttons at the end of the place bar.
`placeBarName="text"`	Text on the place bar.
`placeBarLabel="text"`	Descriptive text for an assistive technologies label.
`productLogo="image"`	Pathname for the product logo which appears above the title.
`productLogoAlt="text"`	Alternate text for the product logo image.
`productLogoClass="class(es)"`	CSS style classes to be applied to the product logo. Used for CSS image sprites.
`productLogoHeight="30px\|50%\|10em\|auto\|inherit"`	Height of the product logo image. Setting this slightly improves browser performance.
`productLogoStyle="style(s)"`	CSS styles to be applied to the product log.
`productLogoWidth="50%\|30px\|10em\|2cm\|auto\|inherit"`	Width of the product logo image. Setting this slightly improves browser performance.
`rightColumnLabel="text"`	Descriptive text for an assistive technologies label.
`<xe:this.searchBar> <xe:appSearchBar attributes> content </xe:appSearchBar </xe:this.searchBar>`	An `xe:appSearchBar` control with properties as follows: `inactiveText` - text for inactive search box `inputTitle` - accessibility title `legend` - legend for search options and keyword controls `loaded` - whether tag instance is created when page is loaded `options` - search combo box options; see treeNodes for the content of its nodes `optionsParam` - name of the parameter for the selected search option in the query part of the URL `pageName` - name of a page for the search results `queryParam` - name of the parameter for the search value in the query part of the URL; defaults to `search` `rendered` - whether the search bar should be rendered; defaults to only if the application is indexed `scopeTitle` - accessibility title for search options
`titleBar="true\|false"`	Whether the title bar is visible. Defaults to true. The title bar is above the place bar and contains the title bar name and tabs.
`titleBarName="text"`	Text on the title bar.
`titleBarLabel="text"`	Descriptive text for an assistive technologies label.
`<xe:this.titleBarTabs>nodes </xe:this.titleBarTabs>`	Links on the title bar. See treeNodes for the content of `nodes`. The links are displayed as navigation tabs.

Table 2. Properties for `xe:simpleResponsiveConfiguration`
Property	Description
`fixedNavbar="option"`	Indicates the position of the Navbar. There are three options: `fixed-top` (the Navbar is fixed to the top of the page), `fixed-bottom` (the Navbar is fixed to the bottom of the page), `unfixed-top` (the Navbar is positioned at the top of the application, but not fixed in place). When fixed the Navbar will remain in place at the top or bottom of the browser window when scrolling. The default is `unfixed-top`
`invertedNavbar="true\|false"`	Boolean Indicates whether the Navbar should use an inverted color styling. The inverted style gives the Navbar a dark background with light colored text. False by default.
`navbar="true\|false"`	Boolean. Indicates if the Navbar should be displayed in the Application Layout. True by default.
`navbarLogo="image_file_path"`	The Navbar logo is a logo or branding image that will appear in the Navbar of the Application Layout. This property supplies a path to an image for the logo.
`navbarLogoAlt="alt_text"`	Text. Specifies the alternate text for the "navbarLogo" image used by screen reading software.
`navbarLogoStyle`	The Navbar logo can be provided here as a background image, as an alternative to using an image tag which would be generated when using the "navbarLogo" property.
`navbarLogoClass`	Similar to the Navbar Logo Style this can provide the Navbar logo as a background image, in this case using a CSS style class reference, rather than a style directly in the page.
`navbarText="your_text"`	Text. Specifies the text that will appear in the branding area of the Navbar of the Application Layout.
`navbarTextStyle`	Specifies the CSS style property to define the visual style of the heading of the "navbarText".
`navbarTextClass`	Specifies the CSS style class(es) property to define the CSS class(es) assigned to the "navbarText".
`<xe:this.navbarUtilityLinks>nodes </xe:this.navbarUtilityLinks>`	Utility links are a set of links or menus that appear in the Navbar, before the Navbar content area. See treeNodes for the content of `nodes`.
`<xe:this.navbarApplicationLinks>nodes </xe:this.navbarApplicationLinks>`	Application links are a set of links or menus that appear in the Navbar, after the Navbar content area. See treeNodes for the content of `nodes`.
`pageWidth`	Determines the width of the application layout: "full" means use the full width of the browser, "fluid" means use the Bootstrap fluid container (almost full width), fixed means use the Bootstrap fixed width container, which fixes the width of the content of the container to a central column in the application.
`collapseLeftColumn="true\|false"`	Boolean. Indicates whether the left column facet should be collapsed on smaller screens. When collapsed a button will appear on the page instead of the left facet, and clicking the button will activate a dropdown menu.
collapseLeftTarget	By default the Menu dropdown button for a collapsed left column is attached to the left column. Optionally you can enter a selector here to which the menu should be attached (jQuery syntax, see `http://api.jquery.com/category/selectors/`). Sample values: `.applayout-column-left` (after the element with the applayout-column-left class) or `.applayout-banner-collapse`.
`leftColumnLabel="label_text"`	Defines a textual description for the Left Column Facet to support assistive technologies to provide a recognizable label.
`rightColumnLabel="label_text"`	Defines a textual description for the Right Column Facet to support assistive technologies to provide a recognizable label.
`searchBar`	Configures the search area that appears in the Navbar, including the search edit box and button, and the optional dropdown list of search options.

Usage

In Design mode, click All Properties and look for configuration under basics.

Examples

Here is a custom control that defines an application layout using the oneuiApplication configuration. The configuration provides editable areas for the left (facet_1) and middle (facet_2) columns. The right column is not used.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
	<xe:applicationLayout id="applicationLayout1">
		<xp:callback facetName="facet_2" id="callback2"></xp:callback>
		<xp:this.facets><xp:callback facetName="facet_1" id="callback1"
			xp:key="LeftColumn"></xp:callback></xp:this.facets>
		<xe:this.configuration>
			<xe:oneuiApplication
				placeBarName="Welcome to the application"
				productLogo="/xpagesui-logo.jpg" productLogoAlt="XPages UI logo"
				productLogoHeight="50%">
				<xe:this.footerLinks>
					<xe:basicContainerNode>
						<xe:this.children>
							<xe:basicLeafNode label="IBM"
								href="http://www.ibm.com">
							</xe:basicLeafNode>
							<xe:basicLeafNode label="Google"
								href="http://www.google.com">
							</xe:basicLeafNode>
						</xe:this.children>
					</xe:basicContainerNode>
				</xe:this.footerLinks>
				<xe:this.titleBarTabs>
					<xe:pageTreeNode label="main" page="/main.xsp"></xe:pageTreeNode>
					<xe:pageTreeNode label="mainview"
						page="/mainview.xsp">
					</xe:pageTreeNode>
				</xe:this.titleBarTabs>
			</xe:oneuiApplication>
		</xe:this.configuration>
	</xe:applicationLayout>
</xp:view>

Here is an example that uses the Simple Responsive Configuration application layout:

<xe:applicationLayout id="applicationLayout1">
	<xe:this.configuration>
		<xe:simpleResponsiveConfiguration fixedNavbar="fixed-bottom"
			pageWidth="fluid"
			invertedNavbar="true"
			collapseLeftColumn="true"
			collapsedLeftMenuLabel="Menu"
			collapseLeftTarget=".applayout-column-left"
			navbarText="Navbar Text"
			navbarTextStyle="font-weight:bold;">
			<xe:this.navbarUtilityLinks>
				<xe:basicLeafNode href="page1.xsp"></xe:basicLeafNode>
				<xe:basicLeafNode href="page2.xsp"></xe:basicLeafNode>
			</xe:this.navbarUtilityLinks>
		</xe:simpleResponsiveConfiguration>
	</xe:this.configuration>
	
	......

</xe:applicationLayout>

configuration - Application Configuration

Category

Syntax

Usage

Examples