Home
Designer XPages User Guide
Designing XPages applications
IBM® Domino® Designer provides the means to populate an XPage with controls and other artifacts, and to associate an XPage with data stores.
Adding controls
Controls are visual elements such as edit boxes, buttons, images, and text that allow users to manipulate data on an XPage.
Control reference
Specified here are the XPages controls.
section - Section
Serves as a collapsible container for other controls and text

Designer XPages User Guide
- Welcome to the IBM Domino Designer 9.0.1 XPages User Guide
  Welcome to the IBM Domino Designer 9.0.1 XPages User Guide, where you can find information about how to use Domino Designer to rapidly develop and deploy scalable, security-rich business and collaboration applications. This guide focuses on the aspects of creating applications using XPages technology.
- Product overview
  IBM® Domino® Designer supports applications development for the IBM Domino platform using XPages, forms, views, and other elements such as controls.
- Tutorials
  This section contains tutorials and information about tutorials.
- Administering applications
  IBM® Domino® Designer provides features for administering and managing your work and related files while developing your application projects.
- Designing XPages applications
  IBM® 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.
    - Manipulating controls and text
      You can add controls and text to an XPage using the Design or Source editor. The Controls palette provides a source for controls.
    - Using an extension point to override design time tooling for Core and Extension Library controls
      An extension point is provided to let you override design time tooling for the Core and Extension Library controls that are shipped with Designer.
    - Setting properties
      Properties define XPages and controls.
    - Understanding events
      Events are actions that a user might perform such as clicking a button or removing focus from an edit box. Event handlers are actions that you (the designer) perform in response to events.
    - Understanding facets
      A facet defines a region in a control for the placement of other controls.
    - Understanding Dojo widgets
      Dojo widgets are prepackaged JavaScript™ code, HTML, and CSS declarations that enhance the appearance and use of controls in both a browser and the Notes® client.
    - Control reference
      Specified here are the XPages controls.
      - br - Line break
        Inserts a break in text.
      - button - Button
        Displays a button that the user can click to perform an action.
      - callback - Editable Area
        Provides a custom control with an area that can be edited when embedded in an XPage.
      - checkBox - Check Box
        Displays a box that can be selected or cleared.
      - checkBoxGroup - Check Box Group
        Displays multiple boxes that can be selected or cleared.
      - comboBox - Combo Box
        Displays a list of items one of which can be selected.
      - dataTable - Data Table
        Contains cells arranged as rows and columns associated with a data source. Each cell can contain other controls (including tables) and text.
      - dateTimeHelper - Date Time Picker
        Displays a picker for selection of date and time values in an edit box.
      - div - Division
        Acts as a division or block of content in HTML. Contains other controls and text.
      - eventHandler - Event Handler (control)
        Responds to user actions such as clicking a control.
      - fileDownload - File Download
        Downloads a file to the local file system.
      - fileUpload - File Upload
        Uploads a file from the local file system.
      - image - Image
        Displays an image.
      - include - Include Page
        Inserts a reference to another XPage.
      - inputHidden - Hidden Input
        Hides data from the user.
      - inputRichText - Rich Text
        Displays an input field for entering data formatted as rich text.
      - inputText - Edit Box
        Displays an input field for entering one line of data.
      - inputTextarea - Multiline Edit Box
        Displays an input field for entering multiple lines of data.
      - label - Label (control)
        Displays text.
      - link - Link
        Opens a URL, a control (anchor link), or another XPage.
      - listBox - List Box
        Displays a list of items one or more of which can be selected.
      - message - Display Error
        Displays error messages for one control.
      - messages - Display Errors
        Displays error messages for all controls on a page.
      - pager - Pager
        Pages data for a container control where its data cannot be displayed in one window.
      - pagerControl - Pager Child Control
        Specifies a pager control within the common pager.
      - panel - Panel
        Serves as a container for other controls and text with common data sources and properties.
      - paragraph - Paragraph
        Combines text in a paragraph format.
      - platformEvent - Platform Event Control
        Handles a platform event.
      - radio - Radio Button
        Displays a button that can be selected or cleared. When grouped only one button in the group can be selected.
      - radioGroup - Radio Button Group
        Displays multiple buttons that can be selected or cleared. Only one button in the group can be selected.
      - repeat - Repeat
        Repeats embedded controls by iterating through a data source.
      - scriptBlock - Output Script
        Outputs a client script.
      - section - Section
        Serves as a collapsible container for other controls and text
      - selectItem - Selection Item
        Provides an item for user selection, for example, in a check box.
      - selectItems - Selection Items
        Provides one or more items for user selection, for example, in a check box.
      - span - Span Content
        Combines text, typically for the application of properties.
      - tabbedPanel - Tabbed Panel
        Serves as a collection of containers for other controls and text.
      - table - Table
        Contains cells arranged as rows and columns. Each cell can contain other controls (including tables) and text.
      - text - Computed Field
        Displays a value.
      - typeAhead - AJAX Type ahead
        Automatically fills in its parent control as users type a succession of characters that match a specified suggestion.
      - view - XPage
        Defines the top-level container control, that is, the XPage itself.
      - viewPanel - View
        Displays data from documents in rows and columns.
    - Property reference
      Specified here are the XPages properties.
    - Designing with custom controls in XPages
      A custom control is a collection of controls that are stored as a single object. Similar to the way a subform can be placed on more than one form, a custom control can be created once and added to multiple XPages. When you update a custom control, every XPage that uses that custom control automatically gets updated with the changes. This saves you design time because you do not have to update each XPage separately.
  - 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.
  - 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.
  - Using Domino® Designer with XPages in Bluemix™
    IBM® Domino® Designer is designed to work with IBM Bluemix™, the cloud-based application development environment.
- 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.

section - Section

Serves as a collapsible container for other controls and text

Category

Container Controls

Syntax

<xp:section attributes>content</xp:section>

Table 1. Essential properties
Property	Description
id	Defaults to `section1`, `section2`, and so on.
header	The header appears at the top of the section and is visible when the section is collapsed.
type	The formatting types are: default: no border wide: gray bar at the bottom box: gray bars on all four sides tab: gray background for arrow and section contents below the arrow
initClosed	By default the section is initially opened.

Table 2. All properties
Category	Properties
accessibility	accesskey, role, tabindex, title
basics	attrs, binding, collapsedImage, dir, disabled, expandedImage, header, id, initClosed, lang, loaded, rendered, rendererType
events	onblur, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup
format	type
styling	disableTheme, headerStyle, style, styleClass, themeId

Usage

At run time, the section appears on the page:

A closed section shows only the header.
An open section shows the header and contents.

The user can open and close the section.

Examples

This section contains two edit boxes.

<xp:section id="section1" header="Phone numbers" type="tab"
	initClosed="true">
	<xp:inputText id="inputText2" value="#{document1.phoneday}"></xp:inputText>day
	<xp:br></xp:br>
	<xp:inputText id="inputText3" value="#{document1.phonenight}"></xp:inputText>night
</xp:section>