Important: Please see this update regarding the column custom control
Now you got Bootstrap and / or Font Awesome set up for you XPages development environment and you are ready to develop some cool applications. However, you come to find out that developing while using the Bootstrap framework can be rather tedious. Bootstrap utilizes a grid system that allows you to put content pretty much anywhere on a web page, but it also means adding more divs for the rows and columns.
On top of that, to have just one field rendered Bootstrap style, it involves a lot: A div, label, field, help block etc. This kind of blows the quick development we are used to in XPages by drag-and-drop, out of the water.
I was looking for a way to make it easier and quicker again and, inspired by Mark Leusink’s post on a reusable field custom control for Bootstrap, I started to create all kinds of custom controls for all the different field types. Halfway thru creating them though I realized, that still doesn’t make it easier. Especially if you wanted to do something out of the ordinary with a field, you wouldn’t be able to use these custom controls, you’d have to create everything manually for this one field.
So, after some thinking, fiddling and trying out, I came up with a set of three reusable custom controls, to speed up the development process again:
A Row custom control
A Column custom control
A “Control wrapper” custom control
In this post, I will show you how to create them and the next post will be about, how to use them. So, lets get started:
Read more of this post