Tip

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:


&LTscript><!--

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( ) ;

//--></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 =========
&LTHTML>
<!-- Lotus-Domino (Release 5.0a (Intl) - 4 May 1999 on Windows NT/Intel) -->
&LTHEAD>

&LTSCRIPT 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>
&LTBODY TEXT="000000" BGCOLOR="FFFFFF" vlink="000000" link="000000"
alink="000000">

&LTFORM METHOD=post ACTION="/tip.nsf/plotplanning?OpenForm&Seq=1"
NAME="_PlotPlanning">
&LTINPUT TYPE=hidden NAME="__Click" VALUE="0">
&LTTABLE WIDTH="100%" BORDER=0 CELLSPACING=0 CELLPADDING=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
&LTINPUT TYPE=radio NAME="Type" VALUE="Kwartaal" CHECKED
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>
</TABLE>
&LTBR>

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

This was first published in November 2000

There are Comments. Add yours.

 
TIP: Want to include a code block in your comment? Use <pre> or <code> tags around the desired text. Ex: <code>insert code</code>

REGISTER or login:

Forgot Password?
By submitting you agree to receive email from TechTarget and its partners. If you reside outside of the United States, you consent to having your personal data transferred to and processed in the United States. Privacy
Sort by: OldestNewest

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:

Disclaimer: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.