Adding fontawesome to bootstrap alerts

In an XPages application I wanted to add some house-styling to a validation alert box. By default you do not get icons with Bootstrap alerts as in the IBM’s OneUI messages box.

So what do you when you want to have best of bot worlds? You blend in Fontawesome!

Navigate to any of the icons you want to use from fontawesome and search for the unicode of it. For the exclamation icon that is f06a.

Next open your style sheet and add the following lines:

ul.text-error {
list-style: none;
padding: 0;
ul.text-error > li {
padding-left: 1.3em;
ul.text-error > li:before {
content: “\f06a”; /* FontAwesome Unicode */
font-family: FontAwesome;
display: inline-block;
margin-left: -1.3em; /* same as padding-left set on li */
width: 1.3em; /* same as padding-left set on li */

For the content property add the unicode as demonstrated above. When you look at the alert in your browser the icon is applied e.g.:



Correct content-type

I received a call that an ‘aged’ Domino application was causing problems in IE9. Stylesheets documents created by a form were not strict text/css but text/html instead.



Even though the On Web Access Content-type form properties were set correct.

After some digging & trying I ran into the following post that solved the case:

I normally use a simple document for stylesheets and JavaScript libraries in Notes. The form has a field for the “filename” (e.g. my_lib.js) and a field for the data. Until now I had been using a richtext field called HTML for the contents and changed the Content-Type on the form properties as appropriate (text/javascript, text/css etc.). This was working nicely until I created a page using the Strict XHTML DOC-TYPE.

It became an issue because Firefox requires that the Content-Type is text/css for stylesheets when rendering in Strict mode. Otherwise the stylesheet wont be used. Using the Live HTTP Headers extension for Firefox I saw that Domino kept setting the Content-Type to text/html even though the form properties was set to text/css.

Changing the richtext field name from HTML to Body solved the problem. Apparently Domino will not honor the specified Content-Type when the form has a field called HTML.

Indeed: One of those things in Domino…

Download: Twitter Bootstrap in Domino Blog

Have you sometimes the feeling that in case you know too much it may be used against you?

Recently I posted how to include Twitter Bootstrap in the IBM Domino Blog template.  Some time ago I blogged frequently about administrating that same Blog application.

From my Twitter Bootstrap post I received some questions from people for help so the easiest way to assist would be to make an example application available for downloading. The NSF contains all the documents that are needed to utilize (or get started with) Twitter Bootstrap within a Domino blog.

I also added some sample blog posts and link documents that refer to websites for education and resources (themes).


Here you can download the example:  link.


  • Extract the file.
  • Sign the application with proper ID.
  • Apply proper ACL settings.
  • Open the Configuration document and apply correct settings.
  • Launch the application in browser.
    • In case the HTML layout is rendered properly I suggest to save ALL documents under HTML Templates section.

Good luck!


A document list (~ Notes view)
Mobile display

Code templates in DDE: demonstration of CSS template.

In presentation AD103 ‘Embracing the EclipseTM Within’ Maureen Leland says (slide 14):

  • Code templates can be a tremendous time saver, and help implement common team conventions
  • Well received for LotusScript, but also available for:
    • Java
    • CSS
    • HTML
    • XML

If you take stylesheets for example, you can import them from the Database Navigator. But maybe you work on new projects where the stylesheets differ but you want to re-use a genuine setup of the file, setting up templates in Designer might help you.

I am not gonna write how you write a well structured css file and the benefits of it, but just explain how to setup a scratch for new css writing in Domino Designer.

First, open in Designer the Preferences and search after CSS. Select the ‘Templates’ links. Here you will see an overview of all your available CSS templates. Press ‘New…’.

Give your file a name, description and fill the pattern. Here for example I describe the basic layout for an HTML5 app. For the Context I select ‘New CSS’. Press OK to close the Preferences dialog.

Okey, so how you can get this in your next stylesheet?

If you haven’t already got it to your Designer setup, open the Package Explorer (Windows, Perspective, Open…). Go to the Resources folder, select Stylesheets and from there:


In the wizard enter CSS or navigate to the Web folder and select  CSS.

Give your new css file a name.

In the next dialog you are asked if you want to use a template. Select here the template you want and press Finish. The CSS Editor will open from where you can continue to write your CSS file.



Printer-friendly CSS for OneUI?

I have an application which is based heavy on the XPages Framework available on OpenNTF. When printing a document most of the images used for styling disappear. However I would like to provide an even more printer-friendly style-sheet. For example the left navigation, footer etcetera I do not found so very interesting to print.

But before I set up a custom CSS, has anyone done this before and is willing to share it?

View control messed up in Declan’s template

For those of you who would like to use Declan Sciolla-Lynch’s XPage framework as a default development template I have a warning when using View controls. It will lack the default presentation layer as you expect it would look like.

Here is how it shall look like:


I guess you rather would like that it will look something like this:


The reason for it is that the oneUI Theme does not extend the oneui theme. So in that theme add the following line:

<theme extends=”oneui”>

What you will notice then is that the application name will break the design:


Add an extra DIV to the bar section and clear any floating:


The ‘location’ bar is now back in line with the ‘application’ bar but a whitespace is noticeable.


In the custom.css you need to overwrite the default styling for h2:

.lotusForm h2 {
margin:0px 15px 0px 0px;

There you have it! You have the styling for a View control back.


Ps. I rather advice to take a look at examples provided by IBM (maybe the discussion template for 8.5 give help) or does somebody else have a good clean development template available?

XPages – Converting an existing Domino application

I would like t o quote a famous Dutch soccer trainer

Ben jij nou zo dom of ben ik nou zo slim?

Translated into English it would be something like:

Am you so dumb or am I now so smart?

I have read some tutorials about XPages and I have started with upgrading an existing Domino application with XPage technology. Basically I want to display documents with an XPage instead of a web enabled Form.

I have some nice center layered container layout with sections for a header, leftside menu, main and a footer. With a bit of help of  CSS it looks fine. Now I have started to transform the subforms into custom controls and the structure of the Form into an XPage. In stead of DIVs I am using Panels (I should or not?).

First thing I notice that panels in XPage technology only can get a name, when rendering this will be transformed into an ID. I have added my CSS for now in several files, later I will merge them together. For now for each custom control I have a CSS file attached to it.

What is happening is that the CSS get rendered well in Designer but when I look at the XPage in a browser the styling iscompletely gone! If I check in the source I see that all the ID’s have been modified, so I wonder if my CSS is still valid?

For example the original code:

<xp:panel id=”headerContainer”>

<xp:panel id=”headerLogo”>logo</xp:panel>

<xp:panel id=”headerName”>application name</xp:panel>

<xp:panel id=”headerSearch”>searchform</xp:panel>


get’s rendered as:

<div id=”view:_id1:_id2:headerContainer>
<div id=”view:_id1:_id2:headerLogo> logo</div>
<div id=”view:_id1:_id2:headerName> application name</div>
<div id=”view:_id1:_id2:headerSearch> searchform</div>

  • Uhm, can somebody explain how to correctly code my CSS? (it is being loaded).
  • Why have they done this? This makes converting current Domino applications into copy & paste & ready to run XPages enabled applications time consuming.
  • I guess the reasoning behind it is not logical for normal web developers so it makes the adaption of Domino harder for them.

Here how it looks:

In Designer (CSS is working):

In Firefox:

jQuery TreeView Menu from Notes View

I was looking for a way to get a web publishing toolkit in Notes away from displaying documents in a frameset.

The frameset consists of several frames:

  • a header section
  • a leftside navigation section
  • a main or content section

The reason why a frameset is used because the leftside navigation is populated from documents in a Notes View.  This navigator would be collapsed again every time it would be re-loaded again.  It is also build by an agent that generates XML which needs to be transformed in the browser.

Here is how it looks today:


Some searching on the web brought me to these documents:

jQuery TreeView Menu and a Show ‘n Tell Thursday blogpost. Combining the 2 topics would solve my problem since the jQuery TreeView allows to re-open the treemenu by the location specified for a menu item!

( I will add the SnTT tag to this document to honour the contributors, even when it is now still Thursday)

I soon discovered that the code for the Tree Convertor from Datatribe works with documents in the same level, meaning that documents with a response hierarchy will not be supported because you do not use categorized columns in your View. Nevertheless a little trial and error and rewriting the original code resulted in the following Notes View presented as a tree:


Note: in the example I have already applied some styling.

In this View each ‘Category’ is a document containing one or more response documents. The highlighted (red) item is the currently opened document.

So how do you get there?

  • Create a Notes View that displays your documents as you want them to be presented in the tree. In the Datatribe example this View is called (LUDocs).


  • Upload all the fields you need for the jQuery TreeView (CSS, Images, JS Libraries) and reference to them in the Head section of your Document Form:


  • Add the fuction that will transform the HTML list into a Tree View structure.


Note:  -the persist: “location”- parameter ensures that the tree will be expanded by the item / document opened by default.

  • On the place where you want to display the TreeView add the following code:


As you can see a script is here called which uses an Agent to collect the data from a Notes View in an HTML format ( ul and li list format). I had to make come changes to the original code, since I am using a View that support the display of response documents in a hierarchy.

Sub Initialize
‘—This agent is designed to ouput the required javascript to produce a nested HTML list
On Error Goto errorhandler

Dim s As New notessession
Dim db  As NotesDatabase
Dim doc As NotesDocument

‘–Category passed in via URL
Dim inCategory As String

‘—View name passed in via URL
Dim viewName As String

‘—Display Category ?
Dim displaycategory As String

‘—Document in the view
Dim tmpdoc As notesdocument

‘–Category Level
Dim level As Integer
‘—Current Category level
Dim currentLevel As Integer

Dim view As NotesView
Dim i As Integer
Dim JavascriptOutput As String

‘—Due text size limits we need to hold the ouput on 1 or more temporay notes items (never saved)
Dim fieldCounter As Integer
Dim holdingField As Notesitem

Set doc=s.documentcontext

‘–Set up holding field
Set holdingField=New notesitem(doc,”HoldingField_” & fieldCounter,””)


Set db=s.currentdatabase


If displaycategory=”false” Then

If inCategory=”” Then
JavascriptOutput=JavascriptOutput & |<h3>All Documents</h3>|
JavascriptOutput=JavascriptOutput & |<h3>| & inCategory & |</h3>|
End If
End If

JavascriptOutput=JavascriptOutput & |<ul id=”tree”>|

‘—-View could be passed in via QueryString to allow a more generic agent
Set view=db.GetView(viewName)

‘—If view is not found handle it – as the view name is passed in this could be missing
If view Is Nothing Then
Print |Content-Type:text/plain|
Print |document.write(‘Error – View not found -| & viewName & |’)|
Goto getout
End If

Dim entry As NotesViewEntry
Dim nav As NotesViewNavigator
If inCategory=”” Then
Set nav = view.CreateViewNav
Set nav = view.CreateViewNav
End If
Set entry=nav.GetFirst

Dim edoc As NotesDocument
Dim childdoc As NotesDocument
Dim coll As notesdocumentcollection

While Not(entry Is Nothing)

Set edoc = entry.Document
Set coll = edoc.responses

If coll.Count > 0 Then
Select Case (entry.ColumnIndentLevel+1)
Case level
JavascriptOutput=JavascriptOutput & |</ul></li>|
Case Is<level
For i=2 To ((level)-entry.ColumnIndentLevel)
JavascriptOutput=JavascriptOutput & |</ul></li>|
End Select

‘–Update level

‘–Propercase it
JavascriptOutput=JavascriptOutput & |<li><strong><a href=”http://| & returnCommonServer() & |/| & swapchars(db.FilePath,”\”,”/”) & |/0/| & entry.UniversalID & |”>| & edoc.Tx_Document_Title(0) &|</a></strong><ul>|
‘—At document
Select Case (entry.ColumnIndentLevel+1)
Case level
JavascriptOutput=JavascriptOutput & |</ul></li>|
Case Is<level
For i=2 To ((level)-entry.ColumnIndentLevel)
JavascriptOutput=JavascriptOutput & |</ul></li>|
End Select

‘–Update level

Set tmpdoc=db.GetDocumentByUNID(entry.UniversalID)
Set tmpdoc=entry.Document
If tmpdoc.Tx_Document_Title(0)<>”” Then
JavascriptOutput=JavascriptOutput & |<li><a href=”http://| & returnCommonServer() & |/| & swapchars(db.FilePath,”\”,”/”) & |/0/| & entry.UniversalID & |”>| & fn_escape(Cstr(tmpdoc.Tx_Document_Title(0))) & |</a></li>|
End If
End If

‘–Check for field size
Call holdingfield.appendtotextlist(JavascriptOutput)
Call monitorFieldSize(doc ,fieldCounter,holdingField)
Set entry=nav.GetNext(entry)

‘–Now we have finished we need to close the remaining tags
For i=1 To (currentLevel-1)
JavascriptOutput=JavascriptOutput & |</ul></li>|

Call holdingfield.appendtotextlist(JavascriptOutput)

‘—-Now output Javascript

Print |Content-Type:text/plain|
Print |document.write(‘\n’+|
If fieldcounter=1 Then
Forall items In doc.GetItemValue(“HoldingField_1”)
Print|’| &  items & |\n’+|
End Forall
For i=2 To fieldcounter
Forall items In doc.GetItemValue(“HoldingField_” & i)
Print|’| & items &  |\n’+|
End Forall
Forall items In doc.GetItemValue(“HoldingField_1”)
Print|’| & items  |\n’+|
End Forall
End If
Print |’\n’)|

Exit Sub


‘—As this is an agent that expects to return JavaScript we will return the error message in Javascript
Print |Content-Type:text/plain|
Print |document.write(‘Error – | & Error & | – | & Err & |’)|

Resume getout

End Sub

That is about it! Here is a better look of the result:


Pagination on a View in the Notes client

A problem with Notes Views is that when they contain a lot of documents scrolling becomes inevitable. Even when you apply categorized columns it will become necessary that users click through the Views. An option would be that you just start typing and hopefully Notes will lead you to the nearest corresponding document.

When you apply categorized views the categories are displayed vertically below each other so for travelling users with smaller screens it will become tasly to open and close the categories just to see thse categories and corresponding documents displayed in a properly in the overview.

Maybe XPages in the Notes client will bring us some relief, but we are not there yet.

So how do we cope with the issue for the time being?

On the web it is common practice to have some sort of pagination on top / below lists of documents so you can navigate through the list without the need to scroll up and down or move you mouse across the screen. The pagination can be based on number of available pages or just available short cuts (example: the first letter of an available lastname). I myself have written some articles about pagination on this blog which you may check out yourself.

So this is all about the web, I adress this article to pagination in the Notes client.

The simplest way I found is to create a list of similar shortcuts, containing javascript, and render pass thru HTML in Notes. In this example I explain how I added pagination to a list (a Notes View) of persons. The thought is to show a list of persons form which their lastname start with a certain letter. What I needed to accomplish this:

  • A Form with an Embedded View. This View should be categorized by the first letter of the lastname @LowerCase(@Trim(Tx_LastName);1). SaveOptions are set to zero ofcourse.
  • The Embedded View has the ‘Show single category option’ in use.  As formula write the name of the Field that will acts as a temporary container (Tmp_LastName).
  • Add a Field named TmpLastName on top of the Embedded View. Make it editable. As default value give it the value “a” (you could check if this value is really available or not).
  • On top of the Form add the following JavaScript and CSS code:

<script language=”Javascript”>
var entryNumber = “”;
function showTab(lastName) {
entryNumber = lastName;
document.forms[0].LastName.value = entryNumber;
entryNumber = “”;

<style type=”text/css”>
font {
font-family: “Default Sans Serif”, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 8pt;
color: black;
text-decoration: none;
text-align: left;
text-indent: 1ex;
A:link {color: blue; text-decoration: none}
A:visited {color: blue; text-decoration: none}
A:active {color: blue; text-decoration: none}
A:hover {color: blue; text-decoration: none}

  • As final step you need to add a computed text just above the Embedded View. Mark the text as passthru HTML. A Value enter:

varList:=@DbColumn( “”: “NoCache” ; “” : “” ; “PersViewCategorized” ; 1 );
tmpList:=@Implode(“<a href=\”javascript:showTab(‘” + varList + “‘)\”>” + varList+ “</a>” + ” | ” );

Here we make a call to first column in the same Embedded View. Around each found category we wrap a JavaScript call which will put the value in the temporary field and finally we call the button to update the UI.

Here is a screendump that shows how it could look like:


A problem discovered

Well everything  looked shiny untill I tried to load the Form in a Frameset. When pressing on one of the links I got the message:


Some work to do IBM….