|
|
|
|
|
|
|
|
|
|
|
|
|
|
Give your Domino views life with DHTML (continued)
Once the column formula was added, I enabled the "Treat view contents as HTML" property and saved the view.
In a live system you would probably want to add your own formatting and you may wish to trap and replace any reserved characters with the equivalent HTML character entities to ensure that formatting is not lost.
Create a form to show the view through
Next I created a $$ViewTemplateDefault form. This is the default form for all Web views that aren't associated with another form.
I added a start table tag "<table>", followed on the next line by an editable text field called "$$ViewBody" (this is the reserved field name used by Domino to render the view contents -- i.e., all of the table rows will appear here) and on the next line I added an end table tag "</table>".
I then set the Pass-Thru HTML property of the table tags on the form.
Add the "Expand All, Collapse All" code
The final task involved adding the JavaScript code that would allow us to expand and collapse our document details.
The following JavaScript code was added to the JS Header section of the $$ViewTemplateDefault form.
function processForm() {
var spanElements = document.getElementsByTagName("span");
descriptions = getElementsByClass(spanElements, "description");
}
function getElementsByClass(startObject, className){
var returnarray = new Array();
var inc = 0;
for (i = 0; i < startObject.length; i++){
if (startObject[i].className == className)
returnarray[inc++] = startObject[i];
}
return returnarray;
}
function toggle(toggleType){
var state = (toggleType == "on")? "block" : "none";
var i = 0;
while (descriptions[i]){
descriptions[i].style.display = state;
i++;
}
if (toggleType == "on") {
document.getElementById("show").style.display = "none";
document.getElementById("hide").style.display = "block";
}
else {
document.getElementById("show").style.display = "block";
document.getElementById("hide").style.display = "none";
}
}
|
The following line was also added to the onLoad event:
When our Web page loads we want to be able to manipulate the display properties of the "span" elements on the page. To do this we need to build a reference to each span block assigned to the "description" class.
We start by using the getElementsByTagName method of the "document" object to get all span elements and then we extract the "description" class elements from the result using the getElementsByClass function. This approach ensures that we are working only with the elements that we are interested in and not other "span" blocks that may appear elsewhere on the page.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-- Advertisement --
Sophisticated Meets Simple For Document Management
Share. Control. Manage.
Documents, emails, and content in the context of how work is done.
Native to Lotus Domino. The User Experience unseen for Lotus Domino.
Do more with less. Really.
See the possibilities Docova unleashes for Lotus Domino. |
-- Advertisement --
Teamstudio Edition 25 has shipped
It's finally here! Now that Teamstudio Edition 25 has shipped, listen to our latest Tool Time audio program to find out what's changed. Updates to all your favorite Teamstudio tools will be discussed.
Plus, you'll get an introduction to Teamstudio Undo (formerly known as Teamstudio Snapper).
Tap here to get started! |
|
|
|
|
|
|
|
|
|
|
