Learning Xpages Part 47 : Using A View Control To List Locations

When displaying the list of location son
the home page I used a repeat control inside a table. This allowed me to
add additional features such as the hover effect on each row of the table
and gave the use the ability to click anywhere in the row due to it’s onClick
event. Another way to display information from a view in an Xpage is to
use a View Control. I’m going to use one here so you can see how to set
it up.

Lets open the content_locationAdmin
custom control. You should have a nice blank custom control containing
a single panel. Into this panel we’ll drag a View Control. You’ll find
it on the right side of your screen in the container controls section.

When you release the mouse button a
helper dialog box will appear which will help you link the view control
to a data source. From the current database select the vw_Locations view.
you should see all the columns in that view appear below. You can unselect
any of the columns that you don’t want to appear on the Xpage.

Once you click OK you’ll see your new
view control with a pager already built in. You can save your control and
preview it in the web browser to see your basic view.

I’d like the phonebook editor to be
able to click on a location document from the view and have it automatically
be put into edit mode. I’d also like to add a checkbox to each row so that
the phonebook editor can select a number of documents for deletion. Click
on the first column of the view control, The properties will switch to
the columns properties and in the main area you’ll see some column options.

I have simply turned on the ‘Checkbox’
and ‘Show As Links’ options. Now saving the xPage and previewing it makes
it look like this :

To make sure the document opening in
the correct XPage go back to the overall View control properties and you
can tell it how you want to open the document

I’d like to make my view control look
a bit nicer so I have added the following to my custom CSS file :

and for the properties of the view control
I have set this new style as the styleClass for the control and I have
reused the existing styleclass of phonebook for the data table section

It now looks like this in the browser

In the next part I will show you how
to link the checkboxes to the delete action button.