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:
<script><!--
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
<embedded view, resulting in a sequence of calls of the plot function>
// finalization stuf
}
//plot all lines
plotall( ) ;
//--></script>
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 =========
<HTML>
<!-- Lotus-Domino (Release 5.0a (Intl) - 4 May 1999 on Windows NT/Intel) -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
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;
form.submit();
return false;
}
// -->
</SCRIPT>
</HEAD>
<BODY TEXT="000000" BGCOLOR="FFFFFF" vlink="000000" link="000000"
alink="000000">
<FORM METHOD=post ACTION="/tip.nsf/plotplanning?OpenForm&Seq=1"
NAME="_PlotPlanning">
<INPUT TYPE=hidden NAME="__Click" VALUE="0">
<TABLE WIDTH="100%" BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR VALIGN=top><TD WIDTH="65%"> <A
NAME="_RefreshKW_Type"></A>
<INPUT TYPE=radio NAME="Type" VALUE="Week" onClick="_doClick('$Refresh', this,
'_self', '#_RefreshKW_Type')">Week
<INPUT TYPE=radio NAME="Type" VALUE="4 weken" onClick="_doClick('$Refresh',
this, '_self', '#_RefreshKW_Type')">4 weken
<INPUT TYPE=radio NAME="Type" VALUE="Kwartaal" CHECKED
onClick="_doClick('$Refresh', this, '_self', '#_RefreshKW_Type')">Kwartaal
<INPUT TYPE=radio NAME="Type" VALUE="Half jaar" onClick="_doClick('$Refresh',
this, '_self', '#_RefreshKW_Type')">Half jaar
<INPUT TYPE=radio NAME="Type" VALUE="Jaar" onClick="_doClick('$Refresh', this,
'_self', '#_RefreshKW_Type')">Jaar </TD><TD WIDTH="35%">
<INPUT TYPE=button VALUE="<<" onClick="return
_doClick('0a7d408955f5abfec12567b3007883a2/$Body/0.532', this, null)">
<INPUT TYPE=button VALUE="<" onClick="return
_doClick('0a7d408955f5abfec12567b3007883a2/$Body/0.63A', this, null)">
<INPUT NAME="StartDate" VALUE="12-10-1999" size=10>
<INPUT TYPE=button VALUE=">" onClick="return
_doClick('0a7d408955f5abfec12567b3007883a2/$Body/0.7F6', this, null)">
<INPUT TYPE=button VALUE=">>" onClick="return
_doClick('0a7d408955f5abfec12567b3007883a2/$Body/0.8E0', this,
null)"></TD></TR>
</TABLE>
<BR>
<INPUT NAME="Periodes" VALUE="4" type=hidden>
<INPUT NAME="Duration" VALUE="30" type=hidden>
<hr color=009900 width=96%>
<BR>
<script languag
This was first published in November 2000