dominoGuru.com

Your Development & Design Resource

Creating an inline Action Bar for IBM XPages viewPanels

03/05/2012 12:49 PM by Chris Toohey

An Action Bar for an application user interface -- especially applications on the IBM Lotus Notes/Domino platform -- are an established standard. You need a place for your common actions, to easily create and update NotesData, and ultimately drive the user focus for any major operations in your application.

This article will show you how you can easily add an Action Bar to an XPage viewPanel, and have it display nicely with things like Pagers to give your application a more rich feel.

The viewPanel Control has multiple Editable Areas, or Facets, that are built into the viewPanel control to allow you to add things like a View Title, Header and Footer Pager Controls, etc.

There are several misconceptions about facets however, the biggest being that you can only use specific types of Controls for a given facet.

For example, you might think that the headerPager facet must use a pager Control.

Truth is, you can use any control as a facet, which in the case of the viewPanel this understanding can give you some pretty slick user interface design options.

Let's take a look at the XP Store XPages application that I'm writing the next part of the Adaptive UI/UX series. In this XP Store, I wanted to create a simple sidebar that allowed you to quickly view and add various application NotesDocuments. I thought I'd use a simplified viewPanel and add an action bar that allowed me to Add a New Application. As the sidebar is approximately 250 pixels wide but allows the user to expand/collapse via the Dojo ExpandoPane, I needed to go as minimal as possible with the UI footprint.

XP Store Sidebar - Applications viewPanel with Action Bar

As I am using an accordion control to house my viewPanels and as the accordion control provides me the opportunity to label the given section/viewPanel... I had little need for the viewPanel's viewTitle facet.

That was, unless I wanted the action bar to align properly with the pager controls!

I simply added an xp:div Control, with a facet key of "viewTitle", and used this DIV as a container for my viewPanel action bar.

Here's an excerpt from the XP Store layout.xsp Custom Control which houses the sidebar XSP markup:


<xp:viewPanel

    rows="30"

    id="sidebar_widget_applications"

    themeId="sidebar_widget_applications"

    viewStyleClass="sidebar_widget"

    var="thisApp"

    showColumnHeader="false">

    <xp:this.facets>

        <xp:pager

            partialRefresh="true"

            layout="Previous Group 
Next"

            xp:key="headerPager"

            id="pager1">

        </xp:pager>

        <xp:div

            styleClass="toolbar"

            xp:key="viewTitle">

            <xp:button

                id="crud_newapplication"

                styleClass="button add 
icononly">

                <xp:eventHandler

                
    event="onclick"

                
    submit="false">

                    <xp:this.script><![CDATA[setTargetFrameHref('#{id:container_content}', 
'application.xsp')]]></xp:this.script>

                </xp:eventHandler>

            </xp:button>

        </xp:div>

    </xp:this.facets>

    <xp:this.data>...

Pretty simple really, once you know that you can put really anything in there once you give it the appropriate facet key.

Expect more on the aforementioned XP Store coming soon in the second installment of the Adaptive User Experiences in IBM XPages Applications.

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.