Configuring the Application Layout control to use responsive design

The XPages Responsive Design plug-in adds a renderer for the Application Layout control and a new Application Configuration complex type for the control.

The renderer type (com.ibm.xsp.theme.bootstrap.layout.ResponsiveAppLayout) is automatically applied to Application Layout controls in your application when you enable either of the Bootstrap themes in the application's xsp.properties. The renderer gives the Application Layout a Bootstrap look and feel, as well as making the control responsive.

When the application is rendered on a smaller screen, such as on a mobile device, it will automatically reorganize the application contents for an better user experience on the smaller screen. Items on the page are stacked vertically, and in some cases items will be collapsed.

The Bootstrap Responsive Application Configuration further enhances the responsive capabilities of the Application Layout control. You can add it to a new Application Layout control using the enhanced Application Layout wizard (discussed later in this feature section) or by using the Properties panel for the control. The new properties added by this configuration are:

  • collapseLeftColumn
  • collapseLeftMenuLabel
  • collapseLeftTarget
  • fixedNavBar
  • invertedNavbar
  • pageWidth

You can also update existing Application Layout controls to use the responsive configuration, by changing your application layout configuration from xe:applicationConfiguration or xe:oneuiApplication to use xe:bootstrapResponsiveConfiguration instead. This lets you use the additional properties, which have been highlighted above, in your existing application layout control.

Configurable properties provided by the bootstrap responsive configuration

As mentioned, the bootstrap responsive configuration adds some extra configurable properties compared to the standard Application Layout Configurations. This section provides additional information on these properties.
  • collapseLeftColumn - Boolean indicating if the left column facet should be collapsed on smaller screens.
  • collapseLeftMenuLabel - The label on the menu button shown when the left column is collapsed. The default value is Menu.
  • collapseLeftTarget - Optionally you can enter a selector here (for jQuery syntax, refer to http://api.jquery.com/category/selectors/) to which the menu should be attached. The default value is .applayout-column-left (after the element with the applayout-column-left class)

By using these properties, you can specify that your left column is collapsed on devices with smaller screens. For example, the following values will collapse the navigator in the left facet into a drop down menu in the banner: collapseLeftColumn="true" collapseLeftMenuLabel="MyMenu" collapseLeftTarget=".navbar-brand"

The rest of the properties include:

  • fixedNavbar - You can fix the banner using this property, so that it remains fixed in place even when scrolling the page. This applies for the banner on any screen size. There are three options available:
    • unfixed-top - The default value which places the banner at the top of the page unfixed.
    • fixed-top - Fixes the banner to the top of the page.
    • fixed-bottom - Fixes the banner to the bottom of the page.
  • invertedNavbar - Boolean indicating if the banner style should be inverted, using the style navbar-inverted. This default value is False.
  • pageWidth - Determines the width of the page. Values include: full = full width, fluid = use Bootstrap 'fluid' container (almost full width), fixed = fixed width.