|
|
|
|
|
|
|
|
|
|
Adding response documents to your expanding and collapsing response document rows (continued)
This formula looks rather intimidating, but it's pretty straightforward. It displays a table row containing an image of a little "plus" symbol which will be clicked on by the end user to toggle expanding and collapsing. It also includes some text. The tricky part is the two @docchildren functions that ensure that this HTML code is only executed by the browser if the row has child documents.
Save and close the view.
Before you refresh the HTML page you'll need to add some response documents to your main documents in your sample database. Since this article is targeted at advanced developers, I'll assume you know how to get this done, and I won't provide instructions. Again, it doesn't matter what's actually in the response documents since we'll ignore the field contents.
Once you've got some response documents in the database, refresh the page in the Web browser. You'll see your main documents and responses, with plus symbols next to the main documents containing responses.
We've now got the HTML going. The final step is to add the JavaScript.
Next theory session
The key priority when I was working out how to implement this technique was to find a simple solution, and preferably a solution that avoided looping through each of the table rows. Looping through the table rows would result in a performance hit for tables with lots of rows, so I needed something a little smarter.
The solution that I came up with was to use JavaScript to dynamically change the style sheet itself rather than make changes to the individual table rows.
Each parent row in the HTML table contains an image with an "onclick" event, which calls our JavaScript function with a parameter of the parent UNID. The JavaScript function can then dynamically add a new rule to the stylesheet for that UNID to hide or display all HTML elements with that parent UNID. If a rule already exists in the stylesheet for that parent UNID then we invert its value, providing a toggling function. Internet Explorer immediately makes the change to the HTML page. So instead of looping through potentially hundreds or thousands of rows, we're only looping through a handful of style sheet entries. Nice.
JavaScript: the logic
Here's some p-code to put the JavaScript into easily understandable terms:
- Get the first style sheet on the page.
- Get the collection of rules for the stylesheet.
- Loop through each of the rules to see if a rule already exists for this UNID.
- If a rule exists, test its current value and change it to the opposite value.
- If a rule doesn't exist, then add it in with a value of hidden.
- Send a refresh to the table to ensure that Internet Explorer has properly updated the display.
JavaScript: the code
Enter this JavaScript at the top of your form and refresh the HTML page. Everything should now work smoothly, with rows being expanded and collapsed when you click on the image.
<script>
function ShowComments(ParentUNID) {
var newrule = "#" + ParentUNID;
var rulefound=0;
thestylesheet=document.styleSheets(0);
stylesheetrules = thestylesheet.rules;
// search the rules to see if it exists - if it does, then invert it
for (j=0;j<stylesheetrules.length;j++) {
currentrule = stylesheetrules[j].selectorText.toUpperCase();
if (currentrule == newrule) {
rulefound=1;
// existing rule found, test its value and invert it
if (stylesheetrules[j].style.display == "none") {
stylesheetrules[j].style.display = "block"; }
else {
stylesheetrules[j].style.display = "none" ; }
}
}
//if no rule exists then add a rule to hide it
if (rulefound==0) {
thestylesheet.addRule(newrule, "display:none", 0);}
// refresh the table to ensure the changes to the stylesheet are applied
mytable.refresh();
}
</script>
|
[ Prev | Next ]
|
|
|
|
|
|
-- Advertisement --
AUTOMATE LOTUS NOTES USER ID MANAGEMENT
ID Manager 4.5 from HELP Software provides a new level of automaton for managing Lotus Notes IDs. ID Manager lets Lotus Notes administrators get out of the business of creating and managing user IDs. Use our ROI calculator to see how quickly ID Manager will pay for itself.
Learn more about HELP Software products |
-- Advertisement --
SECURTRAC - MONITOR AND CONTROL YOUR DOMINO ENVIRONMENT
When it comes to your business, how do you ensure compliance with SOX, HIPAA or other industry driven regulations? Use SecurTrac to monitor and audit the life cycle of all objects in your Domino environment.
- Database Monitor
- Mail Monitor
- Domino Directory Monitor
- Notes.ini File Monitor
- Intrusion Detection Monitor
Click here for details and a free evaluation copy. |
|
|
|
|
|
|
|
|
