Very quickly and easily we can create a pretty good looking data view as an XPage – drag and drop a view control onto your page and your off in under 60 seconds – very simple, very functional.

However, for many users though (especially “older” corporate users, who are usually the ones making decisions on your projects and paycheck) it is simply not enough to be “functional”, it needs to be EASY. For example:

• On a large table it is difficult to scan across from one side to the. Especially as screens get larger and resolutions get higher we are putting more and more data onto a page
• Which link opens the data set? The only indication we have is the blue link on the left – not obvious to all

User’s expectations are based on their experience with the internet and everyday that gets higher and higher. As developers we are always looking for ways to make our pages look snazzier and also easier to user at the same time.

Here are some simple tricks using jQuery and my x$ function.
Add all the following to the onClientLoad event of the XPage.

1. To make the table rows alternating colors :
   The jQuery is selecting every “even row” within the viewPanel and applying the “alt” class to it

   x$("#{id:viewPanel1}", " tr:even").addClass("alt")
   

   

    

2. To make the table rows highlight with a mouseover
   The jQuery adds a listener to each row in the viewPanel1 which toggles the “active” class when the row is hovered over.  I also added a hand pointer to make it look selectable.

   x$("#{id:viewPanel1}").delegate("tr", "hover", function(){
       $(this).css('cursor', 'pointer' ).toggleClass("active");
   });
   

   

    

3. Make the entire row selectable with the 1st column’s href 
   The jQuery is selecting the “href” on the “first a” that it finds in the row and is binding it to the click event of the whole row. This is currently going to open a new page.
   Note: ” tr:gt(0)” selects all rows index greater than 0, that ignores the title row at the top which does not have the links in we are looking to use

   x$("#{id:viewPanel1}", " tr:gt(0)").bind('click', function(){
       window.location = $('a:first',this).attr('href');
   });
   

   

   And we could stop there – 7 lines of code and we have made major improvements to the data table. But to complete the transformation we will bring the data to the user rather than opening up another window.

4. Make the page link appear in a nice looking dialog
   The jQuery is opening a dialog box on the page and displaying the content using the url of the row. Having to click back and forth from information is distracting and tedious. This way it helps the user never leave the page of information they are looking for. This is a little more complicated, but not really if you step through it.
   • We bind to the click event of the first row
   • We trap the page offset of the row which was clicked.
   • We open the travelDetails dialog (where id=travelDetails is just a blank label at the bottom of the page)
   • The position of the dialog, the height, width and the fact that it is modal are set.
   • As we saw before we can get the anchor href from the first column and with that we ajax in the contents of that form
   • The HTML returned is then inserted into the travelDetails and displayed to the user.

   x$("#{id:viewPanel1}", " tr:gt(0)").bind('click', function(e){
     var offset = $(this).offset();
     e.stopPropagation();
     x$("#{id:travelDetails}").dialog({
       close: function(event, ui) {
       $(this).empty();},
       position: [100, (offset.top)-100-$(window).scrollTop()],
       resize: false,
       width: 400,
       height: 250,
       modal: true
     });
     x$("#{id:travelDetails}").dialog('open');
     $.ajax({
       type: 'GET',
       url: $('a:first',this).attr('href'),
       context: document.body,
       success: function(html){
         x$("#{id:travelDetails}").html(html)
       }
     });
   });
   

This process is just as applicable to any normal Domino webpage (non-XPage) with an embedded view in it.

Update 1 March 2012

I have been asked to add the style sheet which you will need to add to see the effects. Ideally you should add it to a Stylesheet and add it to the XPage as a resource, but for the sake of demonstration just copy and paste this into the source code at the top under the <xp: view tag

<style>
.alt{ background: #ecf6fc; }
.active { color: red; background:#CCCCCC; }
</style>