Using jQuery to add table interactivity to your XPage

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.

Simple XPages view of data
Simple XPages view of data

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")
    
    Adding Alternating Lines using jQuery
    Adding Alternating Lines using jQuery

     

  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");
    });
    
    Adding a mouseover color to a table row using jQuery
    Adding a mouseover color to a table row using jQuery

     

  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');
    });
    
    Binding the first anchor tag to the whole row using jQuery
    Binding the first anchor tag to the whole row using jQuery

    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)
        }
      });
    });
    
Displaying the travel details in a simple dialog with jQuery
Displaying the travel details in a simple dialog with jQuery

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>

Advertisements

Example Scriplets

Here are some examples of some useful Lotus Notes Scriptlets – Keeping them in a Bookmark folder allows them to be used as developer tools whenever you need them

Show me the session cookie – (this works on any website)
javascript: var temp=document.cookie;alert(temp.replace(/;/gi,”\n”)+’\n\nLength=’+document.cookie.length)

Open ezScan from a URL (assumes URL in the format http://server/path/db.nsf/viewname/docUNID – no ? opendocument)
javascript: var sTemp=location.pathname; var loc=”scanez://YOURSERVERNAME/”+sTemp.substring(1, sTemp.indexOf(“.nsf”)+5)+”0/”+sTemp.substring(sTemp.lastIndexOf(“/”)+1, sTemp.length); alert(loc); void(0);

Open a specific document by Key (enter MRON-8QDL59)
javascript:%20a=prompt(‘Blog Number’,”);%20location.href=’http://www.nostradominus.com/mdroden/nd.nsf/d6plinks/’+a

Open a user’s document in the NAB (assuming you are viewing a Lotus Notes webpage)
javascript:%20a=prompt(‘Enter the User Shortname’,”);%20location.href=’/names.nsf/($Users)/ ‘

Show the current view in XML format (assuming the URL in the format http://server/path/db.nsf/viewname? openview)
javascript: var sTemp=location.pathname; var loc=”/”+sTemp.substring(1, sTemp.indexOf(“.nsf”)+5)+sTemp.substring(sTemp.lastIndexOf(“/”)+1, sTemp.length)+”?ReadViewEntries”; location.href = loc; void(0);

Show the current view in JSON format (assuming the URL in the format http://server/path/db.nsf/viewname? openview)
javascript: var sTemp=location.pathname; var loc=”/”+sTemp.substring(1, sTemp.indexOf(“.nsf”)+5)+sTemp.substring(sTemp.lastIndexOf(“/”)+1, sTemp.length)+”? ReadViewEntries&OutputFormat=JSON”; location.href = loc; void(0);

Search the current view (assuming the database is Full Text indexed and search forms are enabled)
javascript:%20a=prompt(‘Enter the Query’,”); var sTemp=location.pathname; var loc=”/”+sTemp.substring(1, sTemp.indexOf(“.nsf”)+5)+sTemp.substring(sTemp.lastIndexOf(“/”)+1, sTemp.length)+”?searchview&Query=”+a; location.href = loc; void(0);