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 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
Using the claro Theme
There are a few different ways to go about using the
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
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.
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.