XPages and Me

My Journey into XPages Development

Category Archives: Dabbling in Bootstrap and Font Awesome

Dabbling in Bootstrap and Font Awesome Series Overview

I’ve pretty much wrapped up my “Dabbling in Bootstrap and Font Awesome” series, so, I wanted to give you a list with links to all the topics covered:

Read more of this post


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

The Bootstrap panel can be used, to nicely organize content on your web page. In this post, I will show you how to create a reusable custom control for the panel.

Read more of this post

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

Today, I am going to show you how to set up a reusable custom control for a Bootstrap Modal.

Read more of this post

Dabbling in Bootstrap and Font Awesome Part 8: DB Profile and Theme

As I’ve mentioned in my previous post, I have a DB Profile document where I can set the Bootstrap navbar type, navbar look, navbar container and the content container I’d like to use across my whole application. It also contains a setting for the Bootstrap field size (read more here) and in this post, I am going to explain how I reference and use that setting in my theme.

Read more of this post

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

In this post, I will show you how I set up my Bootstrap navigation bar. I know there are already many different posts out there on that. The difference with mine is, that I am using a profile document to define, what kind of navigation bar is being used across the whole application.

In addition, the profile document is also being used to manage the Bootstrap container type and field sizing (more about that in another post).

So, lets begin.

Read more of this post

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

… or “xpagesandme.wordpress.com” goes NotesIn9.

So, David Leedy gave me the opportunity to come onto his show and I was finally able to make my first video and here it is as part of his Hackathon:


P.S.: The NotesIn9 video by Tim Tripcony I am referring to in my video, can be found here.

Dabbling in Bootstrap and Font Awesome Part 7: All these shiny new toys! What now?

When I first started dabbling in Bootstrap and Font Awesome, I was very excited and loved the look and feel of the framework. When I say dabbling, I mean that at the beginning, I didn’t really think about, how I am actually going to use it. I was just playing around with, getting a feel for how it all works and how I can integrate it with XPages.

But eventually I was faced with the question: What am I going to do with this shiny, new framework; How do I apply it to my daily development work?

I realized, I’ll have to rethink the way I develop my applications. Not necessarily the coding itself, but how do I set up the front-end, the UI, the part that the user will eventually see and will have to deal with on a daily bases.

I was always determined to design the UI of my applications in a way, that would aide the users in completing their daily work, even in the Notes Client (I guess it can be considered a job well done, if a user asks you, if your application is a web application, even though it is plain Notes Client). I was a big fan of Chris Blatnick’s blog Interface Matters and a lot of my UI designs had been inspired by his posts.

I think what I am trying to say is, we as XPages developers need and should also always think about the UI, to make it easy for the users to do their job.

If you don’t know how or what to do, talk to your users; sit down with them and observe them doing their daily work and it might give you ideas as to how to make it even better and easier for them.

The code in the background can be as sophisticated as can be, if the UI makes it hard for users to use an application, they will hate it and those users won’t make good advocates for Domino and XPages.

What is your opinion on this matter?

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

Today, I will enhance the FA Icon custom control from one of my previous posts

Enhance the existing FA Icon Custom Control:

“So, how are you going to enhance the custom control?” , you ask. “It already is perfection.”, you say. Well, thank you for the compliment but there is almost always room for improvement. So, I am going to add additional “Property Definitions” that will allow you to add Bootstrap helper classes to your icon. Sounds intriguing, doesn’t it?

Read more of this post

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

After using the Column Custom Control from my original post in many different applications for a while, all the sudden I ran into an issue. I had created a new application with a search panel atop a view panel and was using the column custom control in it for the search fields. Whenever I tried to preview the XPage in the browser, I would get an error message for the following line of code, that calculates the style classes for the column div:

Image 1

Really weird, especially since the previous 4 rows of code seemed to work fine, doing exactly what the one line of code was doing.

Anyway, to fix it, I had to do the following:

Read more of this post

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

Today, I will create two additional, reusable custom controls for Bootstrap’s Input Group. Input groups allow you to add text, icons or buttons before, after or on both sides of any text-based input. For more information, please follow this link.

In addition to creating the two custom controls, I will also demonstrate a little bit, how to use the “Visible” property for property definitions.

Read more of this post