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.

So far in our application I have not done
anything with the ‘PlaceBar’. It still has the original placeholder text
that we gave it back when we were designing the initial layout for the
application.

I have decided that I’d like to display
some breadcrumbs in this section. For those that don’t know breadcrumbs
refers to a method of navigation used by website that as you progress deeper
into the structure of the application you are laying a trail of links that
you can follow backwards to return to where you came from. Breadcrumbs
normally take on the structure of ‘Homepage > Section > Subsection’
and this matches up with our application in the form of ‘Locations >
Location > Person’. As you can see we use the > symbol to separate
each section.

Lets start off the process of creating
the breadcrumbs using some placeholder text that we’ll replace in the next
part of the series with some real content. The reason I’m going to do this
is so I can show you how we can pass information into the PlaceBar custom
control so that we can turn on and off different aspects of the breadcrumb
trail. lets start by opening the layout_PlaceBar custom control and in
the source view remove the placeholder text. Switch back to the design
view and drag in a panel and into that panel drag in a combinations of
labels and links

I then switched to the source view again
to make sure that the panel was between the ‘lotusPlaceBar’ div and i changed
some of the values for the lables and links. You’ll notice that the ‘Home’
and ‘Location’ sections of the breadcrumbs have both a label and a link.
The reason for this is when we’re at the homepage of the application you
don’t need a link back to the homepage so we’ll just display the label
but when we are at a location we need to display a link to the homepage.

Now that we have the labels and links
setup Lets look at a way to only show certain ones at certain time. The
method I’m going to use is just one of many that you could employ, I’ve
decided to do it this way so that I can show you another feature that use
can use when your developing XPage Application.

If you look at the main properties for
the layout_PlaceBar cusotm control there is a section called Property Definition.

A property is a value that you can pass
into the custom control when you include it in an XPage. I’m going to create
two properties, showLocCrumb and showPerCrumb. They are going to be a type
of string and that’s all I’m going to change in the properties.

Save and close the layout_PlaceBar and
go to your XPages view in the domino designer and open the ‘Home’ XPage.
You’ll see the placebar custom control on the page and if you select it
and look at the all properties tab for the control you’ll see our two new
custom properties.

Lets just type ‘No’ into both of these
and then switch to the source view so you can see how it is represented
there.

Save and close the XPage and then do
the exact same for the ‘Location’ Xpage and the ‘Person’ XPage with the
location XPages properties set to Yes, No and the Person’s XPage properties
set to Yes, Yes. Once you have done that we are ready  to use the
properties in the layout_PlaceBar custom control so open that back up.

Let’s start from the end of the breadcrumb
bar and select the label for ‘person’. In it’s properties there is a tickbox
for ‘Visible’, By default is is ticked on but there is also a diamond on
the end of the property which means that we can compute if the control
is going to be visible or not.

Think about your hide-when formulas
in traditional domino development and then reverse your thinking, this
is a ‘Show When’ computation and in this case we want to show the lable
when the showPerCrumb property is set to ‘Yes’ so select the diamond and
click the compute value option to bring up the script entry box.

compositeData gives me access to the
properties that I passed into the custom control and the simple == ‘Yes’
is a shorthand way to return a true or false value. You can apply this
same ‘Show When’ code the the label preceding the ‘person’ label.

For all the other components you will
need to write the appropriate evaluations to return either a true or false
value. In javaScript you do an AND buy using two & symbols and you
do an OR by using two | symbols. here is the final XPage source that I
ended up with after writing all my ‘Show When’ code.

<xp:label value="Home"
id="label1">
<xp:this.rendered><!DATA[#{javascript:compositeData.showLocCrumb
== “No” && compositeData.showPerCrumb == “No”}></xp:this.rendered>
</xp:label>
<xp:link escape="true" text="Home" id="link1">
<xp:this.rendered><!DATA[#{javascript:compositeData.showLocCrumb
== “Yes” || compositeData.showPerCrumb == “Yes”}></xp:this.rendered>
</xp:link>
<xp:label value="  >  " id="label2">
<xp:this.rendered><!DATA[#{javascript:compositeData.showLocCrumb
== “Yes”}></xp:this.rendered>
</xp:label>
<xp:label value="Location" id="label4">
<xp:this.rendered><!DATA[#{javascript:compositeData.showLocCrumb
== “Yes” && compositeData.showPerCrumb == “No”}></xp:this.rendered>
</xp:label>
<xp:link escape="true" text="Location" id="link2">
<xp:this.rendered><!DATA[#{javascript:compositeData.showPerCrumb
== “Yes”}></xp:this.rendered>
</xp:link>
<xp:label value="  >  " id="label3">
<xp:this.rendered><!DATA[#{javascript:compositeData.showPerCrumb
== “Yes”}></xp:this.rendered>
</xp:label>
<xp:label value="Person" id="label5">
<xp:this.rendered><!DATA[#{javascript:compositeData.showPerCrumb
== “Yes”}></xp:this.rendered>
</xp:label>

If you now Save and close the custom
control you should be able to refresh your XPage and see the different
components of the breadcrumb bar appear as you progress through the application
with the last part of the breadcrumb bar being a label instead of being
a link.

In the next part we’ll dynamically give
the links and labels some real values.