We now have a simple XPage to display a
persons information so in this section we will link to the XPage and pass
in a document UNID so that it knows which document to open.

Lets open up the content_location custom
control. You should see the table that we create in a previous part with
the repeat control inside the table so that each row of the table is repeated.
When linking one page to another there are a couple of different ways that
we can do it. For the phonebook I’d like the user to be able to click anywhere
on the row of the table to bring them into the person document. I could
convert one of the computed fields on the table into a link but that would
require the user to know they have to click only on the link, by allowing
them to click anywhere on the table it will be easier for the user.

What I’m going to do is add an ‘onClick’
event to the table row. Switch to your source view and find and click on
the <xp:tr> tag that appears inside the repeat control.

In the properties box below you will
need to go to the ‘All Properties’ tab and give the row an ID.

you should see your XPage source update
to reference the new ID

The reason we have to do this is so
that the onClick event has something to latch onto. Without the ID the
table row cannot be referenced by our event. With the <XP:TR> still
selected lets have a look at a new section of the Domino Designer that
we have not touched on yet. The ‘Events’ section. You’ll find it as a tab
next to the ‘Properties’ section.

The events section will show you all
the possible events that you can associate with a XPage control. We are
interested in the onClick event for this particular task so select that
event and have a look at the right side of the tab.

You will see that we have the ability
to write JavaScript code for the client side or the server side and on
the server side we can also select some of the simple actions that IBM
have provided for us. Lets try a simple action. Click on the ‘Add Action’
button.

A dialog box will appear and will actually
default for the task that we have in mind. We want to open a different
XPage so we select the name of the XPage and we wnat to open the document
for reading so set the target document as ‘Open Document’, there are also
options for for ‘Edit Document’ and ‘Create Document’. All we have to do
now it tell it what the document ID is. We will compute this value so select
the diamond and choose ‘Compute Value’ and in the script dialog box we
will use the following code.

If you remember we are inside a repeat
control and rowData is the variable that we can use to refer to the current
entry in the repeat collection that we are working with. rowData.getUniversalID();
returns the UNID for the current document and if we save our XPage and
then preview it in the web browser you will now be able to click on a name
in the table and it will load in the ‘Person’ XPage and show you their
details.

The URL bar in your web browser will
show you your simple action and the DocumentID that your working with.

In the next part I’ll rewrite the onClick
action to put this information into the sessionScope and then use the values
from there in the person xPage instead.

So far our XPages Phonebook application
is really starting to come together, we have designed out layout, shown
you how to display information from a view in the Domino backend on the
XPage using a repeat and also shown how to restrict the view to a single
category. Over the next few parts we will explore the display of a notes
document in the XPage and also explore a different way of linking one XPage
to another without having to pass parameters on the URL like we did to
link the sidebar to the single location XPage.

Lets start by creating a brand new XPage
and Custom Control. Just like we did for the single location XPage and
content_Location custom control we are going to do a little component reusing
by copy/pasting some existing design documents and renaming them. Start
off by copy/pasting the content_Location custom control and then use the
F2 key to rename it to content_Person. Once it’s renamed go into the source
view and remove everything except the ‘lotusContent’ panel, I have added
some additional place holder text so mine now looks like this :

Save and close it and then go to the
XPages view in the design and copy/paste one of the existing XPages and
press F2 to rename it to ‘Person’. Now go into the source of the XPage
and look for the ‘lotusMain’ DIV and change the reference to the existing
custom control to your new custom control. Below I originally copied my
‘Location’ XPage and then changed the reference to the content_Location
custom control.

If we save and close the ‘Person’ XPage
at this stage and preview it you should now see the OneUI layout that we
have created and the place holder text appearing in the main part of the
page.

Now that we have our new XPage and custom
control setup in the next part we’ll associate it with a notes document