Learning XPages Part 13 : Listing The Locations In The Sidebar
Tags : Lotus Domino XPages OneUI Menu Repeat
Bookmark :
So our new custom control is ready and is embedded in the layout, now comes the fun part, making it display some real data from the backend domino database. This list of locations is like the main menu in our application so I'm going to style it using OneUI and then show you how to use a repeat control to display the list of locations.
Lets start by opening our sb_LocationsList custom control again. Get rid of the placeholder text and drag over THREE, yes 3, nested panels, you'll need to give each of these panels a styleclass in the following order : lotusMenu, lotusBottomCorner, and lotusInner. Your current XPages code should look something like this :
and if you save and refresh your page you should now see the basic menu layout appearing in your sidebar.
Lets add some content using one of the most powerful features of XPages. The Repeat Control. The repeat control, as it's name implies, allows you to repeat whatever is inside the repeat control any number of times. You can have a single control inside the repeat control, you can have multiple controls inside a repeat control, you can have custom controls inside and repeat control and you can even have repeat controls inside repeat controls. Once you start working with repeat controls you will NEVER go back to traditional Domino web application design, in just minutes to you build part of your web application when it would have taken days worth of view design, LotusScript and debugging the old way.
We are going to be repeating information from one of the views that I created in the database so we need to tell the XPage where to find the data. To do this we first need to define a data source. If you look at the outline for the XPage on the left side of your screen you will see one of the outline entries called 'Custom Control', if we were dealing with an actual XPage then this would say 'XPage'. They are both the same. Select it and you'll see the properties for the XPage/Control.
We are going to add a new data source based on a domino view. Select the ADD button and select Domino View to get started. A new section will appear to the right of the datasources properties box where you can select the view that you want to use.
I have select the Locations lookup view that I created and I have called my data source DominoView.
Now drag in a repeat control from the control pane on the right of the screen into the panels that we created earlier and then drag a computed field control into the repeat control. We'll just use the computed field control to explain how to use the repeat, in the next part we'll replace it with something a bit nicer that fits in with the menu style.
Go back to the repeat control so you can see it's properties, it may already have the binding source listed, we then need to add in some extra options so we can get to the data source.
The collection name is the variable that we can use to get to the documents and the index name is a count of the current entry. We are just going to be using rowData for this example of the repeat control.
Now click on the computed field and look at it's value properties. we are going to bind the data using JavaScript so click the JavaScript radio button and then click on the button to bring up the editor. Here's the JavaScript we are going to use :
rowData is the collection name we defined in the repeat control's properties and getColumnValue is exactly like the lotusScript method that you can use on a NotesViewEntry.
Save and refresh the page and you should see something similar to this depending on what data you have in your database.
As you can see it does not look great yet so in the next part we will tidy it up and make if look more useful even though it does not link to anything yet.
Bookmark :
So our new custom control is ready and is embedded in the layout, now comes the fun part, making it display some real data from the backend domino database. This list of locations is like the main menu in our application so I'm going to style it using OneUI and then show you how to use a repeat control to display the list of locations.
Lets start by opening our sb_LocationsList custom control again. Get rid of the placeholder text and drag over THREE, yes 3, nested panels, you'll need to give each of these panels a styleclass in the following order : lotusMenu, lotusBottomCorner, and lotusInner. Your current XPages code should look something like this :
and if you save and refresh your page you should now see the basic menu layout appearing in your sidebar.
Lets add some content using one of the most powerful features of XPages. The Repeat Control. The repeat control, as it's name implies, allows you to repeat whatever is inside the repeat control any number of times. You can have a single control inside the repeat control, you can have multiple controls inside a repeat control, you can have custom controls inside and repeat control and you can even have repeat controls inside repeat controls. Once you start working with repeat controls you will NEVER go back to traditional Domino web application design, in just minutes to you build part of your web application when it would have taken days worth of view design, LotusScript and debugging the old way.
We are going to be repeating information from one of the views that I created in the database so we need to tell the XPage where to find the data. To do this we first need to define a data source. If you look at the outline for the XPage on the left side of your screen you will see one of the outline entries called 'Custom Control', if we were dealing with an actual XPage then this would say 'XPage'. They are both the same. Select it and you'll see the properties for the XPage/Control.
We are going to add a new data source based on a domino view. Select the ADD button and select Domino View to get started. A new section will appear to the right of the datasources properties box where you can select the view that you want to use.
I have select the Locations lookup view that I created and I have called my data source DominoView.
Now drag in a repeat control from the control pane on the right of the screen into the panels that we created earlier and then drag a computed field control into the repeat control. We'll just use the computed field control to explain how to use the repeat, in the next part we'll replace it with something a bit nicer that fits in with the menu style.
Go back to the repeat control so you can see it's properties, it may already have the binding source listed, we then need to add in some extra options so we can get to the data source.
The collection name is the variable that we can use to get to the documents and the index name is a count of the current entry. We are just going to be using rowData for this example of the repeat control.
Now click on the computed field and look at it's value properties. we are going to bind the data using JavaScript so click the JavaScript radio button and then click on the button to bring up the editor. Here's the JavaScript we are going to use :
rowData.getColumnValue("Location")
rowData is the collection name we defined in the repeat control's properties and getColumnValue is exactly like the lotusScript method that you can use on a NotesViewEntry.
Save and refresh the page and you should see something similar to this depending on what data you have in your database.
As you can see it does not look great yet so in the next part we will tidy it up and make if look more useful even though it does not link to anything yet.
Comments
Posted by Patrick Kwinten At 02:00:23 PM On 02/26/2009 | - Website - |
Data source: rowData
Bind To: Location
Just curious...
Posted by John Parker At 03:53:25 PM On 04/08/2009 | - Website - |