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.
Great series so far, Declan. A couple things to point out. Instead of going the array route, you could use “GetItemValueString” to pull out the database title.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;
LikeLike
Thanks for the suggestion. I have added it to the sample database and will be available in the next download.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.
LikeLike
Hi and thanks again for this series .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};
LikeLike
This is awesome code!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:-]
LikeLike
Another solution to the mishap between the TitleBar and PanelBar, is simply to take control of the CSS style.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.
LikeLike