Further improve your Domino views on the Web

How to modify all Domino views on the Web easily with CSS.

This Content Component encountered an error

View member feedback to this tip.

This tip explains how to format your Domino views on the Web with no limitations, including column spacing. Using this method, you can modify all views with one touch, simply by using the well known technique of CSS.

Do it step by step:

  1. Create a new page and name it CSSview | view.css.
  2. In the Properties box, select "treat page content as HTML."
  3. Copy the CSS code below into the page. Save.
  4. Create a new form and name it $$ViewTemplateDefault. Create a field and name it $$ViewBody. Select as Computed for Display and set the required value to "".
  5. Into the HTML head content section, paste the code below.
  6. Save and play around. With your CSS page, you have full control of how Domino displays your views. With the table tag you define the size and the color of your table borders. I set it to red, merely to emphasize the effect.
  7. With the tr tag you define the background color of all your table cells. It can be overridden as shown by the th tag for your view cell titles. Finally play around with the padding-x values within the th and td tags. This allows you to space your columns exactly as you will see them in your browser.

Page view.css:
body {
 text-align: left;
 font-weight: 400;
 font-size: 12pt;
 color: #000000;
 background-color: #FFFFFF;
 font-family: Helvetica, Arial, sans-serif;
}

table {
 border: 0px;
 border-spacing: 1px;
 padding: 0px;
 background-color: #FF0000;
}

tr {
 background-color: #F8F8F0;
}

td {
 font-size: 9pt;
 font-weight: 400;
 text-align: left;
 color: #000000;
 font-family: Helvetica, Arial, sans-serif;
 padding-left: 5px;
 padding-right: 5px;
 padding-top: 2px;
 padding-bottom: 2px;
}

th {
 font-size: 9pt;
 font-weight: 600;
 text-align: left;
 color: #909090;
 font-family: Helvetica, Arial, sans-serif;
 background-color: #E0E0E0;
 padding-left: 5px;
 padding-right: 5px;
 padding-top: 2px;
 padding-bottom: 2px;
}

a {
 font-weight: 400;
 font-size: 10pt;
 color: #0000FF;
 text-decoration: none;
 font-family: Helvetica, Arial, sans-serif;
}

a:link {
 color: #0000FF;
}

a:visited {
 color: #0000FF;
}

a:active {
 color: #0000FF;
}

a:hover {
 color: #0000FF;
 text-decoration: underline;
}
------------------------------
HTML Head Content:

DBPath := "/+@Unique(@ReplaceSubstring(@Subset(@DbName;-1);\":" ";"/":"+"))+"/";
REM""";
bt :=@UpperCase(@Left(@BrowserInfo("BrowserType");1))+
@Left(@Text(@BrowserInfo("Version"));1); @If(bt="N4";"";"<meta http-equiv="content-type" content="text/html; charset=ISO-
8859-1">") + @NewLine + "<meta http-equiv="Content-Script-Type" content="text/javascript">" + @NewLine
+ "<meta http-equiv="Content-Style-Type" content="text/css">" + @NewLine + "<meta http-equiv="expires" content="0">" + @NewLine + "<meta http-equiv="pragma" content="no-cache">" + @NewLine + "<meta name="robots" content="nofollow">" + @NewLine + "<meta name="author" content="Brandenberger CommCity, Juerg H.
Brandenberger">" + @NewLine + "<link rel="stylesheet" href=""+DBPath+"view.css" type="text/css">" + @NewLine


MEMBER FEEDBACK TO THIS TIP

Regarding the above tip, I can't get it to work at all.

For starters I get a "syntax error" when pasting it in exactly as shown. I've tried altering the quotes (or adding in backslashes where the quotes are part of the HTML) but no joy -- the syntax error is gone, but so is the functionality!

Secondly, there are no comments so I'm having to "reverse engineer" the code to find out what it's trying to do.

I'm no bozo when it comes to Notes (I'm dual CLP certified, know HTML, CSS and JavaScript) but I feel this example should be removed and revamped by a Web-enabling expert so we can all LEARN something from it, not struggle with it or follow it blindly.

Any chance of getting it sorted?

Incidentally, many of your other tips are absolute gems and have really opened up our coding techniques, so keep up the good work!

-- Ralph B.

*****************************************************

I dunno. While this tip is very helpful., it still relies on table-based layouts for views. Taking the example one step further, I would do something like this. This is, of course, a rough example of HTML-based views, but it gives you an idea of how you can get really unique looks for view information without nasty table-based layouts.

Just a suggestion for a more controllable environment.

-- Chris T.

*****************************************************

I, too, found that the code would not work as posted. As a service to Ralph and others, I have edited the formula as listed below. This revised code (along with the instructions provided by Juerg Brandenberger) works as advertised.

REM "Replace backslashes and spaces in the database path with";
REM "forward slashes and pluses. This makes the path URL-friendly.";
DBPath :=
  "/" + @Unique( @ReplaceSubstring(
    @Subset( @DbName; -1 );
    "\\" : " ";
    "/" : "+" ) )
  + "/";

REM "Get the browser type and version.";
bt :=
  @UpperCase( @Left( @BrowserInfo( "BrowserType" ); 1 ) )
  + @Left( @Text( @BrowserInfo( "Version" ) ); 1 );

REM "Begin outputting text to the HTML HEAD.";
@If(
  bt = "N4";
    "";
  "<meta http-equiv=\"content-type\" content=\"text/html\"; 
charset=\"ISO-8859-1\">"
)
  + @NewLine
  + "<meta http-equiv=\"Content-Script-Type\" 
content=\"text/javascript">"
  + @NewLine
  + "<meta http-equiv=\"Content-Style-Type\" content=\"text/css">"
  + @NewLine
  + "<meta http-equiv=\"expires\" content=\"0\">"
  + @NewLine
  + "<meta http-equiv=\"pragma\" content=\"no-cache\">"
  + @NewLine
  + "<meta name=\"robots\" content=\"nofollow\">"
  + @NewLine
  + "<meta name=\"author\" content=\"Brandenberger CommCity, Juerg H. 
Brandenberger\">"
  + @NewLine
  + "<link rel=\"stylesheet\" href=\"" + DBPath + "view.css\" 
type=\"text/css\">"
  + @NewLine
-- Grant L.

*****************************************************

It's a pity that the author included all those "meta" tags in the HTML Head content, which actually have nothing whatsoever to do with his tip. Strictly, only the first and last lines need to be present. I've also corrected the first line, which had some quotes and backslashes missing:

DBPath := "/" + @Unique(@ReplaceSubstring(@Subset(@DbName;-1);"\\":" ";"/":"+")) + 
"/"; "<link rel=\"stylesheet\" type=\"text/css\" href=\"" + DBPath + "view.css\"
type=\"text/css\">"
-- John S.

*****************************************************

With regard to this tip, the author says it enables you to "format your Domino views on the Web with no limitations." How then can it enable you to set one particular column to a fixed width, or to be wider/narrower in relation to the other columns (and not simply adjust to the content width automatically)? As far as I can tell, all the columns must share the same settings, which I would see as a limitation, albeit a minor one.

-- Christine E.

*****************************************************

Nice tip, it works fine, except for some missing backslashes to the HTML Head Content text.

-- Milos S.

*****************************************************

Hi,

It seems that a lot of quotes and backslashes were lost during upload. I am sorry. For your convenience, I set up a Web page with the corrected HTML Head Content and a NSF database as a prepared example.

Best regards,
Juerg H. Brandenberger

*****************************************************

I got this to work just fine in R6. (I have not tested on R5.) Yes, there are some issues with the string for the HTML Head Code pasted herein, but if you simplify it just to get things started, you should be able to get it working. Start simple!

db := @ReplaceSubstring(@Subset(@DbName;-1);"\\";"/");
"<LINK rel=\"stylesheet\" type=\"text/css\" href=\""+"/" + db + "/view.css\">";
I didn't get this working with embedded views, but the day still is young!

As far as commenting is concerned, I didn't feel any commenting was necessary. CSS was designed to be pretty explanatory, as is the HTML Head needed to import the style sheet (CSS2). With a few changes, you probably can put the entire style sheet in the HTML Head (CSS1) as an R6 style sheet (CSS2) or as an image resource (ugh!) (CSS2). I prefer using the Page, however, since it's the easiest to edit and maintain.

-- Dave K. (workin' on R6)

*****************************************************

I very much appreciate the time people have taken to simplify, correct and otherwise comment on this function. I have to be honest and say that I had no idea my initial comment was going to be posted in this manner or I would have been a bit more tactful, to say the least (I assumed it was just going to the editors!).

Thanks to fellow commentators I now got it to work just fine -- and I've learned something about Web-enabling Notes databases in the process, so thanks, guys!

-- Ralph B.

Do you have comments of your own? Let us know.

This was first published in September 2003

Dig deeper on HTML for Lotus Notes Domino

0 comments

Oldest 

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

-ADS BY GOOGLE

SearchWindowsServer

Search400

  • iSeries tutorials

    Search400.com's tutorials provide in-depth information on the iSeries. Our iSeries tutorials address areas you need to know about...

  • V6R1 upgrade planning checklist

    When upgrading to V6R1, make sure your software will be supported, your programs will function and the correct PTFs have been ...

  • Connecting multiple iSeries systems through DDM

    Working with databases over multiple iSeries systems can be simple when remotely connecting logical partitions with distributed ...

SearchEnterpriseLinux

SearchDataCenter

SearchExchange

SearchContentManagement

Close