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. 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).
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).
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. That’s 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.
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, we’ll 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.
Step 2: Let’s 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”
Step 3: After Open the file, on line 10 you’ll 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”
Step 4: When you make changes to the custom directories you’ll 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” 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 be the default, and apply in dashboard by default, then you would add the “DefaultStyle” tag line in “instanceconfig.xml” file located at location: )
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:
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:
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” drop-down box. And set the dashboard style to “custom”. Then you will see the dashboard like this.
(Note: If you were to produce a consistent set of colours and images, you’d 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 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
