This is a quick tip on how to convert a plain looking XPages File Download control into a Twitter Bootstrap style Table.

Everyone should know by now that the latest XPages Extension Library (2 versions ago actually) includes the Twitter Bootstrap framework. While is this brilliant, the reality is that many of us already have existing designs where Twitter Bootstrap is manually included. This means that XPages controls used in these designs look plain when compared to adding bootstrap-styled HTML.

A good example is the File Download Control below. I’ve added this control to my XPages app that has Twitter Bootstrap manually configured, but the control is not affected by this framework:

FileDownloadExample1

If you view the HTML source of the File Download Control in Firebug, you’ll see it’s just a table with row and column tags. This is good news, because Twitter Bootstrap’s table designs follow the same pattern, which means that by just adding 2 Bootstrap classes to the control, you change look of it to:

FileDownloadExample2

To achieve this, all you have to do is add the “table” and “table-hover” class to the File Download Control. See example below:

You can imagine that this one example opens a series of additional opportunities for those who are manually applying the Twitter Bootstrap framework to their XPages Design.

Till next time
Cheers 🙂