About This Code
Brief Description:
Pretty up a Display using HTML view
Notes Version:
R6.x, R7.x
Last Modified:
26 Aug 2006
OpenNTF Disclaimer
All of the program code and information presented in the OpenNTF.org Code Bin are provided "as-is", and should be used at your own risk. OpenNTF.org make no express or implied warranty about anything in the Code Bin, and OpenNTF.org will not be responsible or liable for any damage caused by the use or misuse of anything from this site. OpenNTF.org makes no guarantees about anything. Please thoroughly test all of the knowledge and code you find here before you attempt to use them in your production environment.
Code / Description
This is a JavaScript function set that will improve the appearance of native Domino "Display using HTML" views when used on a $$ViewTemplate or embedded on a form or page.
Features:
-- It adds an onclick event and HTML title (tool tip) to entire cells:
-- Twistie cells become easier to target and click
-- All cells following the last link are assigned the same click as the link, making most of the row clickable(
-- It adds a whole-row mouseover highlight that honours alternating colours set in Designer
-- It extends the display of responses full-width from their indent, preventing the responses from pushing other columns to the right
-- It works on flat views, any reasonable number of categories (hey, if the indent goes off-screen, there's not a lot anyone can do)
-- It handles response documents and response-to-response threads
-- It maintains font and twistie settings set in Designer
-- It leaves the selection margin alone except for the highlight colour
Oh -- this MAY work on R5 as well (I don't have an R5 setup to test with, but the view HTML hasn't changed THAT much), but you won't be able to save the JavaScript in the JS Header object because some of the code is a little newer than the JS that R5 understands, and there's no such thing as a JS script library in R5. You can, however, try the code on a Page set to "Treat as HTML" or save the file as an Image Resource.
Usage / Example
This script is meant to be a minimum-touch quick fix for getting Notes client views onto the web. All you need to do is put the script in the JS Header of a $$ViewTemplate form (or better, put it in a JavaScript script library and reference that on the template) and call the function init() in the form's onload event. You can edit the script to change the parameter sent to the prettyView() function in the init() function. A value of true is really pretty, but it wipes out the original text links when it adds the onclick event. A false value (or no value) leaves the links alone. That's better for accessibility since you can drive with the keyboard.
NOTE: YOU MUST add a DIV tag in passthru HTML around the embedded view (or $$ViewBody field) and give the DIV an ID of "viewPanel", like so:
<div id="viewPanel">
[VIEW GOES HERE]
</div>
Don't mark the view as passthru, just the opening and closing DIV tags.
It would help to add some CSS for the view, but it's not necessary. A little warning here, though: if you use Designer WYSIWYG to create a centred heading immediately before the passthru <div>, Domino will close your div tag for you. The script can handle that, but if you use #viewPanel TABLE, etc., as CSS selectors, your style will not apply. Note that response documents are rendered in nested tables. I've found this to be a good set-up:
#viewPanel TABLE {border-collapse: collapse; font-size: 1em;}
#viewPanel TH, #viewPanel TR, #viewPanel TD {border-bottom: solid black 1px;}
#viewPanel TABLE TABLE TH, #viewPanel TABLE TABLE TR, #viewPanel TABLE TABLE TD {border-bottom: none;}
Rows will not get borders unless the cells have 'em, and cell borders won't extend full-width, so you need both. The border-collapse on the table turns the two into one thin line. That last line keeps responses from getting an evil double-underline. The 1em font size setting in the table selector keeps 10pt Default Sans from blowing up to the browser's 16pt default when you also set a font-size for the body element.
There are two versions of the script -- one with long variable names and lots o' comments (that can be deleted later) so you can see what I've done. If you leave the comments in, it's about 8KB. Remove them and you're just under 4KB. The other, obfuscated version weighs in at well under 2KB (and gzips to under one kay if you're running gzip on a high-volume server), but it's just a little wee bit harder to read and/or modify. If you don't care how it does what it does, use the littler one on the template(s), but keep the longer version in the database somewhere -- you never know when somebody's going to want to make changes.
Code Attachments
Comments
Posted by Ed Maloney on 09/14/2006 06:28:10 PMGreat Stuff!
Great code and documentation! I dropped it into two views and it worked perfectly without any modifications. Thanks Stan
Posted by Kevin Pettitt on 10/19/2006 05:00:37 PMVery sweet! Nice job. Looks like it suffers from same bug as View applet though
Hey Stan,
I finally found an excuse to try this out and it looks really sweet. Took no time to swap out an existing view applet arrangement with this. The reason for doing so was an apparent bug in the applet, where some categories show up multiple times, but only have documents under one of them. This bug remained in effect even with this code, so my conclusion is that it is not a java issue per se, but rather something related to the way the applet (and your code) retrieves view info.
Any idea what might be the cause?
Posted by Fabian Meystre on 10/22/2006 12:36:02 PMGreat Job !!!
Just perfect... thanks
Posted by Dave Much on 12/14/2006 11:08:50 AMWorks great
How do you add links to move to next and previous pages of items in the view?
Posted by Stan Rogers on 12/23/2006 10:43:25 PMKevin --
My code does not "retrieve data", as such -- all it does is reformat the view table that Domino serves. That is, no additional information is downloaded, nor is there any communication with the server beyond that which would have occurred had the JavaScript not been included on the page. Whatever you are seeing is part of your view, and will be visible no matter which method you use to display the view.
Posted by Stan Rogers on 12/23/2006 10:50:56 PMDave --
I take it you have never used a $$ViewTemplate before. The appropriate commands to use are @DbCommand("Domino";"ViewNextPage") and @DbCommand("Domino";"ViewPreviousPage"). You will need to supply the objects to link on (text or picture). Make sure that the hotspots you create are NOT marked as passthru HTML.
Posted by Basir Noutash on 01/25/2008 04:36:23 AMdidn't work for me
Hi Stan, I don't know why it didn't work for me. I looked up the source HTML of the page, the div is there and the code is there. Not sure what could be wrong. I can email you the HTML source of the page if you want.
Thanks
Basir
Posted by Stan Rogers on 02/21/2008 07:33:11 PMResolved
Unfortunately, I wasn't able to determine the original problem -- a template redesign was the eventual cure. Two potential problems come to mind: an identifier conflict in the overall JavaScript on the template; or a JS engine parse error (to which IE is extremely vulnerable).
Posted by molpapha surinthong on 12/11/2008 09:24:05 AMWork but ...
Hi,
Thank you for your code, it is work.
But I have a question. Currently on mouse over, it display "click to open .... " If I want to display in another word that get from the document. What should I do?
Thank you for your help.
Molpapha
Posted by Stan Rogers on 01/17/2009 08:31:05 AMChanging the wording:
The easiest thing to do would be to open the JS file in a text editor and do a simple search and replace, then update the file in the NSF. If you need to make the wording multilingual, you'd need to put the JS on a Page or Form and use computed text or a computed for display field.
Posted by Durga Prasad on 05/18/2010 11:12:26 AMopening the links in a new window
the view looks perfect on the browser, but what do i do to make the links open in New Window ? Please let me knwo.
Posted by Durga Prasad on 05/18/2010 11:19:53 AMgot it
window.open(el);