Control the look of Domino view tables - Article

Control the look of Domino view tables 28 November 2000

If you look at a view through the browser, Domino renders it as a table, over which you have no control. If you want to control the formatting of the table, but don't want to create a template form or treat the view as HTML, then this tip may help.....

All you need to do is add the following HTML in to the heading of the first column in a view. This will then end the table and cell that domino has already started, before starting a new one that you can modify:

[</th></table><table border="1" cellpadding="2" cellspacing="1" class="myOwnViewTable"><th>Column Title</th>]

That's it! Save the view and check it out on the web! You can change the value for the border, cellpadding and cellspacing as per your requirement (or fancy). Assigning a stylesheet to the table allows you even greater control.

Note: This method allows you a certain amount of control over the appearance of your standard views. However, it is still not nearly as flexible as creating a $$ViewTemplate for Your View and then turning on "Treat view contents as HTML". This gives you complete control over the whole layout. That is how I make CodeStore look so "non-Notes"!!

Feedback

- Johan Känngård
- Tue 28 Nov 2000
Better to use pass through HTML
If you want complete control (almost) of the view, don´t rely on Domino making the layout. In the property box of the view, choose "Treat view contents as HTML". In the first column, add "<tr><td>" + your column value + "</td>". In the last column, add "<td>" + your column value + "</td></tr>". In all other columns, add "<td>" + your column value + "</td>".
Above the embedded view, in the $$ViewTemplate (or other form) insert a passthrough HTML table with: <table> After the embedded view, close the table with: </table>
This way, you can add many great things, like conditional properties on each and every cell!

Reply
1. - Jake
  - Wed 29 Nov 2000
  Thanks
  Thanks Johan,
  That is what I meant. Just didn't explain it as well as you did.....
  
  Reply
2. - Luis Contreras
  - Thu 15 Feb 2001
  What about Column Headings and Totals?
  I've tried this approach and it works, but what about categorized views and column totals? Also, I've done a lot using a linked CSS page that can control TR, TD, TH and other view elements for font sizes and such. But, I can't seem to control the Column Headings? Any ideas?
  Luis
  
  Reply
  
  Show the rest of this thread
  1. - Jake
    - Fri 16 Feb 2001
    You found the limitations
    I tried to use column totals with an HTML view as well. Gave up in the end ;-) there are some things that domino just can't do.
    Not so sure about the Categorised Views. Never really tried. Gut instinct tells me it will be difficult if not impossible. Let me know if you discover the contrary...
    Jake
    
    Reply
    1. - Doug Bruce
      - Mon 25 Jun 2001
      Re: You found the limitations
      did you take a look at the Javascript views on Notes.net ? Haven't looked at all the code yet (looks too complex for me), but this has a categorized set of views in it.
      
      Reply
      1. Jake Howlett
        
        Tue 26 Jun 2001
        
        Re: You found the limitations
        I'm assuming you mean the new iNotes thingy (?). Whenever I try and use it I get errors trying to download the MS DHTML Editor component. Nice try Lotus....
        I do intend to strip out as much stuff as I can though when I can get in there and report it back here. That goes for you guys too!
        Jake -CodeStore
        
        Reply
        
        Doug Bruce
        
        Tue 26 Jun 2001
        
        Javascript Dynamic View Displays
        Actually i meant this sandbox entry: http://www.notes.net/sandbox.nsf/85d5b6903071400e8525676d0079b3ae/4c7600d2ee962e 8585256a4d006498e1?OpenDocument
        
        Reply
  2. - Gene Lawhun
    - Wed 21 Nov 2001
    Re: What about Column Headings and Totals?
    Here is a solution that I came up with. I put the HTML tags right in the Column Title. Example here is the column headings for simple 3 column categorized view:
    Column1: <tr><td width="45%"><b><FONT face=Arial size=2>Employee Name</td>
    Column2: <td width="20%"><b><FONT face=Arial size=2>Extension</td>
    Column3: <td width="30%"><b><FONT face=Arial size=2>Employee Info</td></font></b></tr>
    I just got this working so I'm sure that there can be some tweaking than can be done to make the code more efficient. The limitation that I ran into so far is the number of characters you can put in the column title so for now I just left the color black (the default) so I wouldn't run out of room on Column3.
    Maybe other things can be added here since it is just taking it as straight HTML. I would be interested to see more ideas.
    P.S. Excellent site Jake. I've been poking around for about 4 months now and really like the site. I've been doing Notes work since '92 and it's nice to see "Good Content" in a useful manner on a website. You're offer such a great service. It's truely appreciated.
    
    Reply
3. - Scott
  - Wed 22 Dec 2004
  Re: Better to use pass through HTML
  Can the links be maintained in the embedded table (view) when using pass thru html?
  
  Reply
- Gareth Hay
- Wed 3 Oct 2001
Better, faster views
Load the view into a javascript array...
[passthru HTML]<script> [passthru HTML]function CustomObject(a,b,c,d){ [passthru HTML]this.a=a; this.b=b; [passthru HTML]this.c=c; this.d=d; [passthru HTML]} [passthru HTML]thedata=new Array; [embed a view*] [passthru HTML]</script>
In the first column of the view
"thedata["+@DocNumber+"]=new CustomObject(escape(\'"+@ReplaceSubstring(@ReplaceSubstring(FIELDWITHDATA;"\'";" `");"\"";"`")+"\'),"
Subsequent columns
"escape(\'"+@ReplaceSubstring(@ReplaceSubstring(FIELDWITHMOREDATA;"\'";"`");"\"" ;"`")+"\'),"
last column
"escape(\'"+LASTFIELDDATA+"\') );"
Now all your data is stored in a javascript array.
Using innerHTML methods you can display them in any order you want within a table, or you can document.write a nice table with it.
The bonus is you can sort the array, so you can switch which column you sort by faster, since you don't have to go back to a server.

Reply
1. - Jake Howlett
  - Wed 3 Oct 2001
  Re: Better, faster views
  What's that they say about great minds thinking alike?! I did something *very* similar only a week or so ago. I used a slightly different method that may be a little more efficient. Shall combine the two and make it in to an article ASAP
  Cheer, Jake "CodeMaster"
  
  Reply
- Johan
- Fri 26 Oct 2001
What about calendar views
Hi, I just managed to get my views pretty nice on the web, using html in the views.
But, now i have some views as calandar views. How can i override the ugly look from Domino and display my own design in calandar views?
Thanks for any help on this ...

Reply
1. - Jon LeDrew
  - Tue 15 Jan 2002
  Re: What about calendar views
  Try adding links to a $$ViewTemplate form that open the view with the grid and date parameters set.
  You can also change the look of the table by adding a stylesheet to your $$ViewTemplate form with TD and TR attributes.
  I used a combobox that contained the months. When the field value changed a JavaScript function opened a new calendar URL with the parameters set according to the values chosen.
  i.e. Select January from the combobox;
  the index of the field values in JavaScript is 1 for me as I added a "Pick a Month" Option as the first combobox value. In the onChange event for the combobox I called my viewMonth() function.
  function viewMonth(){ var f = document.forms[0]; var mon; var today = new Date(); var year = getYear(today); var i=f.Month.selectedIndex; if (i < 9) { mon = "0" + i; } else { mon = i } window.location="./SAAC?OpenForm&Grid=4&Date="+ year +"-"+ mon + "-01"; }
  function getYear(theDate) { x = theDate.getYear(); var y = x % 100; y += (y < 38) ? 2000 : 1900; return y; }
  So by picking the month I change the URL to show the calendar by month. The key is in the Grid and Date parameters.
  Grid=1 is a two day view, Grid=2 is a week long view, Grid=3 is a two week view, Grid=4 is a month view and Grid=5 is the whole year
  The Date parameter is in the format yyyy-mm-dd.
  Sorry for the late reply but this is something that a co-worker and I came up with just recently.
  
  Reply
- Johan
- Wed 30 Jan 2002
Spreading the content of a column in several
Hi, I got my views up and running very nice on the web, but know, i'm trying this: created a view with categorys. They all show below eatchother, like: - cat.1 - cat.2 - cat.3 - cat.4
How can i make this view dynamic on the web, so that there are 2 or more columns created based on the numbers of values in the view. What i would like to get is: - cat.1 - cat.2 - cat.3 - cat.4 ...
Can this be done? Thank in advance, Johan.

Reply
- Matt
- Wed 20 Feb 2002
R4.6 column is to small
I have a client right now that is (still) using 4.6 and the default column heading is to small to fit all of that text. Are there other options for where we can put the html text in the view?

Reply
1. - charles st-jacques
  - Thu 28 Feb 2002
  Re: R4.6 column is to small
  Couldn't you reference a .js file ?
  
  Reply
- Sherrie Wollenhaupt
- Tue 5 Mar 2002
I run out of room...
I tried pasting your html into the heading of the first column, but it doesn't allow for all of the characters. It ran out at 'class=MyOwnView'. Just how do you get this to work? I know I'm missing something....
Thanks for your great site!!! It's very well done and LONG needed.
Sherrie

Reply
1. - Allan Smith
  - Wed 17 Jul 2002
  Re: I run out of room...
  If you run out of room just put this in your colum header
  <script language="javascript">writeCode()</script>
  On your form that contains the web view add this into the JSHeader
  function writeCode() { document.write('put html here'); }
  
  Reply
  
  Show the rest of this thread
  1. - Rob Inglis
    - Wed 8 Jun 2005
    Small fix
    Hi, great idea, but I'm sure you mean:
    [ <script language="javascript">writeCode()</script> ]
    Cheers, Rob
    
    Reply
- Louis
- Fri 4 Apr 2003
More on this feature
I have never used the feature of treating the form as html. I tried it and it failed to display the page properly - I have lots of common field that are computed for display and I'm guessing that this is one of many problems. But, perhaps you can expand on this topic - it appaers worthy. Like when and why to use this feature, basic charactics, etc. I have said this before and will say it again - this is a great site Jake. hope you will consider expanding on this topic.

Reply
- Ralph Bacon
- Mon 17 May 2004
Ideal for adding a COLGROUP
I used this to squeeze in a COLGROUP (with admittedly only 3 columns) but that then allows you to control all the columns via CSS - especially the ever-elusive per-column WIDTH.
A previous respondent suggests calling a JS function to write any length HTML at the appropriate point - sounds a neat way of doing the COLGROUP if you have a lot of columns without SPANs.
Wow! I can't wait to use this in a production database. Great tip!

Reply