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.
Setting properties
Properties define XPages and controls.

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

Setting properties

Properties define XPages and controls.

Properties appear in a window under the editor. The properties that appear are for the control in focus in the editor, or for the XPage if focus is outside all controls.

Select All Properties under the Properties tab to access a categorized list of all properties for a control or XPage. Here properties are identified by their canonical tag names. Make other selections under the Properties and Events tabs to access subsets of the properties with a designed user interface. Here properties are accessed with descriptive names.

Assign values to properties as follows:

Static values are selected from a list or typed in.
Dynamic values are specified with scripts that return a value. A diamond next to the property opens the script editor.
Events are specified with server-side and client-side scripts and simple actions. It is best to specify scripts and simple actions on the Events tab.

In the XML source, properties appear as attributes and content for the control element. For example, here is an inputText (Edit Box) control with id and value properties defined as attributes:

<xp:inputText id="inputText1" value="#{document1.subject}"></xp:inputText>

Here the value property is defined as content for the control definition:

<xp:inputText id="inputText1">
	<xp:this.value>
		<![CDATA[#{javascript:return document1.getItemValueString("subject")}]]>
	</xp:this.value>
</xp:inputText>

Dynamic properties are calculated as follows. Use the editing window radio buttons to select one or the other.

Compute Dynamically recalculates the formula whenever the XPage refreshes. These formulas appear in the source preceded by a pound sign, for example, #{javascript:var dc = database.getAllDocuments(); "Count = " + dc.getDocumentCount();}.
Compute on Page Load calculates the formula once when the XPage is first loaded. These formulas appear in the source preceded by a dollar sign, for example, ${javascript:var dc = database.getAllDocuments(); "Count = " + dc.getDocumentCount();}.