Friday, December 22, 2006

Upgrade to IE 7 vs Firefox 2

I was going through this month statistic of my blog. This come a little surprise to me. Both Firefox 2.0 and IE 7 a while ago.

For firefox, users 62% users already upgrade to 2.0 and another 5% is already on

For IE, only 19% of the users have upgraded to IE 7.

So what does this means? I myself is still on IE6. One of the reason was proven by the statistics. Most people are still on IE 6 so my development have to support them. And I can't install both IE 7 and IE 6 together on the same machine. Lets just see how fast IE 7 will gain momentum.

Merry Christmas and Happy New Year

After so many months of hard work, at last I have a break coming up. Going for vacation for the next one week.

So wish all the readers a Merry Christmas and a Happy New Year :)

Thursday, December 21, 2006

Product certification, is it important?

I have just pass the "IBM WebSphere Application Server V6.0 Network Deployment, Core Administration" exam. Thanks to Websphere User Group (WUG) Malaysia for providing free certification examination. So does this means I'm a certified WAS Administration. To be honest I won't dare to call myself that, at least for the moment until I have more hands-on experience. I do not have much experience on WAS. I use WAS before a few years back and that's just touching the surface. I have not don't real setup of the server, clustering, etc. I have just installed some J2EE application on the server. I just spend a few days going through some materials on WAS. Haven't that little experience helps a bit to understand the new WAS 6 easier. But being certified doesn't mean that I'm an experience guy. The certification does help me to understand the product much better (with or without experience). Anyway, I really appreciate WUG for giving free certification exam to the members. How about Lotus User Group (LUG), would they give free certification exams to the member?

I'm more experience in Lotus Domino/Notes. Does someone without certification means that he/she is not as good as someone with certification? I believe that I'm just as good as most certified Lotus person out there. Surely there are some really really expert in Lotus. Some are certified and some are not. In employment market, I think it does matters as someone with certification have some prove that he/she have the knowledge. But then again, by just reading and without experience, someone could pass the examination. It is not too difficult. So does certification really makes a different? And should I sit for Lotus examination just as a prove that I "know" Lotus?

Wednesday, December 13, 2006

Burn the bug with Firebug

If any of web developer who have not install Firebug, download it now. It's a look you will say "How can I live without that". The beta 1.0 have a lot of improvement especially on the javascript debugging. Check it out.

Friday, November 24, 2006

Using Java in Lotus

I haven't been updating this site as often as I want too but work have been keeping me really busy.
My friend was asking why should he (Domino Developer) learn up Java? Basically for Lotus Notes application, it is quite sufficient to keep to Lotus Script and Formula. There are lots of advise why should we learn up Java but I'm not going to go into that here. I give let him know that the skill may come useful sometime even in Lotus Notes application. It would be good to branch out a little too.

So for the Lotus Notes application example, I gave him the link to a post I had sometime back in my earlier blog. The example show how you can use a Java image library to get property out of attached image files. I couldn't find any way of doing it in LotusScript (drop me a line if you know of a way). Check out the example here. At least he agreed that there are some use of Java in Lotus Notes application development.

Thursday, November 09, 2006

Efficient JavaScript

For anyone who does web development, this article "Efficient JavaScript" is a good read from Dev.Opera.

Tuesday, October 31, 2006

Client User Interface on Web: Preview pane on web

I finally get some time to sit down and do an example of a very simple application with dojo. I've created a split vertical pane. The top pane will display the view and the bottom pane (preview) will display the form (edit and saving).

You can download the example here. Remember to sign the database first.

First setup where you store your dojo library. Open the profile document from the menu "Action --> Edit Profile".

Enter the path of the dojo.js. for eg "/WebTool/Dojo.nsf/dojo-0.3.1/dojo.js". Here I store dojo in a nsf template. You can also store it directly at the Domino server HTML directory.

First the view. I used SortableTable. The view (hvPerson) generates the html table body. $$ViewTemplate is use to create the rest of the table for the SortableTable. In each row, the document unique id is inserted in the <td> tag as a value. This will be use to retrieve the selected document from the table.

The "Create" button will retrieve the form (dfPerson). Domino form will create the full HTML source by default. So when it is retrieved, we only need the Form portion to be display in the preview area.

When saving the form, we can directly use the form action for submission. Just pass in the form to and it will handle the submission. This is the same when saving a existing form. The best part is, even the WebQuerySave works. So this is really a convenient function to use.

I have just touch the surface of how "Client" like application can be built on the browser. To those dojo guru out there appreciate if you could feedback on the code used here. I put together the this sample application referring to the dojo demo application and responses from this forum.
Download the sample and try it out.

Friday, October 20, 2006

Happy Deepavali

For all Indian readers and my friends, wish you all a very happy Deepavali.

Wednesday, October 18, 2006

Client User Interface on Web

There are so many different javascript framework available for download. To name a few prototype, dojo, yui.... etc. The list goes on. I've been using prototype for quite a while and like it. The $ function, some of the DOM, event and array functions are quite easy to use.

Now I'm looking for something that can help me build a client like application on browser. Dojo provide a lot of building client like functions, eg. browser windows, menu bar, just to name a few. YUI is gaining a lot of reputation for their set of library. So which is better? Or should I stick to prototype & scriptaculous?

I ended up giving dojo a try. Dojo definitely have quite a lot of build in functions. But it's quite heavy too. The full dojo.js compress is 127 KB. That doesn't take into consideration of the many different library that need to be imported for different functions.

First impression, documentation is needs to be improved. I can't find offline documentation that can be downloaded. The API doc and the manual is all online. But I still gave it a further look.

Going through some of the examples, I found something that I can start with. I like the ContainerPane and the SplitPane. I can build layout without worrying about the CSS of the different panes in a page. The spilt pane provide resizable panel. That's nice.

Then I jump to AJAX calls. Dojo provide an IO library for that. Dojo even provide crossed domain AJAX calls through IFrame I/O. What I like is the form submission. That's what's I was looking for.Lotus Notes form itself have the required submission action url. Using, AJAX posting of the form can directly use the existing url. This is convenient.

Using both function above, a view with preview pane can be created similar like in LN Client. user can browse through the view documents without refreshing the page. The document can be set editable and save within the same page. I'll be drafting the steps to create the example describe above. Keep a look out.

Friday, October 13, 2006

Managing Domino File Resources Using WebDAV

For those of you using external javascript library in Lotus Notes, I guest a lot of you went through the pain of importing the javascripts into the File Resources. This is true for big library like YUI, Dojo and even DHTML editors like TinyMCE. For some, most probably those will be distributed directly into the server HTML folder. But for a worldwide distribution of application, it's easier to distribute it together with the application.

Thank to Jake brilliance again, I learned a new way to import these file almost quite easily into the database using WebDav. Just a few setup on the server and you are ready to go. Check out the article "Managing JavaScript Libraries in Domino".

Wednesday, October 11, 2006

CouchDb Project Website New Design

CouchDb Project website have a new look. Thanks for Ken Tango for the design.
It's been some crazy month for me at work. Didn't manage to update my blog recently. I've been working on CouchDb website new look for the pass few days and just manage to implement the new look. Check it out.

Monday, October 02, 2006

Content Feed RSS Part 2 - Datetime

I've learn something new from a comment from my previous post. All date-times in RSS conform to the Date and Time Specification of RFC 822, with the exception that the year may be expressed with two characters or four characters (four preferred). Must have miss that when browsing through the RSS Specification. I've updated the RSS feed of CouchDb Forum. The change is quite easy in Lotus Notes view. I've just change the column to the required format as shown below. Use "Date/Time" style for the column and display "Custom".

Sunday, September 24, 2006


It's been a while since I last post anything here. Just to put up a line that I'm still around (alive and kicking). It's been a crazy month for me. After countless hours put into a project. Now in the phase of rolling out. But still have a lot to do. Even today on Sunday is a working day. Hoping to get a break after this. Then I'll put in some time to share some of the technical experience I gain from this project. So look out of it. Cheers :)

Tuesday, September 05, 2006

Content Feed RSS Part 1

There are two major content feed (that I know of) Really Simple Syndication or Rich Site Summary (RSS) and Atom. I am working on creating a RSS feed for the CouchDb Project website. On firefox, when a website have a feed, it can be indicated right on top at the URL bar.

You just need to add the following code
<link rel="alternate" type="application/rss+xml" title="Lotus Notes on Web 2.0 (RSS 2.0)" href="" />

The RSS feed for the CouchDb Forum is created using view and $$ViewTemplate. I will be posting the solution in my next writeup. Check out the feed here.

Friday, September 01, 2006

CouchDb project site live

CouchDb project website is now live. CouchDb 0.2 has just been posted. Head to the project site to download CouchDb.

Wednesday, August 30, 2006

Export View as MS Excel

Follow up with the previous posting, I get the idea from Sean Burgess to export view data directly to excel. The idea is basically create a HTML table from a view and display it as application/msexcel.

Create a HTML view. I name the view with alias viewname.xls

In the header add in the required tag for a table <tr> and <td>

Then create a $$ViewTemplate for the view. In the Content Type, set it as application/msexcel

Embed the view into the viewtemplate then add in the opening and closing table tag for the view.

When you call the view (http://server/dbpath/viewname.xls) it should prompt you to save the view. The saved file can be open in Excel. The similar method can be used to export to other format like words, etc.

Tuesday, August 29, 2006

How to export web data to MS Excel

Philippe GAUVIN wrote an good article on how to export web data to MS Excel. Basically the concept is to display the view as Comma Seperated View (CSV). Then use $$Viewtemplate to set the Content-Type as text/csv. Basically when you load the view, it should open in MS Excel (only for those pc which associate csv file with MS Excel). This is an easy and fast way to "export" the data out. Check out the article.

Friday, August 25, 2006


I have not been updating my blog lately. It's been some crazy weeks. Lots of project is in the queue. In a way it's good.

Recently I've volunteer to help develop a site for CouchDB with Damien Katz. Thanks to Bruce Elgort for hosting the new project site. It should be out soon. I'll announce it here once it's up and running.

So what id CouchDb anyway? CouchDb is a database system meant to simplify the development of certain types of applications, particularly document oriented applications. For more details check out this site.

Damien just launch Alpha 1. You can download and test it out. There are some sample on PHP. Check it out and look out for the project site soon.

Tuesday, August 22, 2006

5 HTML elements you probably never use (but perhaps should)

There is an article at about 5 HTML elements that's seldom use
  1. <address>
  2. <q>
  3. <optgroup> (personally fell this one is really useful)
  4. <acronym> or <abbr>
  5. <fieldset> and <legend>
Check out the article for details.

Friday, August 11, 2006

Keep Domino Web session alive with PeriodicalExecuter

I created a web application which required to keep the session with the Domino server active. The current server settings is only 30 minutes. Changing that is not an option because it will effect other applications. A solution is to always do a server request before the session time ends. A very easy way to do it is to use prototype.js PeriodicalExecuter. You can specify the number of seconds when should a function be triggered

new PeriodicalExecuter(KeepSessionAlive, 1200);

function KeepSessionAlive ( ) {
var ajax = new Ajax.Request("/icons/blank.gif",{

Every 20 minutes (1200 seconds) I call the function KeepSessionAlive. The function will make a simple request to the blank.gif icon on the server. This will keep the session with the server alive. You can use this function to refresh and update a view every few minutes. This is another one of the simple useful function provided by prototype.js.

Tuesday, August 08, 2006

Lotus Notes got layers?

Yes. Lotus Notes got layers. Chris Blatnick from Interface matters come up with the idea to create cascading menu using layers. Never thought of that before and never actually used layers in Lotus Notes client before. But the solution sure looks cool. Check out the article here

Wednesday, August 02, 2006

10-Week Free AJAX Programming

Sang Shin is giving a 10 Week Free Ajax Programming Course . For those who's new to Ajax, this should get you up to speed with Ajax. Check out his other free Java/J2ee courses.

Thursday, July 27, 2006

Lotus Notes application deployment

I had a discussion with some technie friends about what they do. Most of them are on .NET or JAVA platform. So I'm the only Lotus guy there. Not one of them have any experience with Lotus Notes. So I get tons of questions. To simplify the explaination, I told them Lotus Domino is an all in one mail server, web server, application & db server, etc. They are more interested in the application that we run on LN. So I told them that LN application can be build easily (definitely with some limitation). LN Designer itself is a Rapid Application Development tool.

Then how do I deploy applications? Good question. I have read a lot of talk on how good Domino is but haven't read many who drill down on how easy LN application can be deployed. First, I do not have to worry about compiling the code. I just need to develop and then save the design. After finish development, I test it then send a request to make a new copy of the application on the production server (initial copy). And it's done. How about updates and upgrades, they ask. There's a few ways to do it, I can directly replace the design or create a template which the application will inherit the design from. If the application is located on many different server, replication will take care the deployment. I don't need to go to individual replica to update the design. Even different copy of the same application can inherit from a single template. They were impressed. Hmm.. maybe we can call Lotus a Rapid Deployment environment.

Tuesday, July 25, 2006

Hannover 101

Jeff Eisen have posted a good article on Hannover. Check it out.

Wednesday, July 19, 2006

Javascript Logger Console (Part 2)

This is the extension from Part 1. I've added some extra functionality for the Log Console.

There is an option bar the the bottom of the console. You can clear the console. You can select to show either the messages or error. There's a hide/show where it will minimize / maximize the console pane.

Currently I place the console on the right side of the page. Sometimes, it may be blocking part of your page. You may want to make it dragable. I've use scriptaculous to do the job. Just insert the code below after you initialize the logconsole.

new Draggable('logconsole',{revert:false,handle:logtitle});

Extra tips:

If you use, alert to debug your javascript codes, you will have to comment out or remove those codes. Using a logger console, you can disable (hide) the console when moving your application online.


If a user hits a problem you can activate/show the console on the selected browser itself. This will assist if you hit a unique user related issues.


Download the logConsole.js and logConsole.css to try it out.
For furthur enhancement, I will work on not only logging in console. Error logs should be added to a log database. This will help to administer and monitor your applications.

Friday, July 14, 2006

Javascript Logger Console

I've created a very simple javascript logger console (LogConsole). When developing a web application, it is very common (at least for myself) to use alert (prompt) to go through or debug javascript codes. Instead doing that, the LogConsole provides a simple messaging interface that allows you to log messages and error into the console.

Prototype.js need to be included together to use this. Download these two file logconsole.js and logconsole.css and include it into your page.

Call the LogConsole class to activate and log messages

Event.observe(window, 'load', setLog, false);
var logConsole;
function setLog(){
logConsole = new LogConsole();
logConsole.enable(true); //false to disable;
logConsole.logMsg("message"); //log message;
logConsole.logError("error message"); //log error message;

The sample screen for the Log Console is below

This idea is taken from YUI Logger. This current version is still far from YUI Logger can do. I just implemented it about an hour ago. If you have any suggestion to improve or additional functions, drop me a line. Or if you prefer just a simple Logger, this light weight logger is just right.

Part 2

Monday, July 10, 2006

File Resources MIME Type

Followup on this previous writeup, css / javascript files can be uploaded to the File Resources. In terms of performance, File Resources are faster than attachments in documents. File Resources are also flexible due to the configureable MIME type. Go to the Web Properties tab in the attachment property. Insert the correct MIME type for the file resource.

Tuesday, July 04, 2006


Most (maybe almost all) Lotus Notes applications will use LotusScript. Even most web application on Lotus Notes, there will be at least some LotusScript involved. One of the key pieces of most LotusScript error handling routines is delivering a message that explains what the error is, and also exactly where it happened. Lsi_info provides some details that is useful in error handling. Lsi_info is mentioned in the LotusScript sections of the Designer Help, as a reserved word, but nowhere does it tell you what it contains.

When you create some methods or functions, typical error handling message would be

something link this

Print "(functionName): Error (" & Cstr(Err) & ") Line: " & Cstr(Erl) & " - " & Error$

Instead of coding the sub or function name, using Lsi_info, you can create a error handling message like below

Print Lsi_info(2) & " called by " & Lsi_info(12) & ": Error (" & Cstr(Err) & ") Line: " & Cstr(Erl) & " - " & Error$

The variable lsi_info is an array of strings.
  • lsi_info(2) is the current module - sub or function name.
  • lsi_info(12) is the module that called this sub or function. If lsi_info(2) is INITIALIZE, then so is lsi_info(12)
You can get a detail article at Dominopower.

Thursday, June 29, 2006

jQuery Visual Documentation

Here is a link for the visual reference to jQuery, the super-lightweight library designed to make the most common JavaScript tasks easy and fun.

Tuesday, June 27, 2006

Lotus Notes categorized view Accordian using jQuery

This is another early SnTT. This is another follow up previous writeup on categorized views. Lotus Notes categorized view on web will require refresh for every expand or collapse of the view. To counter this, retrieve all the data and build our own view. In this example, I'm using jQuery instead.

I've create a simple example of building a Accordian style categorized view using jQuery. It retrieve the view xml - ReadViewEntries - and build the categorized view. It uses jQuery basic effects to slide up and down the content when expanding or collapsing the view.

1) Firstly include the jquery.js in the header. Download this viewfunction.js and add it into the header.

"<script type='text/javascript' src='/"+ @WebDbName +"/jquery.js'></script> <script type='text/javascript' src='/"+ @WebDbName +"/viewfunction.js'></script>"

2) Create a division name "viewdisplay". The generated view will be populated in this division.

<div id="viewdisplay">

3) In the JS Header add the code below. The jQuery $(document).ready(function(){}); event will be called the instant the DOM is ready to be manipulated. Pass in the view URL (?ReadViewEntry).


4) the getView function will built the view and display it in the "viewdisplay" division. For each category, it will append in the class "catcol<num>" (num starting form 0). Then for each column, it will append the class "col<num>" (num starting from 0). So you can format the look and feel for the view.

Example css for the view

Please take note that this is just a simple working example. It can generate single and multiple category. Make sure the view are expanded when using this (defeats the purpose if keep it collapse as the script will have to go to backend to retrieve the content). At the moment, the function still does not take into consideration of building views starting somewhere in the middle of the view. The slideUp and slideDown effects works nicely on Firefox. On IE, there will be some slight flicker. To overcome this, the page have to be renders in XHTML instead.

Download the js and tried it out. Appreciate any feedback on how and what to improve on that.

Updated (28/June/2006) - The viewfunction.js posted previously was not the working version. I've updated the js file.

Monday, June 26, 2006


Recently I've been testing out jQuery. Why do I use jQuery instead of prototype / scriptaculous? The main reason is because of the size. The full version of the framework is just 16K.

From jQuery website

jQuery is designed to change the way that you write Javascript. jQuery is a Javascript library that takes this motto to heart: Writing Javascript code should be fun. jQuery acheives this goal by taking common, repetitive, tasks, stripping out all the unnecessary markup, and leaving them short, smart and understandable.

jQuery itself have most of the features that I need. For example DOM traversing and modification, event handling, iteration, style, effects and of course AJAX. All this is pack in a single js file of 16K.

I'll put up some of the features and function of using jQuery with Lotus Notes in the future. So lookup for the writeup.

Monday, June 19, 2006

Quick Tip - Web font family and font size in Lotus Notes

For web development in Lotus Notes, it is a good practise to use CSS to style page / form. This is true especially for the font-family and font-size.

Example, if you create a simple text page (example below). Change the font family to Arial and the font size to 9

The sample html generated:

<font size="2" face="Arial">something</font><br><font size="2" face="Arial">about</font><br>
<font size="2" face="Arial">nothing</font>

If you have a big page / form, imagine the much overhead is generated. To overcome this, use font "Default Sans Serif" with size "10". Insert a css link in the HTML Head

"<link rel=\"stylesheet\" href=\"/" + @WebDbName + "/style.css\" type=\"text/css\" />"

Create a page name style.css . This link to previous writeup on extra css property settings. Insert the code below.


The code will reduce to

This would help reduce to size of the page. If you have performance issue for the web pages, this is one of the way to help improve the performance (may or may not be major improvement depending on your page). Try it out :)

Wednesday, June 14, 2006

Changing image on mouseover & mouseout

Usually we will create 2 seperate images for mouse over effects. In Lotus Notes you can do it by using 1 image only. Create one image containing the orginal image and mouse over image side by side. Add a line seperator in the middle. Sample image below.

Create a new image resource. In the property "Basic" tab, change the value of "Image cross" to 2.

In your form, you can insert the image resource. By default, Lotus Notes will show the first image (Left). When previewing the form, the image will change to the second image(right) when mouseover the image and back to the first image when mouseout.

This works on web also. In the image property, check on "Web browser compatible". Domino will create the function below.

<script language="JavaScript" type="text/javascript">
function dominoWellLoad(elem, baseUrl, width) {
elem.well = new Array();
for (var i=0; i < width; i++) {
elem.well[i] = new Image();
elem.well[i].src = baseUrl+"&ImgIndex="+i;
// -->
<img src="dbpath.nsf/Email.gif?OpenImageResource&ImgIndex=0" width="62" height="65" onmouseover="if (this.well) this.src = this.well[1].src;" onmouseout="if (this.well) this.src = this.well[0].src;" onload="if(null==this.well) dominoWellLoad(this, 'dbpath.nsf/Email.gif?OpenImageResource&ImgIndex=0', 2);" alt="">

You can also use the image individually by from the source

By default, the cursor remains the same so you may want to add to the style or a class in stylesheet to change it to a pointer.

You can try out using more image
2 (Second position) - for mouseover
3 (Third positio) - for selected image
4 (Fourth position) - for mouse-down image

JSON for Dummies part 2

Below are clipping from My Portal Project, JSON for Dummies part 2:

Change the JSON response so that we have a method called “actionToTake”, and call it directly:

{"actionToTake" :
alert('The description and category fields are required.');

In the above sample we created the “actionToTake” object as a function, with no parameters. Now we can use the following code to process our action:

function processJsonResponse(originalRequest){
var domText = originalRequest.responseText;
var jsonResult = eval("(" + domText + ")");

This is another example of JSON strength.

Tuesday, June 13, 2006

JSON for Dummies

So what is JSON all about? How do you actually pronounce it? Is it 'J' 'S' 'O' 'N'? I personally call it J'a'SON.
Jeff Crossett at My Portal Project wrote an article on JSON for Dummies (like me) Part 1. Check it out here.

Wednesday, June 07, 2006

InViewEdit on web

In my recent application, there are a few views that only have only a few columns (2-4 columns). In Lotus Notes client, you will have the InViewEdit feature. Since the most of the data are being be edited is in the view directly, I mimic the InViewEdit function for web views.

I've created a sample database to showcase this. I use "?ReadViewEntries" and prototype / AJAX to retrieve the XML viewentries. Another way to do it is to directly generate the html in the view itself. To keep things simple, in the view, the column name is the same and the fieldname. The form "Main" will retrieve the view and display it.

First create the layout for the view. From the XML, I traverse each viewentry and use "div" to generate each role each row. Each column data have their own id.

<span class="col0" id="e_0_0">William Be</span>
<span class="col1" id="e_0_1">012-3456789</span>
<span id="button0"><img class="editbutton" onclick="editEntry('0', '8F6')" src="pencil.jpg"></span>

Below is the sample result:

I've added button/image which will call the function to edit the row. It will pass the row number that is going to be edited and the notesid of the document. Textbox will be generated on the row. Then the button/image will change to confirm or cancel update.

Cancel will restore the original value (remove the textbox). Update will do an AJAX POST to an agent. The agent will update the appropriate document. Then it will return success or error message. If there's an error, the original value will be restored. If the agent return success status, the update value will be displayed (removing the textbox).

In the agent, instead of using XML for the return message, I use JSON. Sample JSON message

msg:"Doc not found"}

In the javascript, use eval to set the JSON object into a variable. Check if there is an error, alert the user and exit the function. If not error, it will continue processing.

var data = eval('(' + req.responseText + ')');
if(data.status == "error"){
resetEntry(eleNum, noteid);

I prefer to use JSON because I find it easier to traverse the data compare to XML where more coding is needed.

The detail codes is in the sample database. You can download it here.

This is just a simple example. Using in view editing will definitely reduce some steps need to update data in documents. But there are things that need to be taken into consideration.

First is in view editing by multiple users. What will happen when one editor update the data, But another editor is at the same page which is still show the old data? What will happen is the second editor to edit the same document. I am working on implementing some checking for this. I will try to publish that when it's done. Drop me a line if you have any suggestions on this also.

In this example, it only uses text box. I will improve it by adding selection, date, name lookup, etc.

Definitely you will have to include some form of validation before posting the update. You won't want user to accidentally clear the field and save the update.

Anyway, download the sample and test it out. Drop me a line if you have any suggestion on improving it.

Tuesday, June 06, 2006

Form Validator

Jake Howlett at CodeStore have revamp his form validation. It uses prototype.js and effects.js. Check out the article.

Friday, June 02, 2006

Serving JavaScript Fast

Here's an interesting article by Cal Henderson on Serving JavaScript Fast

Quote from the article

The next generation of web apps make heavy use of JavaScript and CSS. We’ll show you how to make those apps responsive and quick.

Thursday, June 01, 2006

@Formula using Ajax

There have been quite a lot of articles written on how to call @Formula using Ajax. Below are two sample from searchdomino.
1. DBColumn and DBLookup for all browsers using AJAX
2. Using AJAX as a replacement for @DBLookups

I'm developing an application which needs uses quite a lot of formula (especially @DBLookup & @UserRoles of different selected person) at the client side. To port it to web, I need to use those too.

Instead of creating new agents for each @Formula, I created a formula setup Form where I can enter different formula. Each document will have a unique title (single word). I use tags (<keyn>) that will be replace by parameter pass in through url.

Using a view, I use a different form to open the document. This is set in the "Form Formula". The new form will compute the formula and return the result. In the view, set the title as the first column and sort it either ascending or descending. This way you can get the document using the title instead of document unique id

Below is a sample where different product group is selected, the products will be retrieved (DBLookup) and populated into the Product selection list. Check out previous post on dynamic selection list.

I use AJAX to call the formula document

The param is optional. That will return the result in text format. You can then process it as needed. If you need more formula just create a new setup formula document and you are ready to use it. You can download the sample db here.

Wednesday, May 31, 2006

2nd LAUG Malaysia Meeting

Lotus Asia User Group (LAUG) Malaysia will be having the 2nd meeting.

I've attended the first meeting and the sessions were good. Below are the 1st meeting topics.
1) Development : Web Enablement Tips, Tricks & online resources (by Stephan Wissel)
2) Admin : Spam and Messaing (by Dave Harris)

Great job guys to bringing together Lotus community in Malaysia. Definitely looking forward for the 2nd meeting. I would definitely encourage Lotus Notes Developer, Admin and of course LN users (this meeting topic is on Power Users). Even if you are on other platform, come over and see what LN can do. For those in Malaysia or will be in Malaysia do join the group.

Monday, May 29, 2006

Creating dynamic SVG graph using agent

A friend asked about generating dynamic graph for a domino web application. I've been using Scalable Vector Graphic (SVG) to generate graph for some of my application so I recommended him that.

SVG is a language for describing two-dimensional graphics and graphical applications in XML. SVG can be use to create dynamic graph for your website. Dynamic SVG can be generated using Lotus Notes agent.

Create a lotus notes agent (name "svgagent").

Sub Initialize
Print |Content-type:image/svg+xml|
Print |<?xml version="1.0"?>|
Print |<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "">|
Print |<svg width="200" height="200" xmlns="" xmlns:xlink="">|
Print |<desc>polyline</desc>|
Print |<g>|
Print |<polyline id="lens" points="10,180 40,120 70,140 100,90 130,40 160,100" fill="none" stroke="purple" stroke-width="2"/>|
'processing and draw the graph
Print |</g>|
Print |</svg>|
End Sub

Then in your webpage you can embed the code below.
For Mozilla, Firefox, Netscape
<object type="image/svg+xml" data="svgagent?OpenAgent" width="200" height="200"></object>
For IE
<embed src="svgagent?OpenAgent" width="200" height="200" pluginspage=""><embed>

You need to install SVG viewer to view the SVG files. You can download one from Adobe SVG viewer. Below is a sample graph.

Thursday, May 25, 2006

Lotus Notes Multiple Level Categorized View using Rico Accordian

Follow up with the first write-up, attached is a prototype sample of accordian with 2 level category.

I've use ?ReadViewEntries to get the view data and process it into the format needed by Rico Accordian. This sample is just to test if Rico Accordian can support multiple level. Yes, multiple level does work but there are drawbacks. From this html example page, you can see that the second level have 3 categories. It show all three but if add more category, they will be hidden and user have to scroll down to view it. You have to dynamically resize each category size which is tedious to do. If we add another level in, things get worst. I would recommend to stick to a single level category when using Rico Accordian. The multi level categories sample download is here.

Monday, May 22, 2006

Javascript "Associate Arrays" Considered Harmful

This is some consideration you have to take into when using javascript Array type. The sample Array below produce alert boxes: “one”; “two”; “three.”.

var associative_array = new Array();
associative_array["one"] = "Lorem";
associative_array["two"] = "Ipsum";
associative_array["three"] = "dolor";
for (i in associative_array) { alert(i) };

Andrew Dupont has an insightful post warning against the use of the javascript Array type for associated arrays. Instead, use a simple Object would be better. He says,

In JavaScript, one really ought to use Object for a set of key/value pairs. But because Array works as demonstrated above, JavaScript arrays (which are meant to be numeric) are often used to hold key/value pairs. This is bad practice. Object should be used instead.

Friday, May 19, 2006

Lotus Notes Categorized View using Rico Accordian

I've just came back from a great short trip in Cambodia. Angkor Wat is just fantastic. Check out some photos here. Definitely a highly recommended place to go.

OK, back to work. I need to create quite a few categorized views. Using Lotus Notes default categorized view, the familiar expand and collapse icons will be created. Instead of using the conventional way, I search for some fresh way to display the view. I found OpenRico have a nice Accordian function. I have created a categorized view into a collapsable "table" using Rico accordion function. Here is a html example page.

Create a html view. Create a view template and include prototype.js and rico.js into the html header.
The view header and content of the view will include the required <div> tags. Attached is a sample database. The view should generate the html as per below:

<div id="accordionDiv">
<div id="overviewPanel">
<div id="overviewHeader">
<b><span class="col1">Reference</span>
<span class="col2">Date</span>
<span class="col3">Customer</span></b>
<div id="overviewPanel1.1">
<div class="accordionTabTitleBar">4/2006</div>
<div class="accordionTabContentBox">
<span class="col1">190520060006ECD8</span>
<span class="col2">04/10/2006</span>
<span class="col3">Cust EA27</span><br/>
<span class="col1">19052006000E1AB8</span>
<span class="col2">04/10/2006</span>
<span class="col3">Cust e15e7</span>
<div id="overviewPanel1.2">
<div class="accordionTabTitleBar">5/2006</div>
<div class="accordionTabContentBox">
<span class="col1">19052006000E9256</span>
<span class="col2">05/19/2006</span>
<span class="col3">May E8CB0</span><br/>
<span class="col1">19052006000EA769</span>
<span class="col2">05/19/2006</span>
<span class="col3">asdf</span><br/>

Download this sample database to try it out.

Monday, May 15, 2006

Quick Tip: CSS using page

Instead of importing a css file as a Style Sheet resource, I sometime use page to create a css file. This enable me to modifying the css on the fly. When using page to create css file, it is a good practise to set the "Web Access" to "Other"- text/css. By setting that, you just have to put the CSS into the page without any pass through
body, td, input{font-family:Arial;font-size:12px;}

In the form, you can link the css file in the "HTML Head Content"
"<link rel='stylesheet' type='text/css' href='/" + @WebDbName + "/style.css'>"

Thursday, May 11, 2006

Enhance Your Lotus Intranet with Open Source Solutions

There is an interesting article at Intranet Journal about enhancing Lotus Intranet with Open Source Solutions by John Roling. The article discuss 3 open source application from to beef up intranet functionality. Read about it here.

Wednesday, May 03, 2006

Dynamic Selection List

I need to build two select options (dialog list). The list in the second dialog list will change according to the first dialog list selection.

Using Lotus Notes, it can be done by using "Refresh fields on keyword change" in the first field Control tab. The second field will be computed (Formula) according to the first field. Checked on "Refresh choices on document refresh". This works fine but it will refresh the whole page.

To prevent any refresh, you can use javascript to change the selection.

For an example, if I select "One" from the first select box (SelectOne), the second select box (SelectTwo) list will be "1" and "ii".
If selectOne = "Two" then SelectTwo = "2" and "ii".
If selectOne = "Three" then SelectTwo = "3" and "iii".

Create two Dialog List field name SelectOne and SelectTwo.

In the SelectOne field, enter choices (One, Two, Three)

In the SelectTwo field, enter choices (1, i). This is because be default SelectOne is "One" thus SelectTwo should be ("1", "i")

In SelectTwo onChange add the javascript

Insert the sample JS Array in the JS Header
var dataEl = new Array( ["One", ["1","i"]], ["Two", ["2","ii"]], ["Three", ["3","iii"]] );

Add a simple function to change the SelectTwo list in the JS Header

function changeSelection(element){
for(var i=0; i<dataEl.length; i++){
if(dataEl[i][0] == element[element.selectedIndex].text){
//clear list
var tmpLength = document.forms[0].SelectorTwo.options.length
for(var j=0; j<tmpLength; j++)
document.forms[0].SelectorTwo.options[0] = null;

//build list
for(var j=0; j<(dataEl[i][1].length); j++){
var no = new Option();
no.value = dataEl[i][1][j]; //set the option value
no.text = dataEl[i][1][j]; //set the option text
document.forms[0].SelectorTwo.options[document.forms[0].SelectorTwo.options.length] = no;

This example used a simple fixed JS Array. A computed field can also be used to generate the Array. For a dynamic list, you can use a view and embedded it into a page and saved as a .js file. If the list is ever changing, you could use AJAX to lookup to for the selection list and then only update it into the field.

Updates (1st June 2006):
I have created a new post where you the dynamic selection can be updated using Ajax and @DbLookup formula. Check out the write up here.

Thursday, April 27, 2006

AJAX Names Lookup on Lotus Notes

I've written a sample AJAX name lookup selection from names.nsf. It uses prototype.js for the AJAX request. Instead of using pop-up dialog, the example uses subModal. You can download the example here.

Wednesday, April 26, 2006

Monday, April 24, 2006

Using AJAX to generate view dynamically.

Lotus Notes view can be formatted using "$$ViewTemplate" form on the web. It can be display as normal HTML or Java Applet. Java Applet can be quite slow if users does not have good connection to the server or through Internet access. Using conventional way, every view action (collapse, expand, next, previous, etc) will refresh/reload the web view page.

Page reload can be reduced by using AJAX to retrieve view data. "ReadViewEntries" can be used to access view data in XML form. Refer to Lotus Designer Help for detail on "ReadViewEntries".

Example url to retrieve XML view data:

Example XML data
<?xml version="1.0" encoding="UTF-8" ?>
<viewentries toplevelentries="2">
<viewentry position="1" unid="EF312582F4ACDD4448256EF9000BAC7D" noteid="926" siblings="4">
<entrydata columnnumber="0" name="Acronym">
<entrydata columnnumber="1" name="Description">
<text>Health Safety and Environment</text>
<viewentry position="2" unid="71697069D0B0198148256F0A0014FD8A" noteid="942" siblings="4">
<entrydata columnnumber="0" name="$Acronym">
<entrydata columnnumber="1" name="Description">
<text>Consumer Goods</text>

From the XML document, you can traverse the structure and build your view. You can get the "viewentry" and then the "entrydata" from the XML. I will go in more detail example of building simple table from the XML in later write up.

To build a view, create a HTML Form. Insert a <div> area where the view is going to be display. Create the necessary buttons for the view actions (Collapse, Expand, etc).

<div id="viewtable"></div>

On form load, make a xmlhttp call to retrieve the xml data (eg. using prototype.js - refer to this)
In the form, onLoad:

In the JS Header

function getView(url){
var myAjax = new Ajax.Request(
method: "get",
onComplete: displayView

function displayView(xmlDoc){
var viewtable = xmlDoc.responseText;
//do your processing to build the view table
var viewentry = xmlDoc.responseXML.documentElement.getElementsByTagName("viewentry");

//display the XML in the "viewtable" div (replace this with your custom design view HTML.
$("viewtable").innerHTML = viewtable;

Then for every view action, you can call the getView() function with the appropriate url parameters.
For example to collapse the view, create a collapse button. OnClick

So using this way, you can dynamically get the view data and build the view onto the page without refreshing the page.

Monday, April 17, 2006

Using AJAX to run LN agent from web

Sometimes we need to run an agent to process certain field in our web form. For example, when user select a name, you want to retrieve their company information. In Lotus Notes, we can use on "Refresh fields on keyword change". This works but it will do a document refresh. If you are working on a large form, it may take sometime to reload the form.
We can avoid the page reload by using an AJAX call to the agent. Prototype.js made calling an AJAX function easier.

var myAjax = new Ajax.Request(
{method: "get",
onComplete: processValue

function processValue(xmldoc){

This would call the Agent "getDetail" in db.nsf using "GET" method. You can pass parameters from the current website. When the AJAX call completes, it will call the function processValue(). You can process the return values (in XML or other format).

On the "getDetail" agent, you can retrieve the parameter and do your processing.

Sub Initialize
Dim session As New NotesSession
Dim doc As NotesDocument
Dim param as String

Set doc = session.DocumentContext
'get the parameters
param = doc.Request_Content(0)

Print |Content-type:text/xml|
Print |<?xml version="1.0" encoding="UTF-8"?><data>|
'Do your processing and return the value..
'eg print |<company>company name</company>|
Print |</data>|

End Sub

Your agent can return just plaing text. Or from the example above, it returns a xml document. DOM can be used to retrieve the data in the XML document. You can specify in the agent what type of content-type to return, in this case, "text/xml".w
Print |Content-type:text/xml|

There's a lot of article comparing the use JSON (JavaScript Object Notation) vs. XML. I will go into more detail use of JSON instead of XML.

Friday, April 14, 2006

$F() function

$F() returns the value of any field input control (e.g. text boxes or drop-down lists). The function $F() can take as argument either the element id or the element object itself.

In Lotus Notes, when you create a field, it will only generate the fieldname.
eg <input type="text" name="Name" value="my name"/>

When using $F("Name") to retrieve the value, it works on IE but not on Mozilla. To get it working cross browser an id need to be inserted.

At the Field Property 'HTML' tab, key in the Name of the field into the 'ID'. This would create
<input type="text" name="Name" id="Name" value="my name"/>

Prototype in Lotus Notes

Prototype have been getting a lot of headlines for web 2.0 application. I've started to used it and got hook on it. Before you start, you can take a look at this Developer Notes for prototype.js.

To use it in Lotus Notes (LN), import the prototype.js into the File Resource. Then in your Form or Page 'HTML Head Content' add the line below.

"<script src='/"+@WebDbName+"/prototype.js'></script>"

Now you are ready to use the function in Prototype.

Welcome to Lotus Notes on Web 2.0

I've been working on a Lotus Notes web application. Prototype and I will share some of my experience here in this blog so watch out for future posting.