Hacking the xPages Data View CSS to Enhance Display

A few weeks ago I was tasked with creating a new printable version of our corporate directory for use in production areas where phones were not located near workstations.  Until this point this list had been maintained manually.

After looking around at a few options I settled on the Data View control from the xPages Extension Library.  This control allows one to easily set the number of columns, which in my case was important because they wanted specifically a four column display.

Our corporate directory has three data types in play here:  location documents, individual person documents and documents for all other non-individual phone numbers.  First I set up the source view categorized first by location and secondly by the phone category.   It looked something like this (the data below has been changed for privacy).

Source View in Notes

Connecting that data source up to the data view control yielded initially a display that was far from what I was seeking.

With some CSS overrides and jQuery DOM manipulation I was able to convert that to this:

Ahhh, much better.  Below is the custom CSS that I used.  The first six are just custom classes I used to style the site headers, category headers as well as the detail sections.  Basic stuff.   Then I used two classes that were already included in the xPages extension library theme I was using.  Adding them to my custom CSS allowed me to override some margins and spacing. Finally the last two classes are used by the jQuery code to enhance the breaks between locations.

/* Custom Classes */

.catSite {

font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;

font-size: 18px;

color: #365F91;

}

.catCategory {

font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;

font-weight: Bold;

font-size: 14px;

color: #365F91;

padding-top: 8px;

}

.siteDetail {

font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;

font-size: 12px;

color: #365F91;

}

.nbrDetail {

font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;

font-size: 12px;

}

.nameCell {

width: 165px;

border-bottom: 1px solid #ddd;

}

.nbrCell {

width: 40px;

border-bottom: 1px solid #ddd;

text-align: center;

}

/* Overrides to Existing Classes */

.lotusTable td {

padding: 0px;

border-top: 0px;

}

.lotusTable th {

padding-top: 0px;

border-top: 0px;

}

/* Type Selector Formatting */

h2 {

font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;

font-size: 24px;

padding-left: 10px;

}

hr {

background: #8C8C8C;

clear: both;

float: none;

width: 100%;

height: 1px;

margin: 0 0 0.6em;

border: none;

}

The jQuery code I used is run from the onPageLoad event.

//jQuery magic to enhance formatting by manipulating DOM

//Removes some extra white space at the top of the page

$("thead").remove();

//Remove Top Level Categorization

$(".catLocation").text("");

//Replace + with horizontal rule for each site

//this sets each site off from the previous

var s1 = $(".catSite");

$.each(s1, function( index, value ) {

  var s2 = $(this).text()

  $(this).html(s2.replace("+","<br><hr>"))

});

//remove the nameCell and nbrCell class from the site class elements to eliminate extra underline

//replace the address delimiter tilde from view data with break tag to start a new line for each address data

var d1 = $(".siteDetail");

var d2 = d1.parent()

d2.removeClass("nameCell")

d2.next('td').removeClass("nbrCell")

$.each(d1, function( index, value ) {

  var d3 = $(this).text()

  $(this).html(d3.replace(/\~/g,'<br>'))

});

//add horizontal rule at the end of the list

//$("table").append("<BR><HR>")

Really not very much code to achieve a nice result.   Of course, there is still the overhead of the extension library code and the CSS that is loaded there is large and cumbersome to override in places.  If you wish for more styling flexibility there are other options.   In my next post (hopefully next week) I will demonstrate how to use a JSON feed from a Notes view to write out the same data without using the Data View control (hint: it also involves jQuery and a special jQuery plugin).