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
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.
label - Label (control)
Displays text.

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.
    - 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.
- 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.

label - Label (control)

Displays text.

Category

Core Controls

Syntax

<xp:label attributes>content</xp:label>

Table 1. Essential properties
Property	Description
id	Defaults to `label1`, `label2`, and so on.
value	Specifies the value of the label.
for	Specifies the control that gets focus when the user clicks or otherwise puts focus on this control.

Table 2. All properties
Category	Properties
accessibility	accesskey, role, readonly, title
basics	attrs, binding, dir, for, htmlFilter, id, lang, loaded, rendered, rendererType
data	converter, value
events	onblur, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup
styling	disableTheme, style, styleClass, themeId

Usage

At run time, the value of the label appears on the page. Focus is redirected as specified.

A Label control is read-only if the containing XPage or Panel is read-only, or if the Label readonly property is true.

Examples

This Label control displays the common user name in blue:

<xp:label
	value="#{javascript:session.getCommonUserName()}"
	id="label1" style="color:rgb(0,0,255)" for="inputText1">
</xp:label>

Accessibility compliance

To apply labels in compliance with accessibility standards, use the Label control with the for property as shown below:

<xp:label value="foo" for="inputText1" />
&#160;
<xp:inputText id="inputText1" defaultValue="foo" />

Alternatively apply the aria-labelledby attribute as shown below. However, this attribute is not supported by browsers that do not support WAI-ARIA.

<xp:label value="foo" id="label1">
	&#160;
	<xp:inputText id="inputText1" defaultValue="foo" >
		<xp:this.attrs>
				<xp:attr name="aria-labelledby" value="#{id:label1}"></xp:attr>
		</xp:this.attrs>
	</xp:inputText>
</xp:label>

Alternatively apply the aria-label attribute as shown below. However, this attribute generates a hidden label.

<xp:label value="foo" id="label1">
	&#160;
	<xp:inputText id="inputText1" defaultValue="foo" >
		<xp:this.attrs>
				<xp:attr name="aria-label" value="bar"></xp:attr>
		</xp:this.attrs>
	</xp:inputText>
</xp:label>

In both alternative cases, use the full client-side identifier for the attribute value, as shown.