You are on page 1of 12

Modifying Oracle BI Presentation Services User Interface

In this article, I try to explain the concepts of customizing the User Interface in OBIEE. First we start with the basic understanding of style and skin concept. Then we come to the use of css files in presentation services and finally customize the look and feel of BI Answers, Dashboards and other UI.

About Skin Style


OBIEE uses Styles and Skins to generate the graphical representation. Customizing the appearance of user interface is based on customizing the skins and styles which makes use of CSS styles and images. Difference between the two is that a style is used to customize a dashboard. If required, different dashboards can have different styles whereas a skin is used to customize other User Interfaces, like Answers, Delivers, and the Administration screens. You can modify the Cascading Style Sheets (CSS) files and images stored in the default installation directory to create a custom user interface. The default images and style sheets are located in OracleBI\web\app\res\s_oracle10 folder, where OracleBI is the installation directory. The relevant subdirectories are contained in this directory (for instance, b_mozilla_4, charts, images, maps, meters, popbin, portal, and views) for the current Oracle Business Intelligence style.

About Cascading Style Sheets to Modify Default Oracle BI Presentation Services


Style sheets can modify the default Oracle BI Presentation Services styles. Cascading style sheets allow Web developers to have control over the appearance of the objects within Oracle Business Intelligence. You can change images, backgrounds, font color and sizes, table cell gridlines and cell padding and so on. There are three files that affect the dashboard user interface: 1. PortalBanner.css. Influences the overall appearance of a dashboard's top section. This includes the dashboard's names, links, and so on. 2. PortalContent.css. Influences the overall appearance of a dashboard's main content area. 3. Views.css. Corresponds to each of the Oracle Business Intelligence request views (Title, Table, Pivot Table, Chart, Narrative, Ticker, and so on).

iWare Logic Technologies Pvt. Ltd Oracle Applications & Technologies | Consulting | Training | Implementation Email: oracleconnect@iwarelogic.com http://www.iwarelogic.com/

Three directories are involved in customizing OBIEE skins and styles: 1.<OracleBI Home>\web\app\res 2. <OracleBI Home>\oc4j_bi\j2ee\home\applications\analytics\analytics\res 3.<OracleBI Data Home>\web\res Here in this case I have taken Oc4j as a web container, OBIEE reads its CSS files from above mentioned directory. Thats why custom style & skin directories must be located in the above mentioned location. Now, this is where it gets complicated to the developers like which directories are present and which one would be used, will depend on your OBIEE configuration for example, J2EE is different from IIS. Even for a single configuration, directory usage may not be consistent, which could lead to intermittent problems. For a default J2EE installation, the first two directories contain the same set of files, while the third is empty: The Default location for OBIEE skin and style directories are:

In the selected directories, the folders that begin with s_ are dashboard style, while the folders that begin with sk_ are skin. Any custom directories that you create should follow the same naming conventions. Directory names are case sensitive and cannot contain an underscore, apart from the underscore that is part of the directory name prefix.
iWare Logic Technologies Pvt. Ltd Oracle Applications & Technologies | Consulting | Training | Implementation Email: oracleconnect@iwarelogic.com http://www.iwarelogic.com/

Steps to create custom style and skin:


Step 1: Make the copy of the s_oracle10 and sk_oracle10 directories, rename them as appropriate name like s_custom and sk_custom directories and place them at the same location. In the present case, well call the renamed directories s_custom and sk_custom. Now your directory looks like the following image.

Now you can perform some changes in the default CSS files to make custom appearance that you want.

iWare Logic Technologies Pvt. Ltd Oracle Applications & Technologies | Consulting | Training | Implementation Email: oracleconnect@iwarelogic.com http://www.iwarelogic.com/

Step 2: Lets change the background colour from white to Financial Times pink. Now to change background color open the portalcontent.css file located at the following location: C:\OracleBI\web\app\res\s_custom\b_mozilla_4

iWare Logic Technologies Pvt. Ltd Oracle Applications & Technologies | Consulting | Training | Implementation Email: oracleconnect@iwarelogic.com http://www.iwarelogic.com/

Step 3: After Open the file, on line 10 youll see an entry for the PortalBody class. By default, the background color is set to FFFFFF, which is white. Change this to FFCCCC, which is pink, and save the file:

After doing changes save the file and copy both directories s_custom and sk_custom at the following location. C:\OracleBI\oc4j_bi\j2ee\home\applications\analytics\analytics\res

iWare Logic Technologies Pvt. Ltd Oracle Applications & Technologies | Consulting | Training | Implementation Email: oracleconnect@iwarelogic.com http://www.iwarelogic.com/

Step 4: When you make changes to the custom directories youll need to restart various OBIEE services for the changes to become visible. What you need to restart will depend on your configuration. Rebooting the entire server is the best option, but restarting one or more of Oracle BI Presentation Server, Oracle BI Java Host, and OC4J may also work. To confirm that OBIEE has picked up the new defaults, log into the Presentation Services and navigate to Settings => Administration => Manage Interactive Dashboards. When the Manage Dashboards window appears, click on the Properties icon for one of the dashboards to display the Dashboard Properties window, and then expand the Style dropdown box. With the customization in place it will look like this:

(Note : you will see the default custom style is oracle10.But if you want the custom style to be the default, and apply in dashboard by default, then you would add the DefaultStyle tag line in instanceconfig.xml file located at location: )

iWare Logic Technologies Pvt. Ltd Oracle Applications & Technologies | Consulting | Training | Implementation Email: oracleconnect@iwarelogic.com http://www.iwarelogic.com/

C:\OracleBIData\web\config\ instanceconfig.xml

Now open the file and add lines for the DefaultStyle and DefaultSkin tags as follows (note the absence of the s_ and sk_ directory name prefixes) and tag should be added inside the <ServerInstance> tag. For example:

iWare Logic Technologies Pvt. Ltd Oracle Applications & Technologies | Consulting | Training | Implementation Email: oracleconnect@iwarelogic.com http://www.iwarelogic.com/

After add the tag save the file and again restart the services of OBIEE. And now aging log into the Presentation Services and navigate to Settings => Administration => Manage Interactive Dashboards. When the Manage Dashboards window appears, click on the Properties icon for one of the dashboards to display the Dashboard Properties window, and then expand the Style drop-down box. With the customization in place it will look like this:

iWare Logic Technologies Pvt. Ltd Oracle Applications & Technologies | Consulting | Training | Implementation Email: oracleconnect@iwarelogic.com http://www.iwarelogic.com/

Step 5: Now we want to make a change to a CSS file and verify that the change is being picked up by OBIEE. Logon to the Presentation Services and display a dashboard. Before applying the custom style, your dashboard looks like this:

Now navigate to Settings => Administration => Manage Interactive Dashboards. When the Manage Dashboards window appears, click on the Properties icon for one of the dashboards to display the Dashboard Properties window, and then expand the Style dropdown box. And set the dashboard style to custom. Then you will see the dashboard like this.

iWare Logic Technologies Pvt. Ltd Oracle Applications & Technologies | Consulting | Training | Implementation Email: oracleconnect@iwarelogic.com http://www.iwarelogic.com/

(Note: If you were to produce a consistent set of colours and images, youd need to change many more of the CSS classes as well as colorizing a number of images. If you want to change the default oracle logo then you can change the portalbanner.css file located at location: Now open the file and make some changes like :) C:\OracleBI\web\app\res\s_custom\b_mozilla_4

iWare Logic Technologies Pvt. Ltd Oracle Applications & Technologies | Consulting | Training | Implementation Email: oracleconnect@iwarelogic.com http://www.iwarelogic.com/

To test the changes again follows the same steps. And see the changes like:

Things to remember while using setting OBIEE style & skin: When you create a custom style & skin for OBIEE, then copy of both the directories must be located at the two location: <OracleBI Home>\web\app\res <OracleBI Home>\oc4j_bi\j2ee\home\applications\analytics\analytics\res After making the changes all the required services must be started.

-- Sapna Gupta

iWare Logic Technologies Pvt. Ltd Oracle Applications & Technologies | Consulting | Training | Implementation Email: oracleconnect@iwarelogic.com http://www.iwarelogic.com/

About iWare Logic Technologies Pvt. Ltd.

iWare Logic is an Enterprise Business Application Services company specializing in Oracle applications and technology including Oracle E-Business Suite (EBS), Oracle DBA and Apps DBA remote and onsite, Oracle BI, OBIEE, OBISE, PeopleSoft, JD Edwards EnterpriseOne, Siebel, Oracle Siebel CRM On Demand And Oracle APEX.

Our Differentiators:
For Outstation Students: Airport pickup and drop facility available for outstation students from Pune and Mumbai domestic and international airport. Local stays and travel arrangement assistance for outstation students. Local hotel is at discounted cost and at walk able distance from training facility Training Facilities & Examination: 24/7 Lab facility Training will be delivered by Oracle accredited instructor We provide Oracle official courseware and attendance certificate from Oracle Extra Offerings to our students: Free Oracle Certification Exam Voucher to our Oracle Boot Camp Training students Free library access Free post training support Free Oracle Apps implementation workshop Free guidance on India localization for any interested students Free Oracle Apps implementation project guidance using a simulated project environment

Contact Us:
iWare Logic Technologies Pvt. Ltd. Oracle Applications & Technologies | Consulting | Training | Implementation Aditi Samrudhi | Baner | Pune 411 045 | INDIA Email: oracleconnect@iwarelogic.com Website: www.iwarelogic.com

iWare Logic Technologies Pvt. Ltd Oracle Applications & Technologies | Consulting | Training | Implementation Email: oracleconnect@iwarelogic.com http://www.iwarelogic.com/