Companies are migrating over to XPages creating cool user interfaces. However, your first impression may be the servers default login form which is done in classic Notes. You want to make a great first impression. I’ll show you how I did this.
There are a few setup steps.
1) To enable this functionality, please follow this help document to install the plumbing. This IBM page will help you.
You essentially end up with a database called Domino Web Server Configuration domcfg.nsf.
You’ll need to create a document in this database for the domain the users will access and the name of the Notes Form to show when a user first hits the server to authenticate. This sign in Form your creating will be in the domcfg.nsf database. You can create custom sign in forms for different URLs.
2. Open domcfg.nsf in designer. Create a new Form. Name it anything you want. I personally stay away from spaces when naming design elements. I called mine ‘signin’.
Copy and past this text into the Form and make it Pass-Thru HTML
<!-- $$HTMLFrontMatter hidden field up here to set DOCTYPE --> </form> <div class="container"> <form action="/names.nsf?Login" method="post"> <h2>Please sign in</h2> <input type="text" name="username" placeholder="Email address" autofocus> <input type="password" name="password" placeholder="Password"> <button type="submit">Sign in</button> <!--- Notes Hidden fields go here --> RedirectTo html attribute type="hidden" but not hidden from the browser $PublicAccess, ReasonType, $$HTMLTagAttributes </form> </div> <!-- /container -->
Copy and past this text into the Form HTML Head Count object
" <meta charset=\"utf-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <meta name=\"description\" content=\"\"> <meta name=\"author\" content=\"\"> <link rel=\"shortcut icon\" href=\"/" + @WebDbName + "/favicon.ico\"> <title>Sign in</title> <!-- Bootstrap core CSS --> <link href=\"/" + @WebDbName + "/bootstrap/css/bootstrap-signin.css\" rel=\"stylesheet\"> <!-- Custom styles for this template --> <link href=\"/" + @WebDbName + "/bootstrap/css/signin.css\" rel=\"stylesheet\"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src=\"http://getbootstrap.com/assets/js/html5shiv.js\"></script> <script src=\"http://getbootstrap.com/assets/js/respond.min.js\"></script> <![endif]-->"
Create four text fields and make sure they are within the <form> tags we are creating.
RedirectTo with Default Value “/”
$PublicAccess with Default Value ’1″
ReasonType with Default Value “0″
$$HTMLTagAttributes with Default Value “lang=\”en\” ”
$$HTMLFrontMatter as computed for display, hidden from Notes, Web, and Mobile. With value of “<!DOCTYPE html>”
3. The last step is to install Twitter Bootstrap. You can find the instructions here.
Note 1: Its a good measure to preview the Form’s source with the browser and make sure the <form action=”…”> tags are identical, you want to mimic the Domino generated <form action=”…”> tag.
Note 2: I created a favicon.ico that you probably don’t have in your nsf. This is the browser’s tab icon image.