In the first two parts of this servers
we created the new custom control that will contain the login dialog box
and we created the javascript that runs the actual login and processes
the results. In this part of the series we’ll tie everything together
with the login link in our application.
Lets start by opening the layout_Banner
custom control in Domino designer and then in the custom controls pane
on the right of the screen select your ‘layout_banner_Login’ custom control
and drag it into this custom control. Basically we have a custom control
inside a custom control. It doesn;t reall matter where the custom control
appears but I would suggest making sure it is outside the markup used for
the oneUI layout. I have placed mine at the top of the page.
This custom control is only ever going
to be used if the person is not logged in so we can add a formula to the
embedded custom control, select it and then look in the properties area.
Click the diamond beside the visible
property and choose the ‘compute value’ option. For the formula I’m going
to do a simple check to see if the username is anonymous or not. here’s
the code I’m using :
var userName:NotesName
= session.createName(@UserName());
if (userName.getCommon()=="Anonymous")
{
return true;
}
else
{
return false;
}
All that’s left to do is link the login
button to the dojo dialog box. At the moment we have a single link in the
layout_Banner custom control that switched from login to logout as required
thanks to some server side javascript. I have decided to create two links
and just display the correct one, again based on a similar ‘visible’ formula
like the one above. The login link will only appear if the current username
is anonymous and the logout name will only appear if the username is not
anonymous.
To achieve this I have rewritten the
existing link to be my logout link and I have dragged in a new link control
on the same line to be my login link
The logout link is a simple link with
a computed URL that takes the current URL and adds the ‘?logout&redirectTo=’
to the end of it. Here’s the source code for that link
<xp:link escape="true"
id="link2" text="Logout">
<xp:this.value><!DATA[#{javascript:facesContext.getExternalContext().getRequestContextPath()
+ “?logout&redirectTo=” + facesContext.getExternalContext().getRequestContextPath()}></xp:this.value>
</xp:link>
The login link will have an onClick
event that runs on the client side. Select the new link, give it a name
and then switch to the events tab. Select the onClick event and then make
sure you change to the ‘Client’ tab and enter in the following code
Here we call the dojo framework and
tell it to activate the dijit dialogbox with the name of ‘loginDialog’.
Before we save the banner we need to
add in one final div where our login messages will be displayed. I have
placed mine between the OpenNTF logo and the unordered list tags.
At this stage the login dialog will
work but it won’t look good because the dojo widgets need to pickup a css
style from the body tag of the page. The style that we need to use if called
‘tundra’ and to make sure it appears in the <body> tag we need to
add it to every XPage in the application. Open each xPage in your application
( not custom controls ) and in the all properties section add the styleclass
and then save the xPage.
Then we also need to make sure the dojo
css files are loaded by the XPages processor. Again we could do this in
every XPage but there is no need to load in dojo css files unless we have
a dojo element on the page so back in the layout_banner_Login custom control
have a look at the basic properties and set the dojo specific options to
true.
We can now save all the open xpages
and custom controls in the application and refresh our web browser to test
it out…
Clicking the login link now darkens
the background of the page and shows up the dojo dialog box. You can enter
in your username and password and click ‘ok’ and if you have entered in
valid credentials the page will reload with your logged in, if not the
dialog box will disappear and the error message will appear.
If you want to change the background
color of the overlay you can add the following css to your custom.css file
#loginDialog_underlay {background-color:black;}
And that’s it, a nicer web 2.0 style
ajax login for an xpages application using dojo Widgits and dojo Ajax calls.
Dec's Dom Blog 
Hi, nice tutorial, but it doesn’t work at all in my case. First I tried to do it 1 on 1 refering to your tutorial, now I’ve tried to use only parts of it.But it doesn’t work in both cases. Shouldn’t be any negative response to you Steve. But all I need is a DialogBox, which opens by clicking a button.May someone give me a second link to a tutorial, which is a bit easier?Thanks =)
LikeLike
Hi. Thanks for your tips. In my case it did not work either A few traps I found – but it did not help:Part I -> Code do copy/paste was not correct:execute=”dominoLogin(arguments;”><table>Part II -> Could your domain be deleted? The third argument is optional:dojo.cookie(‘DomAuthSessId’, null, { path: ‘/’, domain: ‘qtzar.com’ });dojo.cookie(‘LtpaToken’, null, { path: ‘/’, domain: ‘qtzar.com’ });} else { Part II -> Any advices how to debug such scripts?Part III -> This copy/paste section has missing [[<xp:this.value><!DATA[#{javascript:facesContext.getExternalContext().getRequestContextPath() + “?logout&redirectTo=” + facesContext.getExternalContext().getRequestContextPath()}>Another 2 questions:Would you still need domcfg.nsf with this solution? How is the the input part hidden before clicking the Login-Link?
LikeLike
works perfectly for me (once a few typos are corrected). Now trying to adapt it on domcfg to be able to login using a dijit Dialog even if Anonymous is set to no access.thanks for the help this is real good.
LikeLike
By the way, i suggest using a txt file on the server root rather than an image. It seems IE 6 and 7 dont feel too good with getting a binary response (it doesnt work).If you replace searching GIF at the beginning of a gif file by, for example, searching LOGIN at the beginning of a text file, it works perfectly on IE.I used your solution even when anynymous is no access. (by redirecting the domcfg login form to an xpage with the popup login). Works like a charm.what would be nice to have now is to remember login/password. Not sur it is possible though, with Domino.
LikeLike
A small question: now when loading page in IE it briefly shows the overlay-body on normal screen. Did I do something wrong or is it in general not possible to really hide Overlay-body at loading screen?
Thanks for your tutorials! Big fan
LikeLike
Good tutorial. Thanks
LikeLike