Home
HCL Domino Designer XPages User Guide
This guide focuses on the aspects of creating applications using XPages technology.
Designing XPages applications
HCL Domino® Designer provides the means to populate an XPage with controls and other artifacts, and to associate an XPage with data stores.
Adding controls from the XPages Extension Library
The XPages Extension Library provides additional controls ready to use. The controls include an application layout object, an improved dialog, pickers, in place forms, Dojo components, dynamic content, and much more. The controls support enhancements to the Domino(r)® templates.
Control reference (Extension Library)
Specified here are the XPages Extension Library controls.
singlePageApp - Single Page Application
Contains a mobile application. Controls its layout and configuration.

HCL Domino Designer XPages User Guide
This guide focuses on the aspects of creating applications using XPages technology.
- Product overview
  HCL Domino® Designer supports applications development for the HCL Domino platform using XPages, forms, views, and other elements such as controls.
- Tutorials
  This section contains tutorials and information about tutorials.
- Administering applications
  HCL Domino Designer provides features for administering and managing your work and related files while developing your application projects.
- Designing XPages applications
  HCL Domino® Designer provides the means to populate an XPage with controls and other artifacts, and to associate an XPage with data stores.
  - Previewing and running XPages
    XPages run in Domino® server and Notes® client environments. From Domino Designer, you can preview XPages in both environments.
  - Adding controls
    Controls are visual elements such as edit boxes, buttons, images, and text that allow users to manipulate data on an XPage.
  - Adding controls from the XPages Extension Library
    The XPages Extension Library provides additional controls ready to use. The controls include an application layout object, an improved dialog, pickers, in place forms, Dojo components, dynamic content, and much more. The controls support enhancements to the Domino(r)® templates.
    - Using controls from the XPages Extension Library
      Here are guidelines for using some of the controls in the XPages Extension Library.
    - Using templates from the XPages Extension Library
      Extended versions of the discussion and team room templates are provided.
    - @Functions (Extension Library)
      Specified here are the XPages Extension Library @functions.
    - Simple actions (Extension Library)
      Specified here are the XPages Extension Library simple actions.
    - Control reference (Extension Library)
      Specified here are the XPages Extension Library controls.
      - accordion - Accordion
        Contains nodes that expand to reveal their content.
      - applicationLayout - Application Layout
        Provides a layout for an XPage including responsive and non-responsive layout options.
      - appPage - Application Page
        Contains one application page. Only one page displays at a time.
      - breadCrumbs - Bread Crumbs
        Presents a list of locations.
      - calendarView - iNotes® Calendar
        Displays an iNotes® calendar.
      - carousel - Carousel
        Provides a slideshow component that can be added to your application.
      - dashboard - Dashboard
        Provides a component that can be used to highlight important information to users at a glance in an application.
      - dataView - Data View
        Displays data as a view.
      - dialog - Dialog
        Defines a modal dialog.
      - dialogButtonBar - Dialog Button Bar
        Contains buttons in a dialog.
      - dialogContent - Dialog Content
        Contains content in a dialog.
      - djAccordionContainer - Dojo Accordion Container
        Contains panes that expand to reveal their content.
      - djAccordionPane - Dojo Accordion Pane
        Provides content for one pane in an accordion container.
      - djBorderContainer - Dojo Border Container
        Contains panes situated at various regions within the container.
      - djBorderPane - Dojo Border Pane
        Provides content for one pane in a border container.
      - djButton - Dojo Button
        Activates an event handler.
      - djCheckBox - Dojo Check Box
        Accepts a check box as true or false.
      - djComboBox - Dojo Combo Box
        Accepts a selected value.
      - djContentPane - Dojo Content Pane
        Provides content for a container.
      - djCurrencyTextBox - Dojo Currency Text Box
        Accepts currency input.
      - djDateTextBox - Dojo Date Text Box
        Accepts a date value.
      - djextImageSelect - Dojo Image Select
        Accepts a value based on a selected image.
      - djextLinkSelect - Dojo Link Select
        Accepts a value based on a selected link.
      - djextListTextBox - Dojo List Text Box
        Accepts a list of values.
      - djextNameTextBox - Dojo Name Text Box
        Accepts a list of names.
      - djFilteringSelect - Dojo Filtering Select
        Accepts a selected and filtered value.
      - djHorizontalSlider - Dojo Horizontal Slider
        Accepts a numeric value from a horizontal slider.
      - djNumberSpinner - Dojo Number Spinner
        Accepts a numeric value that is an increment of a starting value.
      - djNumberTextBox - Dojo Number Text Box
        Accepts a numeric value.
      - djRadioButton - Dojo Radio Button
        Accepts the value of a selected radio button.
      - djSimpleTextarea - Dojo Simple Text Area
        Accepts text input on multiple lines.
      - djSliderRule - Dojo Slider Rule
        Adds a rule (hash marks) for a horizontal or vertical slider.
      - djSliderRuleLabels - Dojo Slider Rule Labels
        Adds labels to the rule for a horizontal or vertical slider.
      - djStackContainer - Dojo Stack Container
        Contains panes stacked on top of each other.
      - djStackPane - Dojo Stack Pane
        Provides content for one pane in a stack container.
      - djTabContainer - Dojo Tab Container
        Contains panes on tabs.
      - djTabPane - Dojo Tab Pane
        Provides content for one pane in a tab container.
      - djTextarea - Dojo Text Area
        Accepts text input on multiple lines.
      - djTextBox - Dojo Text Box
        Accepts text input on one line.
      - djTimeTextBox - Dojo Time Text Box
        Accepts a time value.
      - djToggleButton - Dojo Toggle Button
        Toggles between a checked value and an unchecked value.
      - djValidationTextBox - Dojo Validation Text Box
        Accepts a validated value.
      - djVerticalSlider - Dojo Vertical Slider
        Accepts a numeric value from a vertical slider.
      - djxDataGrid - Dojo Data Grid
        Defines a grid of rows and columns.
      - djxDataGridColumn - Dojo Data Grid Column
        Defines the content of a column. Can be inserted into a grid or row.
      - djxDataGridRow - Dojo Data Grid Row
        Defines multiple rows.
      - djxmHeading - Page Heading
        Provides header information and basic navigation.
      - djxmLineItem - Rounded List Item
        Provides a way to link to other mobile pages.
      - djxmRoundRectList - Rounded List
        Displays a rectangle with rounded corners.
      - djxmSwitch - Toggle Switch
        Works as an on/off switch with behavior like a checkbox.
      - dropDownButton - DropDown Button
        Defines nodes that organize content as a dropdown button.
      - dumpObject - Dump Object
        Displays the content of one or more objects.
      - dynamicContent - Dynamic Content (Extension Library - control)
        Contains dynamic content.
      - dynamicViewPanel - Dynamic View
        Displays data from documents in rows and columns allowing dynamic selection of the base view.
      - firebugLite - Firebug Lite
        Enables Firebug Lite on the runtime page.
      - formColumn - Form Layout Column
        Divides a form table or a layout row into columns.
      - formRow - Form Layout Row
        Specifies a row of content in a form layout column or the layout table itself.
      - formTable - Form Table
        Formats input controls in rows and columns. Provides header, footer, and message areas.
      - forumPost - Forum Post
        Displays data as a forum post.
      - forumView - Forum View
        Displays data as a hierarchy of forum posts.
      - iCalReadStore - iCal Store
        Defines the storage component for an iCal calendar.
      - inPlaceForm - In Place Form
        Contains a dynamic form.
      - jsonRpcService - Remote Service
        Exposes a remote service.
      - keepSessionAlive - Keep Session Alive
        Sends a request at regular intervals to the server session associated with the current page.
      - linksList - List of Links
        Organizes constituent nodes into a horizontal list of links.
      - list - List Container
        Organizes constituent controls into a vertical bullet list.
      - listInline - Inline List Container
        Organizes constituent controls into a horizontal list.
      - listSeparator - List Separator
        Separates horizontal list elements with a vertical bar.
      - listView - iNotes® List View
        Displays a view as an iNotes® list view.
      - listViewColumn - iNotes® List View Column
        Includes a column of an iNotes® list view for display.
      - multiImage - Multi-image Output
        Displays one icon from a collection depending on a selection value.
      - namePicker - Name Picker
        Displays a modal dialog containing name choices. Applies selected names to an associated control.
      - navigator - Navigator
        Contains nodes that organize content in a hierarchy.
      - navigationBar - Navigation Bar
        Provides a navigation bar that can be added to an XPage.
      - notesCalendarStore - Notes(r)® Calendar Store
        Defines the storage component for an iNotes® calendar.
      - notesListViewDesign - Notes(r)® List View Design
        Defines the design component for an iNotes(r)® list view.
      - notesListViewStore - Notes(r)® List View Store
        Defines the storage component for an iNotes® list view.
      - outline - Outline
        Contains nodes that organize content.
      - pagerAddRows - Pager Add Rows
        Adds rows to an iterator control.
      - pagerDetail - Pager Show/Hide Details
        Shows and hides detail areas of an iterator control.
      - pagerExpand - Pager Expand/Collapse
        Expands or collapses all the rows of an iterator control.
      - pagerSaveState - Pager Save State
        Saves the number of rows displayed by an iterator control if the user navigates away from the page and back.
      - pagerSizes - Pager Sizes
        Allows selection of the number of rows displayed by an iterator control.
      - popupMenu - Pop-up Menu
        Contains nodes that organize content as a pop-up menu.
      - redirect - Redirect
        Redirects the opening of a page to another page depending on a set of rules.
      - restService - REST Service
        Exposes a REST service.
      - singlePageApp - Single Page Application
        Contains a mobile application. Controls its layout and configuration.
        Using the Single Page Application Wizard
        The Single Page Applications Wizard lets you create an initial design framework for an XPage mobile application by using a wizard to guide you through the application creation steps after you drag a Single Page Application control onto an XPage.
      - sortLinks - Sort Links
        Contains nodes that organize content in a hierarchy.
      - switchFacet - Switch
        Displays alternate panels depending on key values.
      - tabBar - Tab Bar
        Presents a banner upon which buttons can be placed.
      - tabBarButton - Tab Bar Button
        Presents a banner upon which buttons can be placed.
      - tagCloud - Tag Cloud
        Displays a tag cloud based on entries in a categorized view.
      - toolbar - Toolbar
        Presents a horizontal list of options which the user can click.
      - tooltip - Tooltip (Extension Library control))
        Displays data when another control is in focus.
      - tooltipDialog - Tooltip Dialog
        Displays data when another control is in focus. Allows activation of client-side events when the data is shown and hidden.
      - valuePicker - Value Picker
        Displays a modal dialog containing value choices. Applies selected values to an associated control.
      - widgetContainer - Widget Container
        Organizes its content as a widget.
    - Property reference (Extension Library)
      Specified here are the XPages Extension Library properties.
  - Binding and submitting data
    The data store for XPages is Domino®. You can access the data store through Domino forms and views.
  - Adding images, styles, and themes
    You can enhance your design with images, styles, and themes.
  - Responsive web design support in XPages
    The XPages Extension Library supports Bootstrap, a Responsive Web Design (RWD) framework. This support comes in the form of an XPages Responsive Bootstrap plugin that you can use in your XPages applications.
- Designing composite applications
  You can create composite applications from XPages.
- Programming
  XPages uses JavaScript™ for programming while the forms-based design elements use the formula language, LotusScript®, Java™, and JavaScript.

singlePageApp - Single Page Application

Contains a mobile application. Controls its layout and configuration.

Category

Mobile

Syntax

<xe:singlePageApp attributes>content</xe:singlePageApp>

Table 1. Essential properties
Property	Description
id	Defaults to `singlePageApp1`, `singlePageApp2`, and so on.
selectedPageName	Identifies the `appPage` control that displays on page load.

Table 2. All properties
Category	Properties
basics	binding, id, loaded, rendered, rendererType, selectedPageName
styling	disableTheme, themeId
events	onOrientationChange, onResize

Usage

If you use this control, you can use the Single Page Applications Wizard to create an initial design framework for an XPage mobile application by using a wizard to guide you through the application creation steps after you drag a Single Page Application control onto an XPage. Refer to this topic for more information.

Examples

This example demonstrates a mobile application with one page which has a heading.

<?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:singlePageApp id="xpagesMobileApp"
		selectedPageName="homePage">
		<xe:appPage id="appPage1" pageName="homePage" >
			<xe:djxmHeading id="homePageHeading" label="Home"></xe:djxmHeading>
		</xe:appPage>
 	</xe:singlePageApp>
</xp:view>