Your Development & Design Resource
How to use 2 CSS Rules to replace the IBM Domino XPages Extension Library Picker Icons
09/01/2015 by Chris Toohey
The IBM Notes Domino XPages Extension Library (or ExtLib) controls offer a level of configurability and flexibility that addresses most XPages developers needs... but for those XPages developers looking to do something different with a control that's either beyond the scope of the original intended use or simply wasn't conceived at the time of the creation of the control, that Properties pane can look rather limiting.
Let's take a look at the Properties pane for the Value Picker ExtLib control:
ExtLib Value Picker - Properties pane
If you want to change the icon of the ExtLib Value Picker control, you need to specify an Image Resource or the path of an alternate image. No big deal.
Icon Fonts have been used more and more for browser-based applications due to their flexibility: they scale much better than their image counterparts and you can easily manipulate them via CSS (color, rotation, etc.). The scaling argument is important when you're writing cross-client web browser applications, especially with the ever-increasing device screens and resolution bumps. And do you remember how you had to have "on" and "off" state images? Yeah, you don't need those anymore...
But there's no way to set a iconFont from the Value Picker Properties!
To do that properly, you would want to create a child node HTML Element with a className that matches the icon you want to use based on the Icon Font library. For example, Glyphicon (which is used in Twitter Bootstrap) uses the
glyphicon glyphicon-search classNames. If we wanted to use the "search icon", we'd create a child node HTML Element such as an italic element with a className of "
For those of you wondering why we're using the italic HTML Element here, there are arguments all over the web with the pros and cons to this technique. You can use a SPAN HTML Element instead with
aria-label attributes, but that's something to cover in another article.
... now before we continue, let's take a look at how exactly most Icon Fonts work, and we'll do that by looking into the CSS files for Twitter Bootstrap.
If you open bootstrap.css in the text editor of your choice, you'll see the following rules:
These rules load a new "font" named "Glyphicons Halflings", which will be enabled when you use the
.glyphicon className. The second className is the specific image that you want to load. In our case, we'll be using the
.glyphicon-search className, which gives us the magnifying glass icon that best matches the default Value Picker control icon.
Or we would have, if we could create a child node HTML Element inside of our View Picker control...
Since we can't simply add a child node, we'll instead see if we use CSS to manipulate the HTML that's already there.
Here's the resulting HTML markup that's sent to the browser:
Not much to work with there... or so it would seem.
Let's get a handle on the "Open Picker" image HTML Element using CSS Attribute Selection, or rather use a CSS rule selector that uses HTML Element attribute and value matches.
So let's create a CSS rule that gets a handle on the Value Selector image and make it so it never loads the image in the first place:
That keeps the Value Picker default icon (/xsp/.ibmxspres/.extlib/icons/iconNamePicker.png) from loading, but we still have to set our Icon Font-based "image". To do that, we'll use the CSS Pseudo-Element Selector, which again is supported with a few minor exceptions (none of which will affect our use case here):
Yep, that's it! Let's take a look at the before and after examples:
Before: Value and Name Picker ExtLib controls with default icons
After: Value and Name Picker ExtLib controls with Twitter Bootstrap Glyphicons
And here's our final CSS, which addresses both the Value Picker and the Name Picker ExtLib Controls:
Using CSS attribute selectors we're able to gain more control over the rendered user interface and better craft the user experience of our applications... without having to write our own custom implementation of - in this particular case - a Value Picker control. Sure, it was just an icon on a picker, but it's a start.
I'm often asked by fellow developers "is [whatever they're looking to do] possible?" I think most of those developers are falling victim to perceived platform limitations, or their given education, or perhaps even their familiarity with the platforms in question.