Triggering Client-Side JavaScript While Paging Through an XPages View Panel

If you have a situation where you need to trigger client-side javascript code while paging through a view panel, you’re in luck.

I recently worked on a technique that required using dojo code to modify a view panel. With the code in the page’s onClientLoad event, the code worked fine when the view first loaded. However, it did not fire again as I paged through the view panel.

One option was turning off the partial refresh setting on the view pager, but I wanted to find a better solution that did not hurt application performance.

While looking through the XPages Control Documentation on openNTF, I did not see any events on any of the classes in the hierarchy for the xp:viewPanel control, but I did notice that the xp:panel control has an onClientLoad event. Granted, they don’t share the same inheritance, but it at least gave me the idea to see if I could manually add an onClientLoad event to the view panel.

It worked!

Adding Your Own onClientLoad Event to a View Panel

All I had to do to make my solution work was to move the page-level onClientLoad event into my view panel. Now it triggers when the view loads initially and then re-loads with every click of the pager.

To try this out, create a page with a view panel and add a single line of javascript to the onClientLoad event of the page.

The last few lines of your page’s source should look like this:

      </xp:viewColumnHeader>
    </xp:viewColumn>
  </xp:viewPanel>

  <xp:eventHandler
    event="onClientLoad"
    submit="false"
  >
    <xp:this.script><![CDATA[alert('loaded');]]></xp:this.script>
  </xp:eventHandler>	
</xp:view>

You can test your view in the browser and you’ll see that the message is displayed when you first load the page, but not as you page through the view.

Now, move the event handler (including the surrounding <xp:eventHandler> tags) up a line so it’s before the closing </xp:viewPanel> tag (but after the last </xp:viewColumn> tag).

Now, the last few lines of the page source will look like this:

      </xp:viewColumnHeader>
    </xp:viewColumn>
    <xp:eventHandler
      event="onClientLoad"
      submit="false"
    >
      <xp:this.script><![CDATA[alert('loaded');]]></xp:this.script>
    </xp:eventHandler>
  </xp:viewPanel>	
</xp:view>

You can test in the browser and now you’ll see the message pop up when the page is first loaded and every time you click on the view pager.

Maintaing the Code

The downside is that now you don’t have the script editor to edit the code any more (since this event isn’t exposed in the properties panel), so, at minimum, I would recommend implementing and debugging it on the onClientLoad event for the page and then moving it into the view panel when it’s ready.

A better option would be to make the event a single line that calls a script library function as needed, which is a better design for reuse across multiple views.

Up Next

In my next post, I’ll use this technique as part of a solution for fixing view column indentation.

Advertisements

4 responses to “Triggering Client-Side JavaScript While Paging Through an XPages View Panel”

  1. Michael G. Smith (@michaelgsmith) says :

    Good tip and very timely. Can use this right away.

  2. Hans Widjaja says :

    I am using Domino Designer 9.0.1. This tip is not working for me. In addition to that, if I move the onClientLoad event within the viewpanel, then I close the xpages, I cannot re-open the xpages anymore. My Domino Designer hung. (not responding)

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

%d bloggers like this: