Friday, 27 March 2015

XPages goes Bootstrap

A new release of the XPages Extension Library is available on OpenNTF (OpenNTF XPages Extension Library).
This release is the twelfth IBM Notes Domino 9.0.1 version of the XPages Extension Library to OpenNTF. It contains new enhancements and a number of bug fixes.
More and more Bootstrap functionalities become available in the XPages Extension Library such as the new Carousel, Dashboard, and Navbar controls which further enhance the Responsive tool set available to XPages application developers.

But the most notable absentee is still Select2. A little strange because Select2 was already available in the OpenNTF Bootstrap4XPages plugin. In addition any developer who works with Bootstrap uses Select2 in their applications. Unfortunately, we have to (continue to) use the Bootstrap4XPages plugin or we need to keep adding Select2 manual to our applications. The latter is certainly the best solution if you want to use multiple features of Select2 (see my blog posts about Select2).
Hopefully Select2 will be included in Release 13.

So what is new in Release 12 of the XPages Extension Library (from the release note).
  • New xe:mapValuePicker and xe:collectionValuePicker tags
  • New inPlaceForm Simple Action
  • New Responsive Web Design Functionality
  • Responsive Design Demonstration Application: ToDo.nsf
  • New “suppress” option for dataView control
  • New URL Parameters in the REST Calendar Service

New xe:mapValuePicker and xe:collectionValuePicker tags for the Value Picker Control
Based on customer suggestions, this release provides 2 new value picker data providers tags that can be used in the "dataProvider" property of the Value Picker control to provide the list of options that will be shown in the Value Picker dialog.
The first tag, the Map Picker Data Provider (xe:mapValuePicker) lets you compute a java.util.Map that will be used for the entries in the picker dialog. The map keys are the label, and the map values are the data values that will be saved.
The Collection Picker Data Provider (xe:collectionValuePicker) lets you compute a java.util.Collection that will specify the values displayed in the dialog.
See also the blog post by Paul Withers, New Release of Extension Library, Including MapPicker and CollectionPicker.

New xe:inPlaceFormAction for hiding and showing In Place Form Control
Based on a customer pull request through GitHub, this release contains a new xe:inPlaceFormAction server side Simple Action. The xe:inPlaceFormAction is used to show and hide In Place Form controls that are commonly used for in place editing of an individual document directly within a Repeat control that lists multiple documents.

New Responsive Web Design Functionality
The three new responsive controls added to this extlib release are:
Carousel, Dashboard, and Navbar. The Carousel is a slideshow control, the Dashboard is a control for displaying important information to users at a glance, and the Navbar is a navigation bar control.
All of these controls appear in a new control palette in Domino Designer, the Responsive palette, from where they can be dragged into an XPage. Each of the controls is responsive in design.

The Carousel control is a slideshow component that can be added to your application. It allows automatic and/or manual cycling through a number of slides in the Carousel. This control would typically be used at the top of a web page, often on the landing page or homepage of an application, although it can be adapted and used in a number of situations.

The Dashboard control is a component that can be used to highlight important information to users at a glance in an application. The Dashboard is made up of a number of "dash nodes" - up to 12 of them. Each node can then be further be customised. For example, this control could be used as an administration dashboard that displays the status of a number of services. As another example, the dashboard could display the different status types for tasks and the number of tasks currently under each status type in a task tracking application.

The Navbar control is a navigation bar that can be added to an XPage. In previous releases of the Extension Library, navbar functionality was built into the ApplicationLayout control when using the Bootstrap themes. With this release of the ExtLib, you can add Navbars to any XPage without needing to rely on the Application Layout control.

Simple Responsive Layout Configuration
The Simple Responsive Application Layout Configuration is a new configuration for the Application Layout control. It is a simplified configuration, reducing the number of available properties and rendered elements in the Application Layout. This configuration has more of a focus on responsive capabilities, and is designed to be quick and easy to configure whilst still providing plenty of functionality.

Responsive Design Demonstration Application: ToDo.nsf
In this release of the XPages Extension Library, a new demonstration application, named "ToDo.nsf," has been included. This application lets you do straight-forward ToDo task tracking but has been designed using all of the latest responsive & Bootstrap features provided with the ExtLib. It specifically uses a Bootstrap theme, glyphicons, jQuery, and the new XPages Bootstrap controls.

For more detailed information about the new features I refer to the release note (PDF).
All in all a nice new release but personally I would have preferred Select2 above a Slider and a Dashboard.

NOTE: Please be aware of technote SWG21696682 as it affects the installation of the Extension Library if the UpdateSite.nsf method is used.


  1. great stuff! when do we get the xpages goes angular extension? =)

    1. Angular Extension to XPages won't make sense, as XPages is trying to provide a MVC framework.
      You could use REST Provider APIs in Domino with Angular JS and create an SPA.