Learning XPages Part 6 : Showing The Username In The Banner

In the last part we set the groundwork
for the banner section of our application and added a small graphic to
the left side of the banner. In this part we are going to build the links
on the right side of the banner and show how we can use some server side
javascript to determin if we should show a login link or a logout link.

Examining the sample XPage applications
that use the OneUI interface we see that the right side of the banner is
made up of an unordered list with a special style class. In the XPages
designer there is no easy control to drag over to the XPage to create the
list so you need to rely on your basic HTML skills to get you started.
First open the layout_Banner custom control that you have created from
earlier and put it into the source view. You should see the control that
we created for the image in the last part, it will look something like
this <xp:image url="/OpenNTF.jpg" id="lotusLogo"
alt="OpenNTF" styleClass="lotusLogo"></xp:image>.
We will add in our basic unordered list below this, add in a new line and
paste the following html directly into the source view :

<ul class="lotusInlinelist">

<li class="lotusFirst">

First List Item

</li>

<li>

Second List Item

</li>

</ul>

The ul class name of ‘lotusInlinelist’
is defined in the oneUI css as a horizontal list. List items in this class
of list have been defined to have a left side border of 1 pixel however
that would look a little out of place on the first item in the list so
the class name of ‘lotusFirst’ overrides this css behavior and ensures
that the first item does not display the left side border. If you switch
back to the design view of the XPage you can see you list or you could
save the XPage and preview it in your browser to see how it’s going to
look.

Now that we have the basic list in place
we can replace our placeholder text with some XPages controls and write
some code to make them display what we need. lets start with the first
list item. For the moment we would like this to be a simple computed text
field that displays either ‘anonymous’ or the users common name depending
on if they are logged in or not. Remove the first bit of placeholder text
and then drag over the ‘Computed Field’ control from your controls list
on the right side of your screen. Once it’s in the correct place on the
list we can have a look at it’s properties. Don’t worry about the controls
name and make sure the ‘visible’ option is enabled and then go to the ‘Value’
tab of the properties. You will see a reminder hint that you need to bind
the value to something, you can ignore this, we are going to use some server
side JavaScript to work out the value.

Select the JavaScript option and then
click on the ‘Edit Script’ button to bring up the JavaScript editor. here
is the JavaScript that we are going to use :

If you have done any LotusScript code
in the past then you can very quickly see that we are creating a new object
called userName based on the NotesName class and setting it to the notes
name of the user who is currently logged in on the session. In LotusScript
we would look at NotesSession.Username() but here we have an @UserName()
which is based on formula language. Yes, your existing LotusScript and
Formula language skills are certainly not going to waste, you’ll just learn
a new way to put them to use.

Lets save the XPage and refresh the
preview in the browser and see what we have.

In the next part we’ll do the second
list item. It’s pretty much the same as the first list item but there is
a little more JavaScript to deal with.