Hitachi Vantara Pentaho - BI Suite Tutorials: Pentaho 5.4 CE Login Page or Pentaho User Console(PUC)

In this post we will see how to customize pentaho 5.4 CE BA server login only page.

I thank you to the Java+Web developer for helping me in how to play around styles of Login Page using firebug and then in PUCLogin.jsp page

I had not involved in full time web development therefore you will find the tips not so awkward but hoping that this small write up would help someone somewhere who want to learn and apply for your quick business needs.

Software Requirement :
1) Pentaho BA 5.4 CE Server
2) Images (Your company logo, Your company favicon logo).
3) Any web-browser (I preferred Mozilla firefox as Inspcet / Inspect with firebug options are handy to play around).

IMP NOTE :
I have tested all the changes explained below on laptop and desktop web browsers where I didn't find greater difference in UI.

I have also tested the changes made in iPhone and found there are some known alignment issues hence this post will work only for desktop/laptop browsers.

(Yes, I have a one by this time - thanks to my small customers/consultants. In few of my earlier posts I used to test the mobile comparability of dashboards by minimizing the web browsers - Now, no more that method I will use :-)
).

Let us start with ,

1) Remove background Image

Problem :

Solution : Remove "login-crystal-bg.jpeg" image

E:\1_Softwares\Business Intelligence\Pentaho BI Tools\BI Servers\biserver-ce-5.4.0.1-130\biserver-ce\pentaho-solutions\system\common-ui\resources\themes\crystal\images

from above location remove "login-crystal-bg.jpeg" image.

Login Page view after removing image

Points to note down :
1) Restart of server is required.
(Why ? Web applications usually doesn't pick up updated or removed images ).
2) Delete the cache in browser (clean the browser).

2) Remove default login elevators
Problem

Solution :
1) Disable/Comment few lines of code in PUCLogin.jsp file (This login page code is written in this file).
2) How to find ? Using webpage "Inspect Element"
Right click on Login as an Elavator and click "Inspect Element" as shown in below image

Note down the ID of the DIV element and search it in "PUCLogin.jsp" ( I used notepad++ to view the code and search)
ID = eval-users-toggle-container (near by 186 line in the .jsp file)
Comment the code start with <div id="eval-users-toggle-container"> and end with it's </div>
Server restarting is not required b'z we are not editing css or image but html

Sample view of BA server after this change :

3) Change Credential Look and feel

Stage 1 : Change <label> tags to <span> and add <br> tags as shown below

Stage 2 : Adjust login form - Horizontal center and vertically middel

a) Inspect the id="login-form-container" and adjust left and top pixels i.e., as shown in above image add them to the element class. As a result style tag will be added to the container.

b) The above is on fly experiment, do the same in PUCLogin.jsp file

add style="top: 150px; left: 440px; border-radius: 25px; border: 2px solid rgb(178, 196, 212); width: 380px; height: 220px;"

c) After adding the code in PUCLogin.jsp should look like below (Line number near 167)

<div id="login-form-container" class="lang_<%=cleanedLang%>" style="top: 150px; left: 440px; border-radius: 25px; border: 2px solid rgb(178, 196, 212); width: 380px; height: 220px;">

d) Server restart is not required -> To see the affect reload the server by clicking F5 or refresh.

e) Change the left and top pixel(s) till you get it middle of Login Page.

Stage 3 : Inner elements adjustments inside form

1) Add styles to the <span> and input elements explained in Stage 1

and

2) Add styles to "Login" button

3) Login form header (User Console) styling

4) Remove vertical scroll - add height style to below

and comment below code

<!--

After changing all the pentaho login page look as below

5) Change favicon image .

File Name : PUCLogin.jsp

Find below code and change logo name to your logo name.

Location to find favicon image or place a new logo of your choice is

E:\1_Softwares\Business Intelligence\Pentaho BI Tools\BI Servers\biserver-ce-5.4.0.1-130\biserver-ce\tomcat\webapps\pentaho-style

Keep a new logo of your company with favicon.png and save the file.

Refresh the PUC login page and find the change.

6) Change button colors

Login Button color change :

Error button "OK" color change

<button class="btn-warning pull-right" onclick="document.getElementById('loginError').style.display='none'"><%=Messages.getInstance().getString("UI.PUC.LOGIN.OK")%></button>
</div>

7) Change puc-login-logo.png
Image name : puc-login-logo.png
Location : <directory>\biserver-ce-5.4.0.1-130\biserver-ce\pentaho-solutions\system\common-ui\resources\themes\images
How to : Take your company or client logo , rename it with same name (take a backup copy of original).

Adjustments :
File to edit : PUCLogin.jsp
Find below code :
<div id="login-logo"></div>
Change code to add styles :
<div id="login-logo" Style="left:440px;margin-top:80px;"></div

Download this PUCLogin_ModifiedCopy.jsp and check how the styles are added.

A sample final output of the pentaho login page

Pages

Pentaho Tools :

Thursday 16 July 2015

Pentaho 5.4 CE Login Page or Pentaho User Console(PUC) - 5.4 CE Customization Tips

No comments:

Post a Comment