XPages and Me

My Journey into XPages Development

Monthly Archives: August 2014

(Revised) Dabbling in Bootstrap and Font Awesome Part 4: Holding a special place in my field (Placeholders and IE8 / IE9)

As I mentioned before, the fix I posted regarding placeholders in IE8 / IE9, was causing some issues:

  • After a refresh, the placeholders became the fields actual value / content
  • When having a field flagged as required, triggering the server-side validation would not flag the field as “not valid” as the placeholder was being submitted as the value of the field.

But, yours truly didn’t give up and I found a solution that is stable and works. It just involves a few more steps than just adding an output script.

So, without further ado, here we go:

Read more of this post

Dabbling in Bootstrap and Font Awesome Part 6-1: (re)Use Me!

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

Dabbling in Bootstrap and Font Awesome Part 5: How to activate the tooltip

If you’d like to make use of the Bootstrap tooltip, you need to activate it by adding some client-side JavaScript to your XPage. Once that is done, you can set the tooltip simply by adding attributes to your control for which you’d like to have a tooltip displayed.

Lets get started.

Read more of this post