Dec's Dom Blog

Tags : Lotus Domino XPages CSS
Bookmark :              

In the past section we built our data table on the homepage of our XPages application using a repeat control. In this section I'll show you how to apply some custom CSS to the table and how to use a server side JavaScript to alternate the style used for the rows of the table.

First of all we need to add some CSS to our custom.css file. Open it up in the resources -> CSS files section of your database design and add in the following CSS

#phonebook,.phonebook {
border:1px solid #CCCCCC;
width:100%;}

#phonebook th, .phonebook th {
background-color:#EEEEEE;
padding:5px;
font-weight:bold;}

#phonebook tr, .phonebook tr {
background-color:#FFFFFF;
padding:5px;}

#phonebook tr.altRow, .phonebook tr.altRow {
background-color:#EEEEEE;}

#phonebook tr.over, .phonebook tr.over {
background-color:orange;
color:#FFFFFF;
cursor:pointer;}

#phonebook td, .phonebook td {
padding:0 2px;
text-align:left;}

Save you new custom.css file and then open up the contents_HomePage custom control again. We need to tell the table to use the 'phonebook' style. Select the table in the XPages designer and go down to the all properties section. In the StyleClass just add in the word 'phonebook' and then save and refresh your XPage in your web browser.  The XPage source for the table should look like this



and the resulting web page will look like this



Wouldn't it be nice if we alternated the background color of the rows in the table? This is very handy when you start dealing with a larger number of rows in the table as it makes it easier for the user to read across an individual row.

With a simple bit of server side JavaScript we can very easily achieve this, and because each row of your table is just a single row inside a repeat in the XPage you only need to write the code once.

Open the contents_HomePage custom control again and switch to the source view. Find and click on the <xp:tr> tag that appears inside your repeat control.  This will switch the properties box below the XPage to the properties of the table row. Find the All properties and scroll down to the styleClass. I mentioned before that nearly everything in XPages can be computed and this is what we will do now. Instead of typing in a styleClass we click the blue diamond symbol highlighted below and then we select the 'compute value' option.



This brings up the script entry dialog box.  Here's the script we are going to use :

if (rowIndex % 2 == 0 )
return ""
else
return "altRow";

In this JavaScript we are looking at rowIndex which we setup in the repeat control as the name of the variable that would store the index. The rowIndex%2 returns the value of the rowIndex's modulus ( or division remainder ) when the value is divided in two. In simple terms all the even rows will return a zero and all the odd rows won't. Save this script, save your xpage and refresh your web page to see this : ( Don't forget the index starts at zero )



So a single line of serverSide JavaScript, inside your repeat control has allowed to you make a very nice looking table.

In the next few parts of the series we will build a brand new XPage that will list all the staff members at a single location and then we'll show you how to link your homepage to the single location page, both from the sidebar and from the table on the homepage. Our application is starting to come together now so here is an updated download for you to work with.