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.

A picture named M2

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

A picture named M3

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 picture named M4

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.

A picture named M5

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.

A picture named M6

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

A picture named M7

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.

A picture named M8

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.

A picture named M9

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.

A picture named M10

A picture named M11

A picture named M12

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

Advertisements
Tagged with: , ,
Posted in None
3 comments on “Learning XPages Part 26 : Dropping Some Breadcrumbs
  1. John Mackey says:

    Hi Declan, I like the breadcrumb custom control. Nice example!- John

    Like

  2. Hi Declan,I felt lazy and not wanting to repeat all the steps for the display of the parts of the breadcrumbs, I copied and pasted the supplied code.But that raises an error. All the <!DATA[#{javascript:….}> bits must be<![CDATA[#{javascript:….}]]>Looking at the consistency of the error in the supplied code you probably did it on purpose , right ?

    Like

  3. Declan Lynch says:

    Tom,

    I copied and pasted the code right from my working datbase in to blogsphere butI forgot the square bracket is a reseved character in the blogsphere richtext to mime convertor and it did some funky stuff. Sorry about that.

    Like

Comments are closed.

Archives
%d bloggers like this: