Learning XPages Part 6 : Showing The Username In The Banner
Tags : lotus domino xpages javascript
Bookmark :
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.
Bookmark :
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 :
var userName:NotesName = session.createName(@UserName());
return(userName.getCommon());
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.
Comments
Just following along and for some reason I can't get the lotusRightCorner class to work on the panel. Whats strange is some of the styles must be working e.g. the list items have rendered correctly.
Do you have a live demo available so I can view the rendered source?
Mark
Posted by Mark Barton At 06:55:04 AM On 02/24/2009 | - Website - |
First dragging controls is a PITA when other elements are not visibile i.e. DIVs. I hadn't placed my Panels inside the lotusBanner DIV. IBM should look at Adobe Flex builder to see how this should be done. I can't seem to drag these controls into the source view
I hadn't realised the panel controls are actually nested i.e. the image panel container needs to be inside the righthand one.
Finally the DIV surrounding the Banner should have a class of lotusBanner not an ID (and not a styleClass - not sure what the difference between them is)
I noticed the IBM theme seems to duplicate in allot of places the class and IDs so you could use either but not in this case.
For reference heres the control source I ended up with:
<div id="lotusBanner">
<xp:panel styleClass="lotusRightCorner">
<xp:panel styleClass="lotusInner">
<xp:image url="/bar_chart_24.gif"
alt="#{javascript:database.getTitle()}" styleClass="lotusLogo">
</xp:image>
<ul class="lotusInlinelist">
<li class="lotusFirst"> First List Item</li>
<li> Second List Item</li>
</ul>
</xp:panel>
</xp:panel>
</div>
Posted by Mark Barton At 07:29:49 AM On 02/24/2009 | - Website - |
NB as I mentioned the
<div id="lotusBanner">
needs to be
<div class="lotusBanner">
Posted by Mark Barton At 08:01:28 AM On 02/24/2009 | - Website - |
I think lesson six need to be more explicit about where the panels go. Maybe a good place for a screenshot of the outline view.
Thanks Again this is just what people need to get started.
Elijah
Posted by Elijah Lapson At 12:41:55 PM On 02/24/2009 | - Website - |