Customize Summary Detail Link in xPages Dataview

Question

I'm using the DataView control from the xPages Extension Library and I would like to use the summary column link to expand rather than open a separate xpage with the current document. What is the best way to achieve this? I thought of using jQuery to click/trigger the expand link but I can't figure out how to pass the current row of the view into a javascript function in the summary column href property. Another option would be to call the same JS that the expand link is calling but that AJAX code seems to be sufficiently abstracted so as to not show up in a cursory analysis of the HTML code generated.

Update: added screen shot enter image description here

Shean, anyway you can include a visual mockup of what you hope to accomplish? — Steve Zavocki
Also, have you considered the use of the inputHidden control to pass the value from the server to the front end? Refresh it when your row changes, then use jQuery to grab that value to build your href accordingly. — Steve Zavocki
I've added as screen shot above. I'm not familiar with the inputHidden control but I will investigate that suggestion. — Shean McManus

Knut Herrmann Knut Herrmann · Accepted Answer · 2015-06-07T10:35:14

Add CSJS code to viewSummaryColumn's href property to "click" on show/hide details image instead of opening the document.

Find the id of the details element
var id = '#{id:details}'
calculate the image id
id = id.replace(':details', '_shimg')
get parent's link element
var link = document.getElementById(id).parentElement
"click" the link
link.click()

"details" is the id of detail facet's panel. Your code should look like this:

<xe:dataView
    ...
    collapsibleDetail="true">
    <xp:this.facets>
        <xp:panel
            id="details"
            xp:key="detail">
            ...
        </xp:panel>
    </xp:this.facets>
    ...
    <xe:this.summaryColumn>
        <xe:viewSummaryColumn
            ...
            href="javascript:document.getElementById('#{id:details}'.replace(':details', '_shimg')).parentElement.click()">
        </xe:viewSummaryColumn>
    </xe:this.summaryColumn>
</xe:dataView>

Customize Summary Detail Link in xPages Dataview

1 Answers