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>

2 thoughts on “Using jQuery to add table interactivity to your XPage

  1. Really impressive what we can do with jQuery.

    What about having a data table control where you can add sorting option on col headers.

    I’ve used Tablesorter( http://tablesorter.com/docs/ ) and the limitation I found is when you have more than one page of data; lets say 3 pages displaying. When you do a sort; only sorts what you have on the screen not all Data Table content.

    Looking forward for more of your jQuery articles.

    BTW I found this tutorial on the Internet which is a good start for traditional Notes Developers (like me) jumping into XPages or Web Development:

    http://tutsplus.com/course/30-days-to-learn-jquery/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s