All about Lotus Domino Development (AaLDD)

My (new) boss has great faith in me so he has made me responsible (yippie) for one of our key LN applications for communicating withing the organisation (an application for publishing documents on our intranet).

Since I am new & fresh & (still) eager in the organisation I am looking for an application that can support me in this task. Mainly the application should be able to store communication (emails), documentation (with or without attachments) and maybe a FAQ section.

No fancy stuff, please just an application for the Notes client.

My search on OpenNTF did not give me an answer in my quest. Therefor my question to you:

“which tool do you use for giving support on LN applications?”

In a previous writing I explained how you can create a navigation-menu that collects it’s information straight from a Notes View.

Using the ?ReadViewEntries URL command Notes outputs the view data in XML form which can be the source of a transformation to HTML using the XSLTProcessor in your browser.

When the project became actual again I found some time to improve it’s functionality, since it was not working 100% in Firefox. So here is an example available for downloading.

Here is short summary of the example’s features:

• the navigator collects it’s source data from a Notes view using the ReadViewEntries command
• when navigating through the menu for each subcategory (via the + and - icons) a new AJAX request is done to collect the information withing that (sub)category (so the amount of data is being divided into smaller parts)
• the information is being transformed into HTML via the build XSLTransformator of the browser
• when clicking on (sub)category a collection of responding documents is collected and presented in another frame
• the navigator also contains document links which will load the document info in the right frame when clicked
• documents can be grouped under whatever structure in the View

Very nice, I did not manage to solve 1 thing yet: if a (sub)category contains subcategories AND documents, the documents are being displayed FIRST. I rather would display the subcategories first and then the documents. Maybe you can help me with that one?

Documentation is something we would (like to) do if there would be time calculated for it in every project. But in a lot of development projects the customer is not interested to pay for something he/she is not going to read at all so where to ’store’ the application logic?

To my opinion it can help to use the IBM like approach in delivering brief documention in their templates, just like Rocky Oliver talked in his session ‘Creating Maintainable IBM Lotus Notes and Domino Applications - Writing Readable Code’ at Lotusphere 2007.

How do you deliver your documentation?

A sample of above can be found here.

While waiting on the next plane I write this little posting about a simple technique used in the very nice !!Help!! application available on OpenNTF which give a basic support for different languages support across an application.

Actually I was looking at a more advanced solution using Yahoos Translator utily, but time made me decide to the most easy/quickest approach making the most benefit of Domino functions itself.

While my main focus is development for the web the technique can still be easily used across forms. Here is how it works:

• In Notes documents you define the values for each language you want to suppport, mostly these values are grouped by the design element you use them in or the specific type of element they present (field labels, action buttons… things like that)

• On the design element itself you make a connection to the preferred language selected by the user, in my example it is a normal document that is being treated like a ‘profile document’:

• Add lookup fields for each ‘language’ document you have created:

• On the place in the design element where you want to show/use the related value you strip the results and return the result:

That’s it! But… wait. This does not work for buttons on a form because Domino allows not a computed value/label for it.

JSON to the rescue!

The most easiest way to get the values in an array I thought was transforming them in a JSON format wia basic @Functions:

With this array I easily approach all my <input> type buttons via Prototype and replace their values with the value defined in the array:

A downloadable working example can be found here. I wonder which language support systems you are using?

This post describes briefly an implementation of Scriptaculous’ Ajax.Autocompleter class.

It uses an AJAX request using a Page element for an @DBLookup I believe first mentioned at Lotusphere 2007 by Jack Rattcliff and later (?) by Jake Howlett in his http://www.codestore.net/store.nsf/unid/BLOG-20060221 and perfectionized (?) by my collegue Tomas.

Scriptaculous autocompleter needs an unordered list in return. For instance this list might be returned after the user typed the letter “y”:

<ul>
    <li>your mom</li>
    <li>yodel</li>
</ul>

Some examples use an agent to return the unordered list, others describe using a page.

The demo allows you to fill in multiple fields after clicking on one of the presented suggestions by splitting the responseText:

In demo-mode it would look something like this:

For downloading a working example click here.

I received a couple of mails saying that the link to Bob Obringers article on his ‘ultimate view navigator’ is dead and if I could send a copy of the example.

I have uploaded a working example > here < including an example for a flat view and an example for a categorized view. In the flat view I have included Prototype’s AJAX request handler, the categorized view still uses Bob’s approach. Good luck!

Updated: the application had local encryption enabled…

Here is an updated version of the JS header, now fully making benefit of prototype’s Event.observe event listener. Note: the code is not updated in the download link you can find here.

// SHOWING A WARNING WEN USERS LEAVE THE FORM WITHOUT SAVING
function formChange(){ 
 $(’isChanged’).value=”1″;
}

window.onbeforeunload = confirmExit;

function confirmExit() { 
 if($F(’isChanged’)==’1′){
  return “You have not saved the form yet. Are you sure ?”;
 }
}

Event.observe(window, ‘load’, init, false);

function init(){
 var inputs = $$(’input.required’);
  for (var i = 0; i < inputs.length; i++) {
     Event.observe(inputs[i], ‘focus’, oninputfocus);
     Event.observe(inputs[i], ‘blur’, oninputblur);
  }
  var textareas = $$(’textarea’);
  for (var i = 0; i < textareas.length; i++) {
     Event.observe(textareas[i], ‘focus’, oninputfocus);
     Event.observe(textareas[i], ‘blur’, oninputblur);
  }
}

var tempinputvalue =”";

function oninputblur(e) {
 if (typeof e == ‘undefined’) {
  var e = window.event;
 }
 var source;
 if (typeof e.target != ‘undefined’) {
  source = e.target;
 } else if (typeof e.srcElement != ‘undefined’) {
  source = e.srcElement;
 } else {
  return true;
  }
 if ($F(source) != tempinputvalue) {
  $(’isChanged’).value=”1″
 } 
}

function oninputfocus(e){
 if (typeof e == ‘undefined’) {
  var e = window.event;
 }
 var source;
 if (typeof e.target != ‘undefined’) {
  source = e.target;
 } else if (typeof e.srcElement != ‘undefined’) {
  source = e.srcElement;
 } else {
  return true;
 }
 tempinputvalue = $F(source)
}
// END - SHOWING A WARNING WEN USERS LEAVE THE FORM WITHOUT SAVING

I noticed that WordPress uses a similar technique when writing posts.

This posting is merely a big ‘thank you’ to Philippe Gauvin’s posting ’Warning before navigate away from a web form without save’ and Simon Willison’s posting ‘Simple Tricks for More Usable Forms’.

Philippe describes how you can add a function that warns users when they intend to leave the window without actually saving the document. Simon describes the way how to add event listeners to forms, which is a great add-on Philippe’s article because Philippe ‘forgets’ to write how he implemented the code to work.

So what is the idea?

• a users has a form opened
• when he clicks on a link that leads him to another page a warning comes up if he really wants to leave the page without saving or if he wants to stay on the form so the document can be saved
• the condition I added is: if there are changes made to required fields then I think the user has actually worked on interesting information, so in these cases the warning should pop-up.

In my example each required field has a classname ‘required’ (a bit based upon Andrew Tetlaw’s really kewl javascript form validation method). When there is a difference between entering the field and leaving the field a third field will change from value “0″ to “1″ which should initiate the warning.

Adding Eventlistening

I did not want to add into every single field a function that would check if there have been made changes, so on the windows load event we add an eventlistening. As soon as the user enters and leaves one of the ‘required’ fields we run an onfocus or an onblur function.

How to implement?

Just follow Philippe’s instructions. Basically I added a Notes field, gave it an id ‘IsChanged’, default value is set to “0″ and I made it hidden. Then I copied in the JSHeader of my form the first part of the code:

// SHOWING A WARNING WEN USERS LEAVE THE FORM WITHOUT SAVING
function formChange(){ 
 $(’isChanged’).value=”1″;
}

window.onbeforeunload = confirmExit;

function confirmExit() { 
 if($F(’isChanged’)==’1′)     return “You have not saved the form yet. Are you sure ?”;
}

(by the way, yes we use the Prototype library)

Second, based upon Simon’s article I added the next lines of code in the JS Header:

addEvent(window, ‘load’, function() {
  var input,textareas;
  var inputs = $$(’input.required’);
  for (var i = 0; i < inputs.length; i++) {
     addEvent(inputs[i], ‘focus’, oninputfocus);
     addEvent(inputs[i], ‘blur’, oninputblur);
  }
  var textareas = $$(’textarea’);
  for (var i = 0; i < textareas.length; i++) {
     addEvent(textareas[i], ‘focus’, oninputfocus);
     addEvent(textareas[i], ‘blur’, oninputblur);
  }
});

function addEvent(obj, evType, fn){
 if (obj.addEventListener){
     obj.addEventListener(evType, fn, false);
     return true;
  } else if (obj.attachEvent){
     var r = obj.attachEvent(”on”+evType, fn);
     return r;
  } else {
     return false;
  }
}

var tempinputvalue =”";

function oninputblur(e) {
 if (typeof e == ‘undefined’) {
  var e = window.event;
 }
 var source;
 if (typeof e.target != ‘undefined’) {
  source = e.target;
 } else if (typeof e.srcElement != ‘undefined’) {
  source = e.srcElement;
 } else {
  return true;
  }
 if ($F(source) != tempinputvalue) {
  $(’isChanged’).value=”1″
 } 
}

function oninputfocus(e){
 if (typeof e == ‘undefined’) {
  var e = window.event;
 }
 var source;
 if (typeof e.target != ‘undefined’) {
  source = e.target;
 } else if (typeof e.srcElement != ‘undefined’) {
  source = e.srcElement;
 } else {
  return true;
 }
 tempinputvalue = $F(source)
}
// END - SHOWING A WARNING WEN USERS LEAVE THE FORM WITHOUT SAVING 

 This initates the event listening for the onblur and onfocus events of the fields with classname ‘required’. That’s it. I do not know how I can adjust the default warning popup, but I guess sure one of you know: