Learning XPages Part 21 : Linking The Sidebar To The Location XPage
Tags : Lotus Domino XPages Links
Bookmark :
By now we have a 'Home' XPage and a 'Location' XPage but they are not yet linked to each other. In this part we will change our sidebar list of locations into links so that our users can click on a location in the sidebar and be brought to the correct page with the location being passed on the URL.
Lets start by opening the SB_LocationsList custom Control that we created earlier. At the moment we have a repeat control that repeats the items in our Locations lookup view in the domino database. It currently looks like this :
I decided I wanted to make the list look slightly different and I found a few extra components in the OneUI CCS files that I could use. Lets start by adding a title to the menu. Drag a new panel into your XPage so that it is inside the 'lotusInner' panel. You will need to make sure it appears in the right place so have a look at your XPage source.
Here you can see it appearing just below my original 'lotusInner' panel. I have given it a styleClass of 'lotusMenuSection' and inside of that I have placed my menu title surrounded by <h3> tags. You can save the custom control right now and refresh your page to test it. You should see your title with a green line below it seperating it from the rest of the menu, check the screenshots below to see what I mean.
Now lets drag in another panel below that one and give it a styleClass of 'lotusMenuSubsection'
And then in your XPages source select the repeat tags and everything between them and move it all into that panel. At the moment your repeated control is just a computed field surrounded by H3 tags. I'm going to make some real links now so drag a Link control from the controls panel into the XPage and place it beside the computed field control, you can now delete the computed control field as we don;t need it any more.. If you look at the properties for the link you can see a 'label' property. We'll set that as a computed value by clicking the blue diamond and using the code rowData.getColumnValue("Location") in the javascript dialog box. Then on the right side of the properties we are going to select the 'Open Page' option and choose the 'Locations' page from the dropdown box.
So now it knows to open the locations XPage but how do we get the ?location= bit onto the URL. Lets go to the 'All Properties' of the link control. If you scroll down to the data section you'll see the reference to location.xsp, this is where the 'Open Page' value we selected in the step above is stored in the All properties. Above that you'll see 'Parameters' select that row and two small buttons will appear, the first button adds a parameter so click on it and a new parameter will appear. Give the parameter a name of 'location' and for value we need to compute it so click the blue diamond and enter in the exact same code that we are using for the links label into the script dialog box.
If we save and refresh our home.xps XPage in a web browser our links are now working and clicking on any of the labels will bring us to the Locations XPage with the parameter being passed on the URL.
I wasn't too happy with the <h3> tags styling once I had converted the original computed fields into links so I went into the XPages source and changed them to <li> tags and I wrapped the repeat control in a <ul> tag.
Our links list now looks like this and is much nicer.
Here is the latest download of the sample database. I have added a new agent that you can run from the Notes Client side called 'Build Sample Data' that you can run from the actions menu that will create 10 location documents and 1000 random person documents. the agent Does not fill in all the details for the person docs yet but it's a great start for getting some random data in there. ( if anybody wants to update that agent to provide random addresses and phone numbers then feel free )
Bookmark :
By now we have a 'Home' XPage and a 'Location' XPage but they are not yet linked to each other. In this part we will change our sidebar list of locations into links so that our users can click on a location in the sidebar and be brought to the correct page with the location being passed on the URL.
Lets start by opening the SB_LocationsList custom Control that we created earlier. At the moment we have a repeat control that repeats the items in our Locations lookup view in the domino database. It currently looks like this :
I decided I wanted to make the list look slightly different and I found a few extra components in the OneUI CCS files that I could use. Lets start by adding a title to the menu. Drag a new panel into your XPage so that it is inside the 'lotusInner' panel. You will need to make sure it appears in the right place so have a look at your XPage source.
Here you can see it appearing just below my original 'lotusInner' panel. I have given it a styleClass of 'lotusMenuSection' and inside of that I have placed my menu title surrounded by <h3> tags. You can save the custom control right now and refresh your page to test it. You should see your title with a green line below it seperating it from the rest of the menu, check the screenshots below to see what I mean.
Now lets drag in another panel below that one and give it a styleClass of 'lotusMenuSubsection'
And then in your XPages source select the repeat tags and everything between them and move it all into that panel. At the moment your repeated control is just a computed field surrounded by H3 tags. I'm going to make some real links now so drag a Link control from the controls panel into the XPage and place it beside the computed field control, you can now delete the computed control field as we don;t need it any more.. If you look at the properties for the link you can see a 'label' property. We'll set that as a computed value by clicking the blue diamond and using the code rowData.getColumnValue("Location") in the javascript dialog box. Then on the right side of the properties we are going to select the 'Open Page' option and choose the 'Locations' page from the dropdown box.
So now it knows to open the locations XPage but how do we get the ?location= bit onto the URL. Lets go to the 'All Properties' of the link control. If you scroll down to the data section you'll see the reference to location.xsp, this is where the 'Open Page' value we selected in the step above is stored in the All properties. Above that you'll see 'Parameters' select that row and two small buttons will appear, the first button adds a parameter so click on it and a new parameter will appear. Give the parameter a name of 'location' and for value we need to compute it so click the blue diamond and enter in the exact same code that we are using for the links label into the script dialog box.
If we save and refresh our home.xps XPage in a web browser our links are now working and clicking on any of the labels will bring us to the Locations XPage with the parameter being passed on the URL.
I wasn't too happy with the <h3> tags styling once I had converted the original computed fields into links so I went into the XPages source and changed them to <li> tags and I wrapped the repeat control in a <ul> tag.
Our links list now looks like this and is much nicer.
Here is the latest download of the sample database. I have added a new agent that you can run from the Notes Client side called 'Build Sample Data' that you can run from the actions menu that will create 10 location documents and 1000 random person documents. the agent Does not fill in all the details for the person docs yet but it's a great start for getting some random data in there. ( if anybody wants to update that agent to provide random addresses and phone numbers then feel free )
Download File xPhonep21.zip
Comments
Quick question though, when selecting data sources or even view controls you seem to have to select a database location i.e. filepath.
Can this be computed from a profile document etc? What happens when the filepath changes?
Posted by Mark Barton At 06:04:09 AM On 03/01/2009 | - Website - |