PermaLink XPages: Techniques for using Client-Side Javascript with Server-Side Javascript07/16/2008 04:55 AM
Domino 8.5 - XPages
XPages provides techniques that you can utilize between client-side and server-side Javascript.  I have a couple of examples below that show how you can stop server-side events from firing from a client script and also how you can retrieve values for use in client-side script using inline server-side script in your client js.

Events
Each event for a component can have both client-side and server-side Javascript.  When the event is fired the client-side script is executed first.  You can prevent/allow the server-side script from being executed by returning true or false from your client-side script.

For example, on a "Save" button you want to prompt the user and ask them if they are sure they want to save the document.  You can provide a client-side confirm popup on the onclick event.  If the user presses "OK" you would return "true" and the server-side script would then proceed to be executed.  If the user clicks "Cancel" you would return "false" and the server-side script would be prevented from being executed.

Here's a screen shot of the onclick event showing that there is a server-side simple action to save the document:

Image:John's Blog - XPages: Techniques for using Client-Side Javascript with Server-Side Javascript


Here's a screen shot of the same onclick event, this time I clicked on the "Client" tab:

Image:John's Blog - XPages: Techniques for using Client-Side Javascript with Server-Side Javascript


Here's the result when the button is clicked in the browser:

Image:John's Blog - XPages: Techniques for using Client-Side Javascript with Server-Side Javascript


Processing server-side script in client-side script
You can process server-side script using inline commands in your client-side code.  This is a similar technique as using computed text in Domino within a page that contains Javascript.  As with Domino, the server-side code is evaluated when the page is loaded.

For example, you want to retrieve values from a Notes document and use that value in client-side script.  On the client-side onclick event for the button, you can place the following simple EL expression:
Image:John's Blog - XPages: Techniques for using Client-Side Javascript with Server-Side Javascript


Here's the result if you click the button in your browser:

Image:John's Blog - XPages: Techniques for using Client-Side Javascript with Server-Side Javascript

or you can use server-side Javascript to perform the same task as the EL expression:

Image:John's Blog - XPages: Techniques for using Client-Side Javascript with Server-Side Javascript


or let's say you have a session variable from another page:

Image:John's Blog - XPages: Techniques for using Client-Side Javascript with Server-Side Javascript

or...here I am getting the database name using an @Function::

Image:John's Blog - XPages: Techniques for using Client-Side Javascript with Server-Side Javascript

Image:John's Blog - XPages: Techniques for using Client-Side Javascript with Server-Side Javascript

As you can see, you can pretty much execute any server-side Javascript to return the values you want.  This includes server-side js functions from script libraries if they are set as resources for the page.

Additional resources:
Last year there was an article written by Jason English and my good friend Sal Mazzotta for Lotus Component Designer titled Client-side JavaScript techniques and demos.  Though all of it does not apply to XPages, you can find techniques similar to the above as well as additional techniques that might be useful.

John

Technorati:
This page has been accessed 780 times. .
Comments :v

1. Alexey Zimarev07/16/2008 11:41:28 PM


I am sure you're the great developer, but please don't use constructions like:

if (confirm('text')) {
return true;
} else {
return false;
}

Simple
return confirm('text");
would do and in general is better programming practice




2. John Mackey07/18/2008 06:09:46 AM


Alexey,

It makes for a clearer example as to how the client side and server side events work together, which is the goal of this posting.

Thanks,
John




3. Harris Huckabee07/22/2008 09:48:37 PM


John, thanks for your examples. I was just mixing javascript and @Formula in Computed Text yesterday... nice to see more ways to do it in 8.5.

I am trying to understand how xPages with their ability to bind to multiple datasources might also be able to help me validate many "rows" of data which are being saved to separate documents. Being brand new to xPages, I will do your multiple datasources example and see if that leads to a better understanding.




Search
XPage Examples
By Category
My Links
Downloads
Monthly Archive
Powered by
Blogsphere
Lotus Domino ND7 RSS News Feed RSS Comments Feed Geo URL netcraft RSS Validator Lotus Geek Chris. A. Brandlehner OpenNTF BlogSphere
Calendar
No calendar found.
The BlogRoll