Learning Xpages Part 47 : Using A View Control To List Locations
Tags : Lotus Domino XPages View Control
Bookmark :
When displaying the list of location son the home page I used a repeat control inside a table. This allowed me to add additional features such as the hover effect on each row of the table and gave the use the ability to click anywhere in the row due to it's onClick event. Another way to display information from a view in an Xpage is to use a View Control. I'm going to use one here so you can see how to set it up.
Lets open the content_locationAdmin custom control. You should have a nice blank custom control containing a single panel. Into this panel we'll drag a View Control. You'll find it on the right side of your screen in the container controls section.
When you release the mouse button a helper dialog box will appear which will help you link the view control to a data source. From the current database select the vw_Locations view. you should see all the columns in that view appear below. You can unselect any of the columns that you don't want to appear on the Xpage.
Once you click OK you'll see your new view control with a pager already built in. You can save your control and preview it in the web browser to see your basic view.
I'd like the phonebook editor to be able to click on a location document from the view and have it automatically be put into edit mode. I'd also like to add a checkbox to each row so that the phonebook editor can select a number of documents for deletion. Click on the first column of the view control, The properties will switch to the columns properties and in the main area you'll see some column options.
I have simply turned on the 'Checkbox' and 'Show As Links' options. Now saving the xPage and previewing it makes it look like this :
To make sure the document opening in the correct XPage go back to the overall View control properties and you can tell it how you want to open the document
I'd like to make my view control look a bit nicer so I have added the following to my custom CSS file :
and for the properties of the view control I have set this new style as the styleClass for the control and I have reused the existing styleclass of phonebook for the data table section
It now looks like this in the browser
In the next part I will show you how to link the checkboxes to the delete action button.
Bookmark :
When displaying the list of location son the home page I used a repeat control inside a table. This allowed me to add additional features such as the hover effect on each row of the table and gave the use the ability to click anywhere in the row due to it's onClick event. Another way to display information from a view in an Xpage is to use a View Control. I'm going to use one here so you can see how to set it up.
Lets open the content_locationAdmin custom control. You should have a nice blank custom control containing a single panel. Into this panel we'll drag a View Control. You'll find it on the right side of your screen in the container controls section.
When you release the mouse button a helper dialog box will appear which will help you link the view control to a data source. From the current database select the vw_Locations view. you should see all the columns in that view appear below. You can unselect any of the columns that you don't want to appear on the Xpage.
Once you click OK you'll see your new view control with a pager already built in. You can save your control and preview it in the web browser to see your basic view.
I'd like the phonebook editor to be able to click on a location document from the view and have it automatically be put into edit mode. I'd also like to add a checkbox to each row so that the phonebook editor can select a number of documents for deletion. Click on the first column of the view control, The properties will switch to the columns properties and in the main area you'll see some column options.
I have simply turned on the 'Checkbox' and 'Show As Links' options. Now saving the xPage and previewing it makes it look like this :
To make sure the document opening in the correct XPage go back to the overall View control properties and you can tell it how you want to open the document
I'd like to make my view control look a bit nicer so I have added the following to my custom CSS file :
#phonebookvc,.phonebookvc {
width:100%;
}
and for the properties of the view control I have set this new style as the styleClass for the control and I have reused the existing styleclass of phonebook for the data table section
It now looks like this in the browser
In the next part I will show you how to link the checkboxes to the delete action button.
Comments