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.
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.
Setting properties for editable areas in custom controls
Set properties for editable areas in the custom control. You can set properties for the name of the editable area as well as the facet name. You can also configure how and if the editable area is visible inside the custom control at run time.

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.
      - Creating custom controls
        Create a new custom control to use in XPages.
      - Setting properties for custom controls as independent design elements
        Set properties for the custom control as an independent design element. Properties include options for configuring data sources, applying styles, specifying validation and visibility settings, and more.
      - Adding UI controls to custom controls
        Add user interface (UI) controls to the custom control. Then, you can select each UI control individually and set properties for it just as you would for a UI control inside an XPage.
      - Defining editable areas in custom controls
        Define the editable areas that you want to include in the custom control. Editable areas are regions that users can modify when the custom control is placed on an XPage. All other regions that fall outside of editable areas are read-only and cannot be modified.
      - Setting properties for editable areas in custom controls
        Set properties for editable areas in the custom control. You can set properties for the name of the editable area as well as the facet name. You can also configure how and if the editable area is visible inside the custom control at run time.
      - Adding custom controls to XPages
        Add the custom control to an XPage.
      - Setting properties for custom controls in XPages
        Set properties for the custom control as it relates to the XPage that contains it. You can set properties for its name and visibility status as well as for any additional properties that you defined when setting properties for the custom control design element.
      - Adding UI controls to editable areas in custom controls
        Add controls to editable areas in the custom control. You can set properties for these controls in the Properties view, just as you would set properties for any other controls that you add to XPages. You can also change the facet name of controls in editable areas if you are computing the value at run time.
      - Organizing custom controls in the Controls palette
        Organize custom controls in the Controls palette. You can put them in categories for easy access.
  - 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 for editable areas in custom controls

Set properties for editable areas in the custom control. You can set properties for the name of the editable area as well as the facet name. You can also configure how and if the editable area is visible inside the custom control at run time.

Before you begin

To set properties for editable areas, do the following steps.

Note: This topic covers steps for setting properties for editable areas in custom controls as individual design elements. For information about setting properties for user interface (UI) controls that you add to editable areas in custom controls in XPages, see "Adding UI controls to editable areas in custom controls."

About this task

Procedure

Select the editable area in the custom control as an independent design element (meaning the custom control is not inside an XPage).
In the Properties view, click the Editable Area tab.
In the Name field, type the name of the editable area. This is the name of the editable area as it will appear in the XSP source code. The default name of the first editable area is callback1, the second callback2, and so on.
Select the Visible check box to make the editable area visible at run time. To compute the value of this property, click the diamond-shaped icon, select Compute value, and use the script editor to write a formula.
In the Facet Name field, either type a static name in the field, or click the diamond-shaped icon to compute the value of the field.
- If the facet name is static (not computed), the UI control that you add to the editable area will inherit the facet name.
  Note: If this UI control is a container control that contains other UI controls, then only the container control inherits the facet name. This means that none of UI controls inside the container control get assigned to the facet.
- If the facet name is computed, then you can determine the contents of the editable area dynamically. This means you can insert multiple UI controls with different facet names into the editable area. The script that you write determines which UI controls are displayed in the editable area at run time based on which facet name is returned by the script.
Click File > Save to save your changes.