customestyle doc sapna patil

8/22/2019 CustomeStyle Doc Sapna Patil

1/12

iWare Logic Technologies Pvt. Ltd

Oracle Applications & Technologies | Consulting | Training | Implementation

Email: [email protected]

http://www.iwarelogic.com/

Modifying Oracle BI Presentation Services User Interface

In this article, I try to explain the concepts of customizing the User Interface in OBIEE. Firstwe 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 styleswhich 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 theAdministration 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 arelocated 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 withinOracle 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).


2/12





Three directories are involved in customizing OBIEE skins and styles:

1.\web\app\res

2. \oc4j_bi\j2ee\home\applications\analytics\analytics\res

3.\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 abovementioned location.

Now, this is where it gets complicated to the developers like which directories are present andwhich one would be used, will depend on your OBIEE configuration

for example, J2EE is different from IIS. Even for a single configuration, directory usage maynot 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 followthe 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.


3/12





Steps to create custom style and skin:

Step 1:

Make the copy of the s_oracle10 and sk_oracle10 directories, rename them asappropriate 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 thatyou want.


4/12





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 followinglocation:

C:\OracleBI\web\app\res\s_custom\b_mozilla_4


5/12





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 ispink, 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


6/12





Step 4:

When you make changes to the custom directories youll need to restart various OBIEEservices 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 ofOracle 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 theManage 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:

(Note : you will see the default custom style is oracle10.But if you want the custom style to bethe default, and apply in dashboard by default, then you would add the DefaultStyle tag line

in instanceconfig.xml file located at location: )


7/12





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 tag.

For example:


8/12





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 Propertieswindow, and then expand the Style drop-down box. With the customization in place it will

look like this:


9/12





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 theManage 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. And set the dashboard style to custom.

Then you will see the dashboard like this.


10/12





(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 changethe 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


11/12





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 directoriesmust be located at the two location:

\web\app\res

\oc4j_bi\j2ee\home\applications\analytics\analytics\res

After making the changes all the required services must be started.

-- Sapna Gupta


12/12





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 AppsDBA 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 Mumbaidomestic and international airport.

Local stays and travel arrangement assistance for outstation students. Local hotel is atdiscounted 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:iWareLogic Technologies Pvt. Ltd.


Aditi Samrudhi | Baner | Pune 411 045 | INDIAEmail:[email protected]

Website:www.iwarelogic.com

customestyle doc sapna patil

Documents