Dec's Dom Blog

Tags : Lotus Domino XPages
Bookmark :              

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.

#phonebookBreadcrumb, .phonebookBreadcrumb{
margin-left:10px;
margin-top:10px;
font-size:20px;
color:#000000;
}
#phonebookBreadcrumb a, .phonebookBreadcrumb a{
color:#000000;
}

#phonebookBreadcrumb a:hover, .phonebookBreadcrumb a:hover{
color:#000000;
}

#phonebookBreadcrumb a:visited, .phonebookBreadcrumb a:visited{
color:#000000;
}