Learning XPages Part 26 : Dropping Some Breadcrumbs

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.