dominoGuru.com

Your Development & Design Resource

Inline Buttons for XPage View Controls

08/22/2011 11:05 AM by Chris Toohey

XPages gives you options when crafting your application user interface, and I recently wanted to include a Delete Row button in something I was working on. Using a View Control and some SSJS, I was able to easily put a Button Control (or, really ANY Controls) inside each row of the View Control.

To start, I created my View Control and set the var attribute (which gives you a handle on each row as a NotesXSPViewEntry).

Once that's done and I've setup my View Control, I create a new viewColumn:


<xp:viewColumn 
id="viewColumn5">

    <xp:this.value><![CDATA[#{javascript:return ""}]]></xp:this.value>

    <xp:button value="-" id="killdoc">

        <xp:eventHandler event="onclick" submit="true"

            refreshMode="partial" 
refreshId="files">

            <xp:this.action><![CDATA[#{javascript:vfiledoc.getDocument().remove(true)}]]><
/span></xp:this.action>

        </xp:eventHandler>

    </xp:button>

    <xp:viewColumnHeader value="" id="viewColumnHeader5">

    </xp:viewColumnHeader>

</xp:viewColumn>

As the viewColumn value is a required attribute, I simply tell it to return "". Once I have a now blank viewColumn, I can add any Button, Repeat, or any other Controls I need.

And since I've already defined a variable for the NotesXSPViewEntry, I can refer to that -- localized per row -- in my viewColumn's Controls. For example, in the above code I created a simple little button that will act as a Delete Row button which 1) gets a handle on the NotesXSPViewEntry's NotesDocument and deletes it, and 2) runs a partial refresh on the parent Panel Control.

The result is a seamless Delete Row experience for the user.

XPages viewColumn inline Button Controls Example

You can take this technique a step further, as I am doing with Remote Console HD, and surface some pretty slick functionality.

Remote Console HD: Server Applications Actions

Note:

Be careful where you place your buttons viewColumn(s). Simply put, if you place it before a categorized viewColumn, it won't render the first series of buttons... so don't just drop the viewColumn at the far-left and assume it'll work: placement counts!

About the author: Chris Toohey

Thought Leadership, Web & Mobile Application Development, Solutions Integration, Technical Writing & Mentoring

A published developer and webmaster of dominoGuru.com, Chris Toohey specializes in platform application development, solutions integration, and evangelism of platform capabilities and best practices.