Control the look of Domino view tables

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"!!


    • avatar
    • 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!

      • avatar
      • Jake
      • Wed 29 Nov 2000


      Thanks Johan,

      That is what I meant. Just didn't explain it as well as you did.....

    1. 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?


      Show the rest of this thread

    2. Re: Better to use pass through HTML

      Can the links be maintained in the embedded table (view) when using pass thru html?

  1. 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.

    1. 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"

  2. 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 ...

    1. 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.

  3. 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.

    • avatar
    • 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?

    1. Re: R4.6 column is to small

      Couldn't you reference a .js file ?

  4. 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.


      • avatar
      • 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'); }

      Show the rest of this thread

  5. 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.

  6. 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!

Your Comments


Navigate other articles in the category "Views"

« Previous Article Next Article »
Quick edit document link   Lock access to views

About This Article

Author: Jake Howlett
Category: Views
Hat Tip: Amaresh Wagle
Keywords: column; table; border;


Print Friendly

Let's Get Social

About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »