Learning XPages Part 9 : Using Values From A Profile Document
Tags : Lotus Domino XPages JavaScript
Bookmark :
When developing web based applications for Domino in the past I have always avoided using hardcoded url's, titles, lables, well basically everything would be an option of some sort stored in a notes document that the owner of the application could edit. In this part of my Learning XPages series I'm going to replace the application title that I'm showing in the titlebar with a value pulled from a profile document. You might ask why bother when It is already softcoded using the database title and it's a good question, my answer, what if the application owner is not the admin and they don;t have access to change the database title.
Before we get started on the XPages code for this section I needed to do a little bit o traditional notes client development. I have added my first form to the database design which I have given an alias of 'prof_AppConfig' and I have added a single field to that form called 'cfg_ApplicationTitle'. I then created a small formula language agent to run from the actions menu with a single line of code that reads @Command([EditProfileDocument];"prof_AppConfig");. Then I went into the application in my notes client, ran the agent and added an application title into the profile document and saved it. We're now ready to get XPages to read in the profile document and use that value for the application title.
Open the layout_TitleBar again and select the computed field that we created earlier that uses the database title for it's value. We are going to be editing it's value so go to the value properties and double click on the blue 'computed value' text to bring up the javascript editor dialog box. Here's the code we are going to use :
var profDoc:NotesDocument = database.getProfileDocument("prof_AppConfig","");
return profDoc.getItemValue("cfg_ApplicationName"){0};
NOTE: Replace the curly brackets with square brackets. Due to the way blogsphere works if won;t display the square brackets correctly.
This is very similar to LotusScript's method of getting a value from a profile document. In the first line we are setting up a new variable called profDoc that is based on the NotesDocument class and we set it to the profile document by calling the database.getprofiledocument method. In the second line we are returning the field we need by using the getItemValue method of the notesdocument. Notice the square brackets with the zero in it? This is the same as getting the first value of the array by using (0) in LotusScript.
When I first implemented this in my application I ran into a CSS issue when the title of my application was more then 200 pixels wide and it resulted in my page looking like this :
As you can see the restricted width of the H2 tag when it appears in the lotusTitleBar div has caused the extra long title to wrap into the next line and it pushed the place bar over. To get around this I need to override the oneUI CSS with my own custom CSS. Open the blank custom.css file that we created when we created the theme and add the following lines :
If you save and close the css and refresh your XPage in the browser then it still won't because we need to make one more change.
When I initially created the Theme document and pointed it to all the external CSS files and the internal custom.css file I listed the custom.css file before all the external OneUI css files. This means that the OneUI css is overriding the custom.css file. You need to edit your theme file and move the resource section for custom.css down below where it loads it's last external css file. Save the theme document and refresh the browser and everything will look perfect.
I'll attach an updated development database to the next part of the series where I'll jump down to the page footer and get it completed before starting on displaying some real live data in the sidebar and main contents.
Bookmark :
When developing web based applications for Domino in the past I have always avoided using hardcoded url's, titles, lables, well basically everything would be an option of some sort stored in a notes document that the owner of the application could edit. In this part of my Learning XPages series I'm going to replace the application title that I'm showing in the titlebar with a value pulled from a profile document. You might ask why bother when It is already softcoded using the database title and it's a good question, my answer, what if the application owner is not the admin and they don;t have access to change the database title.
Before we get started on the XPages code for this section I needed to do a little bit o traditional notes client development. I have added my first form to the database design which I have given an alias of 'prof_AppConfig' and I have added a single field to that form called 'cfg_ApplicationTitle'. I then created a small formula language agent to run from the actions menu with a single line of code that reads @Command([EditProfileDocument];"prof_AppConfig");. Then I went into the application in my notes client, ran the agent and added an application title into the profile document and saved it. We're now ready to get XPages to read in the profile document and use that value for the application title.
Open the layout_TitleBar again and select the computed field that we created earlier that uses the database title for it's value. We are going to be editing it's value so go to the value properties and double click on the blue 'computed value' text to bring up the javascript editor dialog box. Here's the code we are going to use :
var profDoc:NotesDocument = database.getProfileDocument("prof_AppConfig","");
return profDoc.getItemValue("cfg_ApplicationName"){0};
NOTE: Replace the curly brackets with square brackets. Due to the way blogsphere works if won;t display the square brackets correctly.
This is very similar to LotusScript's method of getting a value from a profile document. In the first line we are setting up a new variable called profDoc that is based on the NotesDocument class and we set it to the profile document by calling the database.getprofiledocument method. In the second line we are returning the field we need by using the getItemValue method of the notesdocument. Notice the square brackets with the zero in it? This is the same as getting the first value of the array by using (0) in LotusScript.
When I first implemented this in my application I ran into a CSS issue when the title of my application was more then 200 pixels wide and it resulted in my page looking like this :
As you can see the restricted width of the H2 tag when it appears in the lotusTitleBar div has caused the extra long title to wrap into the next line and it pushed the place bar over. To get around this I need to override the oneUI CSS with my own custom CSS. Open the blank custom.css file that we created when we created the theme and add the following lines :
#lotusTitleBar h2, .lotusTitleBar h2 {
width:auto;
}
If you save and close the css and refresh your XPage in the browser then it still won't because we need to make one more change.
When I initially created the Theme document and pointed it to all the external CSS files and the internal custom.css file I listed the custom.css file before all the external OneUI css files. This means that the OneUI css is overriding the custom.css file. You need to edit your theme file and move the resource section for custom.css down below where it loads it's last external css file. Save the theme document and refresh the browser and everything will look perfect.
I'll attach an updated development database to the next part of the series where I'll jump down to the page footer and get it completed before starting on displaying some real live data in the sidebar and main contents.
Comments
Second, I added a try/catch block to use the actual database title if the profile hasn't been set up or doesn't exist. Here's the code I used:
var dbTitle = "";
try {
var profDoc:NotesDocument = database.getProfileDocument("prof_AppConfig","");
if (profDoc.hasItem("DbTitle")) {
dbTitle = profDoc.getItemValueString("cfg_ApplicationName");
}
} catch (e) {
dbTitle = "";
}
return (dbTitle == "") ? @DbTitle() : dbTitle;
Posted by Matt Holthe At 10:50:51 AM On 02/25/2009 | - Website - |
I did make one small correction to the code you supplied, you do a haasItem for a field called 'DbTitle', it should have been a hasItem for a field called 'cfg_ApplicationTitle'.
Obviously defensive coding is always the better solution, I'll try cover the try/catch in a later part of the series.
Posted by Declan Lynch At 11:15:03 AM On 02/25/2009 | - Website - |
Just a small remark.
The text field name on the profile form is 'cfg_ApplicationTitle'.
So getting the custom title should be
return profDoc.getItemValue("cfg_ApplicationTitle"){0};
Posted by Cristian D'Aloisio At 04:39:54 AM On 03/06/2009 | - Website - |
I love to use profile fields to configure things line page titles. I also love to make it all editable by the customer through a web interface. I've been growing my infrastructure to allow control of the ACL, group creation and editing, and the creation and application of roles. I then use roles to control what navigator links are seen by visitors to the site.
Sounds like this could all be easier with xpages. I've been considering Flex/Flash but I think I better try out xpages first.
Fantastic tutorial series.
Peace,
Rob:-]
Posted by Rob At 12:19:46 AM On 03/12/2009 | - Website - |
By using the Web Dev plug in for Firefox, I found out that its not only the h2 width that can cause this problem, but padding and margin have its influence as well.
By including the following in my custom.css i was able to get same design features without use of Themes
#lotusTitleBar h2, .lotusTitleBar h2 {
font-size:1.5em;
line-height: 2em;
letter-spacing:0;
width:500px;
font-weight:bold;
padding:3px 0 0 12px;
margin: 0 0 0 0;
}
I will use the themes for skin change purposes, but i always aim to get my solutions to work by css features only first
Thanx for a great tutorial.
Posted by Michael Falstrup At 09:24:59 AM On 04/15/2009 | - Website - |