This article will try to show you a way, how to create dynamic view display, using XPages.
Topics:
1. Customizing view source
2. Customizing column headers
3. Customizing search options
4. Advanced customizing
1. Customizing view source
First create a new xpage for testing purposes.
Drag a view from the controls palette to your xpage! It will ask you for a view from your current application OR you can select a different application from your server, and a different view.
Try either of the options, and after it look at the source code!
You will se something like this:
xp:key="headerPager" id="pager1">
databaseName="myServer!!myDirectory\myDb.nsf"
viewName="myView">
....
Stop here for a moment and analyze what we see.
rows="30" - the user will see 30 rows of myView when opening this xpage.
We may want to change this value. But the users use different size monitors and different sized browser windows, so we may want to use a user profile value here. So it will look like this: rows="${javascript:return getProfileField("userprofile", "maxLineOfRows", session.getEffectiveUserName());}" (getProfileField() is not an XPage function, it is custom, but anyone can create it with little notes experience)
databaseName="myServer!!myDirectory\myDb.nsf" - So our view can be found in myServer at myDirectory in myDb.nsf.
viewName="myView" - The view data comes from myView
Here comes the real dynamic content. We can set the source of the view by server, db location and even the name of the datasource view!
At this point we can choose where to get these values from.
- We can use the user profile. But do we really want the user to set these values for himself/herself? Consider this.
- We can user application profile. But I wouldn't recommend, since after each profile modification you will have to restart the http task (because the profile is cached and you won't see the changes, when you modify the profile).
- We can also user properties files (this would be the best option).
Using the properties files, the easiest way is to add a boundle resource to our xpage:
Using this boundle resource is very easy. So after a bit modification, the code fo the view will look like this:
viewName="${javascript:return myProps.getString('viewName');}"
databaseName="${javascript: return myProps.getString('serverName') + '!!'+ myProps.getString('applicationPath');}"
And our properties file will look like this:
viewName=myView
serverName=myServer
applicationPath=myDirectory\myDb.nsf
So we have got our first set of code changes, let's what it looks like:
rows="${javascript:return getProfileField("userprofile", "maxLineOfRows", session.getEffectiveUserName());}" id="viewPanel1">
xp:key="headerPager" id="pager1">
viewName="${javascript:return myProps.getString('viewName');}"
databaseName="${javascript: return myProps.getString('serverName') + '!!'+ myProps.getString('applicationPath');}"
....
2. Customizing column headers
You may want to change the headers of the columns differnt to the originals. It can be done easily using the domino designer's design page. But hey! We were talking about dynamic views. So we will change these column header values (easy step). First the question is very much the same as in the previous point: where to get the header information from?
Profile or properties?
AGAIN: use properties files! Not just because you can easily use them, but having them as a boundle resource will give you the ability, to create a new language localization for your application.
Stop here for a moment, and talk about these boundle resources! We already have a boundle resource on our xpage:
This defines a standard Java boundle resource file! This means, that besides the application.properties file, your boundle will use the different language versions of your properties file.
So besides the application.properties you may have an application_en_US.properties and an application_fr_FR.properties files, and you don't have to declare them separetly, because the boundle resource will also read these files, and give you back the needed values based on the localization settings of your clien/browser!
You may want to have a different properties file, for the titles, than the application settings:
Now look at a view column's code:
We can easily give our header a new title:
At this point our code will look like this:
rows="${javascript:return getProfileField("userprofile", "maxLineOfRows", session.getEffectiveUserName());}" id="viewPanel1">
xp:key="headerPager" id="pager1">
viewName="${javascript:return myProps.getString('viewName');}"
databaseName="${javascript: return myProps.getString('serverName') + '!!'+ myProps.getString('applicationPath');}"
....
3. Customizing search options
You may want to add the ability for the users to search in the view. At this part of the article, I won't write down all the options, just the full text search ability (you may see the 4. part of the article, when I have time to finish it :)), the other options will be in the 4. section of the article.
To add the search ability to our view we need the following:
1. Full text indexed application
2. An inputtext field for the filter
3. A hidden inputtext after the first field, to prevent Enter -based submit.
4. A button, that will only do an AJAX page refresh.
5. Search property for the view data
For the first point, I don't want to add any comment, you can create the full text index from your notes client at the database properties.
2 + 3 + 4.:
So we have the two input fields and the button. We will need to add the AJAX refresh to our button (and some dojo usage):
refreshMode="partial" refreshId="viewPanel1">
So this button will refresh our view. But here we use dojo, so we need to include it on the resources part of our xpage:
OK, one point of the code we are still missing, the search:
1. Select the view panel! go to the properties -> All properties -> data -> data ->
We will se here lots of properties, but at this section I will only write about one:
search - this property will give us the full text search ability for the view
Add this code to it:
search="#{javascript:return getComponent('myField').getValue();}"
So how will this work?
1. The user enters some search criteria to the input text field.
2. He/she pushes the button, and it will do an AJAX refresh on the view
3. During th refresh, the view will use the input entered to the field for a full text serach criteria
4. The results will be rendered
So our code at this point will look like this:
refreshMode="partial" refreshId="viewPanel1">
rows="${javascript:return getProfileField("userprofile", "maxLineOfRows", session.getEffectiveUserName());}" id="viewPanel1">
xp:key="headerPager" id="pager1">
search="#{javascript:return getComponent('myField').getValue();}"
viewName="${javascript:return myProps.getString('viewName');}"
databaseName="${javascript: return myProps.getString('serverName') + '!!'+ myProps.getString('applicationPath');}"
....