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 three themes that you can use in your applications. 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.

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.

Then, use these steps set up the responsive design feature:

  1. From the Applications Navigator, select Application Configuration > Xsp Properties.
  2. On the General tab, change the Application theme of your application to any of the following:
    • Bootstrap4 This theme uses Bootstrap v4.4.1, jQuery v3.5.1, and FontAwesome v5.13.0 resources.
    • Bootstrap3 This theme provides all of the resources of the 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. This theme uses Bootstrap v3.4.1 and jQuery v3.5.1.
    • Bootstrap3_flat This 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. 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. This theme uses Bootstrap v3.4.1 and jQuery v3.5.1.
  3. Save, clean, and rebuild your application.
  4. Clear the cache in your browser and open your new responsive Bootstrap XPages application.