Cleaning up a Notes Web template: the Document Library

IBM Lotus Notes/Domino ships with a number of ready to use applications. Their web interfaces however seem to be somewhat frozen in time. Is it possible to clean them up, without touching the code behind too much? Let's find out, starting with the Document Library template.

IBM Lotus Notes/Domino as a RAD platform

Until now, I have only blogged about making XHTML compliant, search engine friendly websites or blogs with Lotus Notes Domino. Serving a Notes application with a web interface however is a completely different story. Here you want to benefit the maximum of all the useful build-in features: collapsible views, outlines, action bars etc. Which HTML type is rendered or having clean HTML source code is here less important than ease of development and not having to do the same things twice.

Cleaning up

I removed the outer frameset both for Notes and for the Web. Then I checked if all rich text fields use 'Best for OS': this setting gives the most up to date rich text editor: JavaScript based on IE and unfortunately still the applet in Firefox. Then I got rid of all rest of the applets. I noticed that they were already gone in the version 7 template. I only had to switch the action bars to HTML. I kept the frameset, but I had to convert the $$ViewTemplate and outline pages to forms to make them more controllable.

The HTML

I wanted to touch the backend code as little as possible, so I just added a shared field $$HTMLHead to each form to include an external javascript and a css file:

a:="/"+@WebDbName+"/";
"<link rel=\"stylesheet\" type=\"text/css\" href=\""+a+"doclib.css\">"+@NewLine
+"<script type=\"text/javascript\" src=\""+a+"core.js\"></script>"

Note that in HTML 4, you do not close single tags with />. Doing this would even get you a validation error.

The JavaScript

The script does three things: it first sets the border attribute of all tables to 0. Then it gets the links out of the actionbar rendered by Domino in a very ugly table and puts them in an unordered list. It adds this list in an absolute positioned div to the page. Together with the navigation bar to the right, these elements cover the ugly actionbar table entirely, so no need to remove it. Finally, a small script is added to make the last clicked outline entry active so that users can see in which view they are:

var G={w:window,d:document,g:navigator.product=='Gecko',
init:function(){for(var n in G)if(G[n].init)G[n].init()},
set:function(a,b){for(var o in b)a[o]=b[o];return a},
create:function(a,b,c,d){var o=(d||G.d).createElement(a);G.set(o,b);G.set(o.style,c);return o},
append:function(a,b,c,d){var o=b.tagName?b:G.create(b,c,d);a.appendChild(o)}
},
$=function(a,b){return (b||G.d).getElementById(a)},
$$=function(a,b){return (b||G.d).getElementsByTagName(a)}
G.w.onload=G.init

G.clean={
init:function(){
    var m=this,o=m.tables=$$('table'),i
    for(i=0;i<o.length;i++)o[i].border=0
    m.actionbar()
    m.outline()
},
actionbar:function(){
    var m=this,o=m.tables,v=[],i,q
    try{
        if((o[0].nextSibling.tagName||o[0].nextSibling.nextSibling.tagName).toLowerCase()=='hr'){
            o=$$('td',o[0])
            q=G.create('ul',{id:'actionbar'})
            for(i=0;i<o.length;i++)G.append(q,'li',{innerHTML:o[i].innerHTML})
            G.append(G.d.body,q)
        }
    }catch(e){}
    
},
outline:function(){
    var m=this,o=$('outline'),i;if(!o)return
    o=$$('tr',o)
    for(i=0;i<o.length;i++)o[i].onclick=m.oClick
},
oClick:function(){
    var m=G.clean
    if(m.oActive)m.oActive.className=''
    this.className='on'
    m.oActive=this
}
}

The CSS

Mostly the usual stuff: add some colors, count some pixels. For the navigation bar however, I used the CSS sprites technique I explained elsewhere in this blog to create nice action icons.

body,td,font{font-family:verdana,sans-serif;font-size:11px}
hr{display:none}
table{border:0;border-collapse:collapse}
body,h1,h2,#actionbar{margin:0;padding:0}
body{overflow:auto}

#outline h2,#topnav,th{border-bottom:solid 1px #000}
#outline #topnav{position:relative;text-align:left}
#outline h1{font-size:12px;line-height:12px;padding:10px}
#outline h2{font-size:11px;font-weight:normal;padding:4px 10px;background:#D4C9BA}
#outline a{color:#000;text-decoration:none}
#outline a:hover{color:#00f}
#outline tr.on{background:#EFEFEF}

#canvas{margin:10px;position:absolute;top:34px}
#topnav{position:absolute;top:0;width:100%;height:33px;background:#BBA58B}
#topnav div{float:right;margin-right:10px}
#topnav a,#topnav i{display:block;float:left}

/* css sprites: smart icons */
#topnav i{background-color:#D4C9BA;background-image:url(SmarticonsR65x.gif);height:21px;width:21px;border:outset 1px;margin:5px 2px}
#topnav a{background:#BBA58B;color:#000}
.prev{background-position:-3300px -100px}
.next{background-position:-3300px -80px}
.first{background-position:-3340px -80px}
.last{background-position:-3340px -100px}
.expand{background-position:-3260px -40px}
.collapse{background-position:-3260px -80px}

#actionbar{list-style:none;position:absolute;top:5px;left:10px}
#actionbar li,#actionbar a{display:block;float:left}
#actionbar a{background:#D4C9BA;border:outset 1px;padding:3px 5px;margin-right:5px;text-decoration:none;color:#000}
#actionbar a:hover{background:#E2DBD1}

#viewbody{position:absolute;top:34px}
#viewbody table{width:100%}
#viewbody table table{width:0}
#viewbody h2{font-size:11px;padding:10px}
th{background:#D4C9BA;padding:0;padding-bottom:2px;padding-bottom:3px !important}

.properties{border:solid 2px #BBA58B}
.properties td{padding:5px}
.doc-caption{background:url(docheader.gif) bottom right no-repeat;border-right:solid 2px #BBA58B}

Small things

After tweaking a few things here and there, finally I changed the $$Return field to go to the same page in read mode after posting it. I had to modify the QuerySave agent so that it didn't print anything when no errors occurred. When a QuerySave agent doesn't print anything, the $$Return field is used for the next action. Here's a screenshot of the result:

Evidently, this is only the beginning. I got away with the action bar without having to make dropdowns, but only just and only this time. It would also be extremely helpful to add custom controls with JavaScript. Some other time. Please let me know if these sort of excercises are useful to you. I am pretty sure at some moment IBM will clean them up or give us exciting new ones. Maybe no-one uses these Notes templates anyway?

I can not show the application online this time: I ran out of databases and our Administrator does not allow us to create new ones on our own. So if you are interested, you can download it below.

Download

doclib.zip (221 kB)