Conditionally Render an Event Handler

One of the great features of XPages is that so many properties can be computed dynamically. One such property that you may not have realized is that you can even dynamically determine whether to render event handlers. In this post, I’ll show you how.

I first used this feature when using a repeat control to generate a link for every letter in the alphabet in order to jump to a specific place in a view. However, I wanted to disable the letters where there was no matching data, so I didn’t want the click to send a server request in that case.

To show it more clearly here, I’ll demonstrate a simpler example.

This code shows a repeat control that will display a link for the letters A through J. A click on any link will run client-side JavaScript to pop up an alert to display that letter.

<xp:repeat id="repeat1" rows="30" indexVar="rptIndex" var="rptVar">
  <xp:this.value>
    <![CDATA[#{javascript:return ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];}]]>
  </xp:this.value>
  <xp:link escape="true" text="#{javascript:return rptVar;}" id="link1">
    <xp:eventHandler event="onclick" submit="false">
      <xp:this.script>
        <![CDATA[alert('#{javascript:rptVar}');]]>
      </xp:this.script>
    </xp:eventHandler>
  </xp:link>
     
</xp:repeat>

If you switch to the page source and click on the tag, you’ll find a rendered property. Just add logic there to conditionally determine whether to render the event handler.

In this example, I’m checking the repeat index and only rendering event handlers for even-numbered entries in the repeat control (0, 2, 4, 6, 8, etc.)

Image may be NSFW.
Clik here to view.

This code shows the repeat control with the added rendered condition on the event handler.

<xp:repeat id="repeat1" rows="30" indexVar="rptIndex" var="rptVar">
  <xp:this.value>
    <![CDATA[#{javascript:return ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];}]]>
  </xp:this.value>
  <xp:link escape="true" text="#{javascript:return rptVar;}" id="link1">
    <xp:eventHandler event="onclick" submit="false">
      <xp:this.script>
        <![CDATA[alert('#{javascript:rptVar}');]]>
      </xp:this.script>
      <xp:this.rendered>
        <![CDATA[#{javascript:return rptIndex % 2 == 0;}]]>
      </xp:this.rendered>
    </xp:eventHandler>
  </xp:link>
     
</xp:repeat>

Now, the odd-numbered links will not do anything when clicked, because their event handler is not rendered.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.