Customising the Pentaho User Console – Part 1.

Posted under BI Server, Open Source, Pentaho, Tutorials, User Console

For the past couple of weeks I have been playing around with customising the Pentaho User Console (PUC) Version 3.5.x and to follow it up I thought I would put together a multi-part post on the topic. Each post will cover one aspect of customising the PUC, these include:

  • Login page and dialog (covered in this post)
  • Messages
  • Main toolbar, menu bar and logo panel
  • Launch page

In this post I will show you how to customise the default login dialog and how to create a new login page.

Customising the Login Dialog

The login dialog is the form which pops up when you click on the Login button. This is part of the default PUC login page.

spacer

With modifications to the loginsettings.properties file it is possible to:

  • Modify the users of the Sample User select box
  • Remove the Sample User select box

Modify Sample Users Select Box

To modify the users which appear in the Sample Users select box first locate the loginsettings.properties file which is found under the \tomcat\webapps\pentaho\mantleLogin\ directory and open up the file in a text editor:

# this file contains settings to configure the login dialog
# flag to turn on/off show users list (overrides pentaho.xml)
#showUsersList=true
# launch PUC in new window (default setting)
openInNewWindow=false
# sample users (be sure that each group has the same # of items as the rest)
userIds=joe, suzy, pat, tiffany
userDisplayNames=Joe (admin), Suzy, Pat, Tiffany
userPasswords=password, password, password, password

At the time of testing this the openInNewWindow option did not work.

To modify the users which appear in the select box you will need to make changes to three lines (you do not need to stop the Apache-Tomcat server before making any modifications):

userIds=joe, suzy, pat, tiffany
userDisplayNames=Joe (admin), Suzy,  Pat, Tiffany
userPasswords=password, password, password, password

For example I would like to:

  • Remove all users except for joe (Joe (admin))
  • Add a new user with the
    • userId of prashant (the userId which is stored in the Hibernate database)
    • userDisplayName of Prashant Raju (the value displayed in the select box)
    • userPassword of analysethis (the password which is stored in the Hibernate database against the userId prashant)

After making modifications the loginsettings.properties file now looks like this:

# this file contains settings to configure the login dialog
# flag  to turn on/off show users list (overrides pentaho.xml)
#showUsersList=true
# launch PUC in new window (default setting)
openInNewWindow=false
# sample users (be sure that each group has  the same # of items as the rest)
userIds=joe, prashant
userDisplayNames=Joe (admin), Prashant Raju
userPasswords=password, analysethis

Save and close the file, clear your web browser’s cache and refresh the login page. The login dialog now looks like this:

spacer

Remove Sample Users Select Box

To remove the Sample Users select box you will need to make modifications to the loginsettings.properties file (you do not have to stop the Apache-Tomcat server). To remove the Sample Users select box you will need to make changes this line:

#showUsersList=true

After making modifications the loginsettings.properties file now looks like this:

# this file contains settings to configure the login dialog
# flag to  turn on/off show users list (overrides pentaho.xml)
showUsersList=false
# launch PUC in new window (default setting)
openInNewWindow=false
#  sample users (be sure that each group has the same # of items as the  rest)
userIds=joe, suzy, pat, tiffany
userDisplayNames=Joe  (admin), Suzy, Pat, Tiffany
userPasswords=password, password,  password, password

Save and close the file, clear your web browser’s cache and refresh the login page. The login dialog now looks like this:

spacer

Customising the Login Page

If you would like to modify the look of the login page to look similar to a specific style you will need to modify the PUC_Login.JSP file which is found under the /tomcat/webapps/pentaho/jsp directory.

Before we move onto the code here is a screenshot of the new login page which we will be creating:

spacer

You can click here for a HTML/CSS version (JSP code is commented out) of the above screenshot or below is a JSP/HTML/CSS version which you are able to copy and paste – make sure you read through the comments:

<%@ page language="java" import="org.springframework.security.ui.AbstractProcessingFilter,org.springframework.security.ui.webapp.AuthenticationProcessingFilter,org.springframework.security.ui.savedrequest.SavedRequest,org.springframework.security.AuthenticationException,org.pentaho.platform.uifoundation.component.HtmlComponent,org.pentaho.platform.engine.core.system.PentahoSystem,org.pentaho.platform.util.messages.LocaleHelper,org.pentaho.platform.api.engine.IPentahoSession,org.pentaho.platform.web.http.WebTemplateHelper,org.pentaho.platform.api.engine.IUITemplater,org.pentaho.platform.web.jsp.messages.Messages,java.util.List,java.util.ArrayList,java.util.StringTokenizer,org.apache.commons.lang.StringEscapeUtils,org.pentaho.platform.web.http.PentahoHttpSessionHelper" %>
<%
            // If the User is already logged in redirect to PUC Home
            String remoteUser = request.getRemoteUser();
            if (remoteUser != null && remoteUser != "") {
                response.sendRedirect("/pentaho/Home");
            }
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "www.w3.org/TR/html4/loose.dtd">
<html lang="en">
    <head>
        <title>Login to Steel Wheels - Pentaho User Console</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="gwt:property" content="locale=<%=request.getLocale()%>">
        <!-- Uncomment to put your own favicon
        <link rel="shortcut icon" class="/pentaho-style/favicon.ico" /> -->
        <style type="text/css" media="screen, projection">
            *{margin:0;padding:0;}
            html{%;}
            body{background:#fff;color:#222;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;text-align:center;%;}
            h2{em;margin-bottom:0.75em;}
            .error{background:#FBE3E4;border:2px solid #FBC2C4;color:#8a1f11;margin-bottom:1em;text-align:center;px;padding:6px;}
            #login-logo{padding:40px 0;}
            #login-form{background:#fff;border:1px solid #ccc;text-align:left;px;-moz-border-radius:5px;-webkit-border-radius:5px;-moz-box-shadow:0 1px 3px #ddd;-webkit-box-shadow:0 1px 3px #ddd;margin:0 auto;padding:15px 15px 25px;}
            #login-form h2{text-align:center;padding:5px 0;}
            #login-form .field{px;margin:15px 0;}
            #login-form .field label{color:#777;display:block;em;font-weight:700;margin-bottom:5px;text-align:left;}
            #login-form .field input{border:1px solid #ccc;.2em;%;padding:5px;}
        </style>
        <script type="text/javascript">
            // If the Username and Password values are blank then alert();
            // This can be replaced with an AJAX solution
            function checkForm(form) {
                if(form.j_username.value == "" && form.j_password.value == "") {
                    alert('You can not have a blank Username and Password!')
                    return false;
                }
            }
        </script>
    </head>
    <body>
        <!-- Login Logo -->
        <div id="login-logo">
            <img src="/sw-style/active/sw_logo.jpg" alt="Steel Wheels Logo">
        </div>
        <!-- Login Form -->
        <div id="login-form">
            <!-- Header -->
            <h2>Login to Steel Wheels</h2>
            <!-- If the login_error URL parameter is set then show error box -->
            <% if (request.getParameter("login_error") != null) {%>
            <div class="error">Authentication failed! Please try again!</div>
            <% }%>
            <!-- Form -->
            <form id="sw-login" method="POST" action="/pentaho/j_spring_security_check">
                <!-- Username -->
                <div class="field">
                    <label for="username">Username</label>
                    <input id="username" name="j_username" type="text">
                </div>
                <!-- Password -->
                <div class="field">
                    <label for="password">Password</label>
                    <input id="password" name="j_password" type="password">
                </div>
                <!-- On click on the submit button run the checkFrom function -->
                <input type="submit" value="Login" onclick="return checkForm(form);">
            </form>
        </div>
    </body>
</html>

Below I have separated the code (seen above) into important parts, this will help you get a better understanding on the purpose of each section of code.

This section of code uses the getRemoteUser() function to check if the user loading the login page isn’t already logged in – if they are logged in they are redirected to the PUC home URL.

<%
// If the User is already logged in redirect to PUC Home
String remoteUser = request.getRemoteUser();
if (remoteUser != null && remoteUser != "") {
    response.sendRedirect("/pentaho/Home");

}
%>

The following piece of code is a JavaScript function which checks if the Username and Password of the login form are empty and if they are create an alert box to let the user know. This function was used because if a user submits an empty form a 500 error is thrown back by Spring Security – this isn’t as intuitive as an AJAX solution so if you would like to see an AJAX example let me know.

function checkForm(form) {
    if(form.j_username.value == "" && form.j_password.value == "") {
        alert('You can not have a blank Username and Password!')
        return false;
    }
}

To call the above function (checkForm()) it is attached to the onclick event of the submit button:

<input type="submit" value="Login" onclick="return checkForm(form);">

This section of code checks to see if an error has occurred when trying to login i.e. wrong password. When an error occurs it is sent back as a URL parameter login_error, the value of this parameter is a number (in this example I gave a generic error response to any number). If the login_error URL parameter value is not null it then shows the error message (div).

<% if (request.getParameter("login_error") != null) {%>
<div class="error">Authentication failed! Please try again!</div>
<% }%>

The last and most important section of code is the login form. It should be noted that the form action points to the /pentaho/j_spring_security_check URL and the username and password names are j_username and j_password – these are essential as they are needed by Spring Security to authenticate user credentials correctly.

<form id="sw-login" method="POST" action="/pentaho/j_spring_security_check">
    <!-- Username -->
    <div class="field">
        <label for="username">Username</label>
        <input id="username" name="j_username" type="text">
    </div>
    <!-- Password -->
    <div class="field">
        <label for="password">Password</label>
        <input id="password" name="j_password" type="password">
    </div>
    <!-- When the submit button is clicked run the checkForm function -->
    <input type="submit" value="Login" onclick="return checkForm(form);">
</form>

Well that’s it for now. Stay tuned for the next part which outlines how to change the default messages which appear throughout the PUC (including the login dialog, loading bar, titles etc.).

Enjoy.

Posted by Prashant Raju on Feb 14, 2010 — 30 Comments — Share

30 Comments for “Customising the Pentaho User Console – Part 1.”

  1. Posted by AnOs on Mar 2, 2010

    Hi,

    I try that and it’s working.

  2. Posted by Indian on Mar 17, 2010

    Nice Post, thank you, its a good starter.

  3. Posted by Mateo on Mar 20, 2010

    Very Helpful Post and Website in General.
    It’s a great resource for those of us learning Pentaho!

    Keep up the great work Prashant!

  4. Posted by Sam on Jun 17, 2010

    Hi,

    your articles about pentaho are really very interesting und well written!

    But there is one thing which is not covered yet: What do you have to do if you dont want to be redirected to the PUC but to another website (i.e. dashboard page)?

    Thanks for your efforts and keep up the good work!

    Regards,
    Sam

  5. Posted by Prashant Raju on Jun 17, 2010

    Sam

    I did spacer . Check out this post (Part 4 of the series).

    Prashant

  6. Posted by santenkelapa on Aug 11, 2010

    Like this …!
    all your artikel very good ..

  7. Posted by Kaushik on Aug 27, 2010

    How can we remove the login page?

  8. Posted by omar on Aug 27, 2010

    hi ,

    is it possible to change the admin( joe ) to myname ??

    thanks

  9. Posted by Prashant Raju on Aug 30, 2010

    @Kaushik

    You can enable no authentication but not sure about disabling the login page.

    Prashant.

  10. Posted by ganteng on Sep 16, 2010

    hi praju,

    is it possible if i don’t want to use the login page?

    cause i have an application that use pentaho, in my apps i have a link to access the dashboards. so i don’t want to use the login page from the default of biserver cause i use my application login page.

    thank’s from me

  11. Posted by Prashant Raju on Sep 16, 2010

    Hi ganteng,

    From your application you can create a hyperlink which includes the username and password for pentaho as part of the URL.
    This thread has it all.

    Prashant

  12. Posted by Paul on Sep 18, 2010

    Hi Prashant,

    first thank you for your wunderful blog, which helped me already lots of times.

    Maybe you can give me a hint what i’m doing wrong. I just copied the PUCLogin.jsp from you and it worked fine.
    Now i did some modifications like changing the logo or “steel wheels” to “acme”. Problem: Nothing happens.
    I cleared my cache, restarted my pc, restarted the bi server a several times. I even deleted the puclogin.jsp. but when i visit the bi-server STILL the steel-wheels loginscreen appears.

    That is somehow impossible. Do you have a hint for me? Thanks in advance!
    Paul

  13. Posted by Paul on Sep 18, 2010

    Oh i found the solution: I had to delete the puclogin.java and puclogin.class files under tomcat/work/Catalina/localhost/pentaho/org/apache/jsp/jsp.

    paul

  14. Posted by Priyank Diwaker on Oct 15, 2010

    Hi Prashant,

    Thanks for the article.
    I wanted to change my user name and password which i did thanks to your article, but the problem is i want to remove all other username and password like joe and all.

    Could you please help in this scenario.

Related searches:
password pentaho username posted prashant
gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.