Dynamic Grafical Presentations Of Notes Views

Yes, the combination of Domino and javascript is great!! Imagine having a
database with planning information, what would be better then having a view
which dynamically shows the planning for a given period in a grafical way? This
can be done with domino using javascript. A great tip of which I am quite proud
and probably worth at least three t-shirts ;-)

I described the principle in the attached code section and also included the
html output page of a working example (in an intranet). That is all for free.
When the tip will be published, I can put the working example on the web. The
source of that example will be available for just USD 100.
The trick is to define a view whith columns generating javascript. In my
example I use the following formula for the column:

root := @Date( 1998 ; 1 ; 1 ) ;
day := @Date( 1998 ; 1 ; 2 ) - root ;
from := ( DateFrom - root ) / day ;
period := ( DateUntil - DateFrom ) / day ;
ref := "0/" + @Text( @DocumentUniqueID ) + "?OpenDocument" ;
"plot( " + @Text( from ) + ", " + @Text( period)
+ @If( Status = "Option" ; ", \'ff2222\', \'" ; ", \'44ff44\',
\'" )
+ ref + "\', \'" + Activity + "\' ) ; "
+ @NewLine

The result is a line of javascript calling the function "plot" with parameters
about the activity.

The view is embedded in a form which defines the function plot plus some
surrounding javascript to capture the view output. Something like:


function plot(start,duration,color,ref,name) {

// javascript code which draws a bar on the screen at the given position with
the given color


function plotall() {

// initialization stuff

&LTembedded view, resulting in a sequence of calls of the plot function>

// finalization stuf


//plot all lines
plotall( ) ;


The next part is the html example of an output from a more sofisticated example
which also has input fields with which the user can select a scale and a period
and browse through the time dimension. It works with IE 5.0 browser and has not
been tested with netscape.

====== start of page =========
<!-- Lotus-Domino (Release 5.0a (Intl) - 4 May 1999 on Windows NT/Intel) -->

document._domino_target = "_self";
function _doClick(v, o, t, h) {
var form = document._PlotPlanning;
if (form.onsubmit) {
var retVal = form.onsubmit();
if (typeof retVal == "boolean" && retVal == false)
return false;
var target = document._domino_target;
if (o.href != null) {
if (o.target != null)
target = o.target;
} else {
if (t != null)
target = t;
form.target = target;
form.__Click.value = v;
if (h != null)
form.action += h;
return false;
// -->
&LTBODY TEXT="000000" BGCOLOR="FFFFFF" vlink="000000" link="000000"

&LTFORM METHOD=post ACTION="/tip.nsf/plotplanning?OpenForm&Seq=1"
&LTINPUT TYPE=hidden NAME="__Click" VALUE="0">
&LTTR VALIGN=top>&LTTD WIDTH="65%"> &LTA NAME="_RefreshKW_Type"></A>
&LTINPUT TYPE=radio NAME="Type" VALUE="Week" onClick="_doClick('$Refresh', this,
'_self', '#_RefreshKW_Type')">Week
&LTINPUT TYPE=radio NAME="Type" VALUE="4 weken" onClick="_doClick('$Refresh',
this, '_self', '#_RefreshKW_Type')">4 weken
onClick="_doClick('$Refresh', this, '_self', '#_RefreshKW_Type')">Kwartaal
&LTINPUT TYPE=radio NAME="Type" VALUE="Half jaar" onClick="_doClick('$Refresh',
this, '_self', '#_RefreshKW_Type')">Half jaar
&LTINPUT TYPE=radio NAME="Type" VALUE="Jaar" onClick="_doClick('$Refresh', this,
'_self', '#_RefreshKW_Type')">Jaar </TD>&LTTD WIDTH="35%">
&LTINPUT TYPE=button VALUE="<<" onClick="return
_doClick('0a7d408955f5abfec12567b3007883a2/$Body/0.532', this, null)">
&LTINPUT TYPE=button VALUE="<" onClick="return
_doClick('0a7d408955f5abfec12567b3007883a2/$Body/0.63A', this, null)">
&LTINPUT NAME="StartDate" VALUE="12-10-1999" size=10>
&LTINPUT TYPE=button VALUE=">" onClick="return
_doClick('0a7d408955f5abfec12567b3007883a2/$Body/0.7F6', this, null)">
&LTINPUT TYPE=button VALUE=">>" onClick="return
_doClick('0a7d408955f5abfec12567b3007883a2/$Body/0.8E0', this, null)"></TD></TR>

&LTINPUT NAME="Periodes" VALUE="4" type=hidden>
&LTINPUT NAME="Duration" VALUE="30" type=hidden>
&LThr color=009900 width=96%>
&LTscript languag

This was first published in November 2000

Dig Deeper



Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:




  • iSeries tutorials

    Search400.com's tutorials provide in-depth information on the iSeries. Our iSeries tutorials address areas you need to know about...

  • V6R1 upgrade planning checklist

    When upgrading to V6R1, make sure your software will be supported, your programs will function and the correct PTFs have been ...

  • Connecting multiple iSeries systems through DDM

    Working with databases over multiple iSeries systems can be simple when remotely connecting logical partitions with distributed ...