Gridx in XPages – 14: Preparing to add Filtering by Using the Claro Theme

In the next few posts, I’m going to dig into the great filtering features provided by Gridx. But I ran into problems using them without the Dojo theme being set correctly, so this post will show what needs to be done for the grid to pick up the theme properly.

Gridx Series

Gridx in XPages — Entire Series

Gridx Dojo Theme

You may have noticed that we’ve included stylesheets from Dojo’s claro theme when setting up Gridx. Three of the four resources included are related to it.

  <xp:this.resources>
    <!-- Claro Theme -->
    <xp:styleSheet href="/.ibmxspres/dojoroot/dijit/themes/claro/claro.css"></xp:styleSheet>
    <xp:styleSheet href="/.ibmxspres/dojoroot/dijit/themes/claro/document.css"></xp:styleSheet>

    <!--  Module Path to locate Gridx Library -->
    <xp:dojoModulePath url="/gridx" prefix="gridx"></xp:dojoModulePath>

    <!-- -Main GridX Stylesheet  -->
    <xp:styleSheet href="gridx/resources/claro/Gridx.css"></xp:styleSheet>
		
  </xp:this.resources>

However, the grid isn’t actually using it properly at this point.

The reason is that XPages uses the tundra theme by default. This theme provides the general look and feel that we’ve seen in our Gridx examples so far.

We haven’t focused on the UI up to this point, so it really wasn’t a big deal. However, I noticed when I started implementing filtering that it wouldn’t work properly — and it looked awful.

If you look at the Gridx files, you’ll see that it only includes a claro theme. There are 4 Dojo themes automatically available in XPages and claro is one of them.

In order to get the filtering looking and working properly, I had to get the grid using the claro theme.

Using the claro Theme

There are a few different ways to go about using the claro theme.

One way is to implement it application-wide via a Theme resource. This post shows how to use the Dojo themes available in XPages.

This does the job, but it may have side effects. It can affect fonts or other styling in your application that may be styled by the tundra theme, even if not intentionally, but because it’s in use by default. This should not be an issue if you’ve implemented a custom UI (e.g. using a framework like Bootstrap) that doesn’t make use of any Dojo theme styling.

In a standard web application using Dojo, the way to use a theme is to include the related stylesheets and then add the theme name as the class on the body tag for the page.

In XPages, you don’t use a body tag per se, but you can add a class to the body tag generated by the page.

For the sake of simplicity in this example, I use this technique to set it at the page level by setting the styleClass property of the XPage; now the Grid picks up the claro theme.

If you still run into issues with other elements on the page that need the tundra styling, you can wrap a div around the problematic component and give it a class of tundra to set it back to the default XPages theme.

FWIW – You can also add a div around the grid with the claro class. This styles the grid fine, but doesn’t style the popups related to filtering, so it doesn’t fully do the job.

Up Next

In the next few posts, I’ll dig into the awesome Quick Filter and Filter bar features that let you filter the data without any coding.