Embed multiple standalone forms on a domino form using DHTML

By standalone I mean that when you submit a form, you don't submit all the others/the main form.

I decided to make this when I read a question in Jake's latest article, How to Embed a Login Form on All Lotus Domino Pages.

The question is not directly connected to this blogpost, but somewhat.

The question:
Hi Jake,

We are getting two HTML form tag in view source of page in browser, one form tag for main form and other which is login form.

My question is, How will I handle when we are submiiting the Login form ? Will it submit the main form as well ?

Could you please help me

Regards
Ajay B Mali


The demoapp loads another form using an iframe. Using DHTML I pick the form out of the iframe and inject it at the top or bottom of the form that is open. The reason for either top or bottom is that forms can't be nested (read Jake's excellent article for more info). If you want it in a specific position on the page, CSS may help you.

The reason for iframe and not XHR (Ajax), is that XHR returns text. With the iframe, I can more or less pick what I want out of the "iframed" document, the way I would on the "main" document.

>> The demoapp (Names-form)

Tested in Opera 9, IE7 (Vista) and Firefox 2

BlindDown-effect in the Notes Client using JavaScript

If you find this interesting, take a look at my "NotesFX", which has more effects.

I don't know if this could be considered a hack. It's probably not useful (at least not in this state), but still fun.

The BlindDown-effect is found in DHTML-libraries like Scriptaculous and Mootools. Scriptaculous demo-page



>>Download demo-application

To achieve this effect, I have a layer with a table inside. In the table, I have three computed fields. One of them contains the title of the "help message", one contains the message, and one is used to add line-breaks into (-> what looks like animation). The "line-break" field has a font-size of 3, so that the animation looks somewhat smoothly, but is not too slow.

I have a javascript-function that takes the delay between each line-break, number of line-breaks (iterations), message title, and title. The iteration-parameter is put into a global variable that decrements for each added line-break.

I use setTimeout to call the same function until iterations=0.

The messages is put into a javascript-object with arrays corresponding the parameters that should be passed to the "blind down" function. This to make it easier to maintain the messages.

I use Notes' (or rather JavaScript 1.3's) apply-method to apply the array to the blind-down function.

Each field's onFocus code:
blindDownMessage.apply( "", messages[this.name])

Example of the messages-object:
var messages = {
name: [ 10, 10, "Your name", "Here you fill inn your name.\n\nE.g. Donald Duck, Dillbert, etc." ]
}

If you're downloading the demo:
The demo-form is named "BlindDown". Open it in the Client to test the demo.

You could also put more advanced things in the layer.

Hide the cell-content initially. After the "animation" is finished, set the value to make the cell visible, click a refresh-button (hide it with a layer/etc), using javascript. E.g. document.forms.nameOfButton.click()

I haven't tested the above suggestion, so I don't know if it's possible to do in a usable way.

Sexifying the client with DHTML

I don't know why, but I've been really motivated program/test out different ideas this weekend. This is another product of my brainstorming.


Full size

I tried putting this video up on Google Video, but it got so compressed that it was impossible to see what was going on. This means that the front page currently is about 3-5MB heavy.. Sorry..

As I've stated a couple of times before, I'm not an expert programmer, and I'm quite lazy. Because of that, my demos are never production ready (stability, speed, etc). This demo is FAR from production ready. It is a proof of concept.

What I do in the demo is passing javascript commands ( e.g. javascript:doStuff() ) to a web-document inside a "Microsoft Web Browser" control. The commands are coded per field, "entering".

I use mootools' Fx.Scroll class to get the smooth scrolling.

Current issues with the OLE object:

• I get OLE Automation Error when I try to resize the control (works with the debugger on)
  


• Passing browser.navigate( url ), where browser is the browser object variable, is slow when not running on localhost (I only tried on one external server)

Maybe there is a faster way/more efficient object (mozilla, webkit, etc) to use.

To run the demo yourself (only tested in Windows XP):

1. Download the Demo-db zip file


2. Extract the db onto your hard-drive, and copy it to where you want to run it from


3. Alter the postopen (in the member form) url to fit with the location you put the db. Make sure the HTTP-task is running


4. Open the member form in the Client

Let me know if it doesn't work..