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.

The Bootstrap plugin provides two themes that you can use in your applications as well as Bootstrap v3.3.6 and jQuery v2.1.1. With Bootstrap, you can create dynamic, responsive web applications that provide an optimal user experience for a number of devices ranging from mobile phones to large desktop monitors.

This feature began as the Bootstrap4XPages (B4X) project on OpenNTF. The code and resources from that project provided the starting point for the new XPages Responsive Bootstrap (XRB) plugin. The older versions of Bootstrap in the B4X project have been removed, leaving just the latest Bootstrap version in the XRB plugin. Similarly, the older version of jQuery has been replaced by a newer version jQuery in the XRB plugin.

Note: The Select2 control, which was part of the B4X project, has not been included in the XRB plugin. However, this feature section provides instructions on how to continue using the Select2 control with the new XRB plugin.
Note: Internet Explorer restrictions - Internet Explorer 8 and earlier versions of Internet Explorer do not support certain CSS media queries that are heavily used by Bootstrap. Also, jQuery does not currently support IE8. Therefore, the current version of the XRB plugin does not support IE8 and earlier IE versions. There is an open source project called Respond.js that can be used to provide the media query support needed in the older versions of IE. Additionally, an earlier version of jQuery is also required, v1.x, for IE8 support. If you do need IE8 support, you can setup an older jQuery version and Respond.js on your server. Instructions are provided in this feature section

Setting up the responsive web design feature

The XPages responsive design plugin is automatically installed as part of the Extension Library installation to the server and Designer. Once this is installed, remember to restart the server and Designer.

Once you have done this, use these steps complete the set up the responsive design feature:

  • Select the correct theme for your application. To do this, go to the xsp.properties of your application, open the General tab and change the Application theme of your application to use either the Bootstrap3 or Bootstrap3_flat themes. These are the two responsive design themes provided by the XRB plugin.

    The Bootstrap3_flat theme provides the resources and styling that come with the default built version of Bootstrap 3, to let you use Bootstrap in your XPages application. to let you use Bootstrap in your XPages application. The theme also provides the jQuery v2.1.1 resources that are required by Bootstrap and also allow you to use jQuery in your application. Along with this, the theme provides some specific XPages resources to clean up the XPages controls when using Bootstrap. You are also provided with the full suite of Glyphicon Halflings that come with Bootstrap (discussed later in this section), and the resources from the dbootstrap project, which provides Bootstrap styling for Dojo controls.

    The Bootstrap3 theme provides all of the same resources as the above Bootstrap3_flat theme but also includes an added layer in the form of bootstrap-theme.css. This style sheet adds 3D effects to buttons as well as additional styling on top of all of the features of the flat theme.

  • Save, clean, and rebuild your application.
  • Clear the cache in your browser and open your new responsive Bootstrap XPages application.