Learning XPages Part 26 : Dropping Some Breadcrumbs
Tags : Lotus Domino XPages
Bookmark :
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.
Bookmark :
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.
Comments
- John
Posted by John Mackey At 06:25:56 PM On 03/02/2009 | - Website - |
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
Posted by Tom Steenbergen At 10:32:14 AM On 03/13/2009 | - Website - |
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.
Posted by Declan Lynch At 10:38:00 AM On 03/13/2009 | - Website - |