Issue with Dynamic View Panel and onColumnClick (CSJS) event

Question

Using the Dynamic View Panel and trying in the onColumnClick event with client side JS to get the UNID or NoteID of the row the user clicked on. However, the XPage does not load with the error shown below

Error while executing JavaScript action expression Script interpreter error, line=1, col=9: [ReferenceError] 'rowData' not found

JavaScript code

1: rowData.getNoteID()

The complete XPage code is shown below. Is there a way to get a handle on the row information to build this event handler? Goal is to use client side JS to open a new tab to show the document the user clicked on.

Howard

<xe:dynamicViewPanel
    id="dynamicViewPanel1"
    var="rowData"
    indexVar="index">
    <xe:this.data>
        <xp:dominoView
            var="view1"
            viewName="testview">
        </xp:dominoView>
    </xe:this.data>
    <xp:eventHandler
        event="onColumnClick"
        submit="false">
        <xe:this.script><![CDATA[alert('#{javascript:rowData.getNoteID()}');]]></xe:this.script>
    </xp:eventHandler></xe:dynamicViewPanel></xp:view>

Knut Herrmann Knut Herrmann · Accepted Answer · 2015-07-28T20:33:11

You can't calculate row's noteId with alert('#{javascript:rowData.getNoteID()}') in CSJS code as this is executed on server side before all the rows get rendered.

Use rowAttrs property instead. It allows you to add an attribute to rendered table row. You'd add an attribute "noteId":

 <xe:this.rowAttrs>
     <xp:attr
        name="noteId"
        value="#{javascript:rowData.getNoteID()}">
     </xp:attr>
  </xe:this.rowAttrs>

The rendered html looks like this then:

The onColumnClick event is fired on rendered
<a id="view:_id1:dynamicViewPanel1:0:_id3:_internalColumnLink" href="#" ...

You can get this element/node in onColumnClick's CSJS code with thisEvent.target.

From there you "walk" upwards with .parentNode twice and get the element <tr ..> with attribute "noteId".

Finally, read the attribute with .getAttribute("noteId").

This is your example with all changes:

   <xe:dynamicViewPanel
      id="dynamicViewPanel1"
      var="rowData"
      indexVar="index">
      <xe:this.data>
         <xp:dominoView
            var="view1"
            viewName="testview">
         </xp:dominoView>
      </xe:this.data>
      <xe:this.rowAttrs>
         <xp:attr
            name="noteId"
            value="#{javascript:rowData.getNoteID()}">
         </xp:attr>
      </xe:this.rowAttrs>
      <xp:eventHandler
         event="onColumnClick"
         submit="false">
         <xe:this.script><![CDATA[
            alert(thisEvent.target.parentNode.parentNode.getAttribute("noteId"));
         ]]></xe:this.script>
      </xp:eventHandler>
   </xe:dynamicViewPanel>

Issue with Dynamic View Panel and onColumnClick (CSJS) event

1 Answers