Learning XPages Part 30 : Creating An Action Bar And Buttons

If we are designing a read-only phonebook
application then we are effectively finished and all that remains is a
bit of tidyup and adjustments to the look and feel to make everything perfect
however I’m going to extend the functionality to allow people be able to
edit their own record in the phonebook or to allow somebody with a special
role edit any document in the phonebook. Over the next few parts we will
look at how to enabled editing of documents in XPages, designing a oneUI
based ‘action bar’ and how to check a persons rights and roles to display
and allow the actions.

To begin the process I have created
a new field in the application configuration form that can turn on or off
this feature. The reason for doing this is because the final version of
the application will be available on OpenNTF and not everybody who uses
it might want to grant their users this ability. By using a setting in
the configuration document you’ll be able to control the feature. I have
created a ‘radio button’ on the notes form with a value of Yes|1 and No|0
and I have defaulted the value to "0" so it is turned off by
default.

Lets start work on the action bar, We’ll
just create the action bar and the buttons and style them to the OneUI
look and feel for the moment. Start by opening your content_Person custom
control and drag a new panel into the design at the top of the page. Once
it’s dragged into place switch to the source view and make sure that it
is inside the ‘lotusContent’ DIV. We will give the panel a styleClass of
‘lotusActionBar’ and ‘lotusBtnContainer’. To give an item two styleclasses
just separate them with a space.

Once this is done let’s drag over a
‘Link’ control. You may be tempted to drag over a button control because
we are creating action buttons but with the OneUI CSS we are actually going
to style a link with the correct look and feel instead. With the link control
in place have a look at it’s All Properties and find the property for OuterStyleClass.
Fill it in with the following 3 classes seperated by spaces ‘lotusBtn lotusBtnAction
lotusLeft’. The OUTER style class creates a SPAN tag around the link with
the CSS class set to the values you specify.

When your finished your source should
look like this :

‘

If you now refresh and preview your
XPage you will see your new action button appear at the top of the person
details page, I’ve changed the label in mice to read ‘Edit Document’ :

In the next part we’ll add the actual
action to our new button.