Learning XPages Part 27 : Naming The Breadcrumbs

In our last installment we created our
simple breadcrumb trail using fixed text for the labels and links. In this
part I’m going to dynamically assign the values and then give it a CSS
class to make it fit in well with our application.

Our breadcrumb trail current looks like
‘Home > Location > Person’, The home link can stay as it is but for
location I’d like it to read the name of the location that you are currently
looking at and for person I’d like it to read the name of the person we
are currently looking at.

We we examine the code that we have
already created for the location page we have a script that executes before
the page loads that reads the location= part of the URL and places it in
to a sessionScope variable, Here’s that bit of code as a reminder :

var cgi = new CGIVariables();
var param = cgi.getURLParam("location");
if (param) {
if (param != "" )
sessionScope.locationfilter = param;
}

Instead of trying to do lookups of the
currently open view or document we can very easily use this session variable
for our label so go ahead and open the layout_SideBar custom control and
select the ‘Location’ breadcrumb label and in it’s properties click on
the diamond beside the ‘label’ value and select the computed value option.

In the script dialog we will simply
enter a reference to our sessionScope variable

We can do the exact same for the ‘location’
link but we do need to set a URL for the link to open. After setting the
label for the link look over at the right side of the properties and set
it to open the ‘location’ XPage

But what about adding the ?Location=
part to the URL? Well there is actually no need, the way the beforePageLoads
script above has been written the sessionScope variable is only overwritten
if the URL parameter exists on the URL. This means we can safely open the
location XPage and it will just reuse the current value of the sessionScope
variable. Save and refresh your xPage and try it out.

For the last part of the breadcrumb
trail we could again try do a load of lookups and try evaluate the name
of the person document being looked at but why not make use of the sessionScope
variables again. Lets start by opening the content_Location custom control
and in the source find the <xp:tr> tag that is inside your repeat
control. In part 25 of the series we added an onClick event to the row
and wrote a scripted event that looks like this

I’ve updated this script to look like

sessionScope.personName = rowData.getColumnValue("First
Name") + " " + rowData.getColumnValue("Last Name");
sessionScope.personDocID = rowData.getUniversalID();
context.redirectToPage("Person.xsp");

I have created a new sessionScope variable
called personName and I’m giving it the value of the persons first and
last names with a space inbetween. Now that I have my session Scope variable
I can now compute the value of the final element in my breadcrumb trail.
before I save and close the content_PlaceBar custom control I’m going to
select the panel that I created all my links in and give it a style class
of ‘phonebookBreadcrumb’. The souce of your control should now look similar
to this :

Save and close the Xpage and try out
the breadcrumbs to make sure they are working and then back in designer
open your custom.css file and add the following css that I am going to
use and then refresh your webpage again to see how it looks.