Configuring Custom Skin & Style for OBIEE 12c

.

 

Introduction

Each version of OBIEE has a set of styles and skins designed to make the displaying of data visually appealing. This gives the end user the ability to select styles as per their need. Generally, each OBIEE version has a default style. For example, in OBIEE 12c, the default UI Skin and Style is called ‘Alta’. In 11g, it is ‘blafp’.

Clients often want to see their organization’s BI data with their company logo, colours, styles etc. Not surprisingly, customizing the OBIEE user interface is one of the most frequent activities undertaken while implementing OBIEE in an organization.

In this article, we will describe how to customize the Skin/Style in OBIEE 12c as per the customer requirements below:

Replace the Oracle logo with the Client logo
Change the header bar color in the analytics home page
Customize the OBIEE charts with a custom color pallete
Change the default style/skin

 

1. Unarchiving the Analytics EAR File:

OBIEE analytics components and configuration files are bundled together as an .ear file named ‘analytic.ear’ and are deployed in weblogic services as part of the installation and configuration. We are going to create our own customization under this file and then deploy it back in weblogic services.

It is always a best practise to make a back-up copy of the files and folders before starting any customization. This would help us to revert back to before the changes if anything goes wrong. The recommended files to be backed up are:

Analytics.ear
Instanceconfig.xml

To begin the unarchiving process, please follow the below steps:

1 Navigate to C:\Oracle\Middleware\Oracle_Home\bi\bifoundation\jee to find the analytics.ear file, which is already deployed in weblogic.
2 Copy analytics.ear and paste it in your local folder D:\OBIEE.
3 Unzip the analytics.ear from D:\OBIEE\analytics ear with your preferred zip tool.
custom style OBIEE 12c

 

4 Further unzip the analytics.war file in another folder to avoid conflicts,
D:\OBIEE\analytics ear\analytic war.
custom style OBIEE 12c

 

Note: Don’t touch/modify the folders META-INF & WEB_INF.

 

2. Replacing the Oracle Logo:

To Replace the Oracle logo with the client logo in the analytics home page:

Navigate to ‘res’ in D:\OBIEE\analytics ear\analytic war\res.
In this folder, we can find separate folders for each Skin and Style:
»  Folders starts with ‘s_’ refers for style
»  Folders starts with ‘sk_’ refers for skin
Decide on which out-of-the-box style we are going to extend with our new customization. We can either add our customization in an existing style or make a copy of any folder for customizing the style & skin and then rename it, like s_CPcustom, sk_CPcustom.
Navigate to ‘D:\OBIEE\analytics ear\analytic war\res’ and open the filemap.xml file and do the below change only if you have created the custom folder (s_CPcustom). Otherwise skip this step if you are customizing the existing style(for s_Alta). Change the code as below to extend the Alta style to the new custom skin and style ‘s_CPcustom’ and ‘sk_CPcustom’.
 Figure 3

 

Here I’m doing my customization under s_Alta folder after backing up the original folder, so I just skipped the above step.
Move to the location ‘D:\OBIEE\analytics ear\analytic war\res\s_Alta\master’.
Rename the oracle_logo to some other name(ex: oracle_bkp) and paste the custom picture with the same dimensions the as oracle logo has. Name the custom picture as oracle_logo.

 Figure 4

 

 

3. Changing the Header Bar Color in the Analytics Home Page:

By default, the header bar of the OBIEE Analytics web page is grey. To customize this color :

Navigate to D:\OBIEE\analytics ear\analytic war\res\s_Alta\master.
Find and open the file ‘custom.css’.
The custom.css file is an empty file that is imported by the master.css file. You can use the custom.css file to add your own CSS classes, which will override the classes in the master.css file.
Keeping the custom code in custom.css file enables you to take advantage of future improvements to the master.css file that are applied by patches and upgrades.
To get the class/ id’s, login to analytics through Chrome, right-click and choose "inspect" to inspect the elements whose styles you want.
custom style OBIEE 12c

 

Override the code with your custom code as below in custom.css file.
custom style OBIEE 12c

 

Save and close the file.

 

4. Customizing the Default Color Pallete:

In OBIEE 12c, the initial colors of default color pallete are blue and green, therefore, the graphs and charts are generated in those colors by default. To modify the color pallete and use the standard colors of your organization, follow the steps below.

Navigate to D:\OBIEE\analytics ear\analytic war\res\s_Alta\master.
Open ‘graph.xml’ file with the text editor. Here you will find the list of SeriesItems just below the SliceLable tag.
 Figure 7

 

Change the color code as per your need and save the file.

 

5. Set OBIEE Default Style & Skin:

The default Skin and Style for each version of OBIEE is set in the file named ‘instanceconfig.xml’. The default style for OBIEE 12c is ‘Alta’. Since I made my customizations under s_Alta, I don't need to modify the style name in instanceconfig.xml.

In case you are doing the customization under your own custom folders (s_CPcustom/sk_CPcustom) then follow the below steps.

Navigate to C:\Oracle\Middleware\Oracle_Home\user_projects\domains\bi\config\fmwconfig\biconfig\OBIPS.
Open & Edit the instanceconfig.xml file with text editor.
Change the DefaultSkin and DefaultStyle as CPcustom as per the screenshot below.
custom style OBIEE 12c

 

6. Archiving the Analytics EAR file:

Now we are done with the customization part. So bundle the files back in analytics.war and then analytics.ear as before.

Analytics.war should be archived with the below files.
 Figure 9

 

Analytics.ear should contain the below files.
 Figure 10

 

Copy and paste the ‘analytics.ear’ file into the source location. C:\Oracle\Middleware\Oracle_Home\bi\bifoundation\jee.

Now ‘analytics.ear’ file is ready to deploy with the custom styles.

 

7. Deploy the analytics.ear File:

To deploy the analytics.ear file with custom styles:

Login to Weblogic Server Administration Console with Administrator credentials.
Navigate to Domain Structure -> Deployments -> control tab.
Select analytics from the deployment list and click on Stop -> Force Stop now.
custom style OBIEE 12c

 

Click on 'Lock & Edit' from the left side panel.
Go to the Configuration tab, there you can see the status of anlytics has been changed.
Now select 'analytics' and click on ‘Update’ to update the new changes from analytics.ear file.
Browse the source path where the analytics.ear file is saved and click on 'Finish'.
custom style OBIEE 12c

 

Once the deployment is successfully updated, click on the 'Activate the Changes' tab.
custom style OBIEE 12c

 

Now move to the 'Control' tab and start the analytics by servicing all requests.
custom style OBIEE 12c

 

Now the status should be Active as per the below sceenshot.
custom style OBIEE 12c

To reflect all changes made in the analytics deployment, perform a Full Restart in OBIEE by using the stop.sh and start.sh script files or by restarting the services from Oracle Enterprise Manager(EM).

 

8. Restarting the Services From Enterprise Manager:

Login to Oracle Enterprise Manager with administrator credentials.
Navigate to Target Navigation tree -> Business Intelligence -> biinstance -> Availability.
Click on the 'Restart All' button to restart all the services.
custom style OBIEE 12c

 

Note: As a best practise, Clear the browser cache files before login to OBIEE analytics.

 

9. Testing the Customization:

Login to OBIEE Analytics and check the default style and logo in OBIEE analytics home.
Navigate to any report that is saved under the catalog and see if the default color palette for OBIEE graph has been changed in the report.
custom style OBIEE 12c

 

 

Conclusion

Every organization likes to have their business reports and charts aligned to their standards with respect to skin and styles. OBIEE offers us the flexibility here to modify the text fonts for the reports and to have a custom color palatte for the graphs, logos and skin as per the standards of the organization.

Further customization can be made on the css files referred in this article to improve the look and feel of the OBI analytics home page, reports and charts.

If you want to know more about how to customize your reports and charts and enhance your visualizations you can always contact us!

 

Tableau Tricks – Using Shapes and Bar Charts to get Instant Insights

.

 

Introduction

As Business Intelligence professionals, developing visually-intuitive dashboards for optimal data insights is one of our daily task. This is the first blog article of a series of articles where we will share useful tricks for developing key analytics tools with Tableau in order answer your questions or test your hypothesis.

In this blog article, we will explain how to combine shapes and bar charts to compare KPI performances over two periods of time. The main benefit of this approach is that the analysis is highly intuitive, so we get the data insights straight away.

 

Use Case

Imagine that you are the Head of Sales for the Mediterranean territory of a manufacturing company and you would like to know the difference between 2017 sales and 2016 sales by country (by percentage). As you can see, with this approach you can visually compare the sales by year for each country in a clear and easy way.

Below are all the steps that we need to follow in order to generate this analysis:

1 First, we need to create three calculated fields: “Sales 2017”, “Sales 2016” and “Sales Diff %”

Figure 1: Formula to calculate sales in 2016

Figure 2: Formula to calculate sales in 2017

Figure 3: Formula to calculate % difference between sales in 2017 and 2016. We multiply it by 100 because afterwards this value will be converted to string

 

2 Secondly, we have to create the bar chart, moving the “Country” dimension to Columns and the  “Sales 2016” and “Sales 2017” measures to Rows.

Figure 4: Tableau bar chart with separate measures

 

3 Then, you have to apply some steps to change the look and feel of the bar chart. Here, we moved “Measure Names” to the Color tile, applied “Dual Axis” to one of the bar charts and resized the size of the bars from the Size tiles.

Figure 5: Tableau bar chart with “Dual Axis” applied, and with the bar size narrower for “Sales 2017” measure

 

4 After customizing the look and feel, we need to create two new calculated fields, “Icon UP” and “Icon Down”. These fields will indicate if the sales in 2017 are increasing (Icon UP) or decreasing in relation with 2016.

Figure 6: Formula with the text when de “Sales Diff %” is positive

 

Figure 7: Formula with the text when de “Sales Diff %” is negative

 

5 Finally, we have to move these two calculated fields into the Label tiles to display the yearly sales variation. Note that you will also need to change the Color label to make this analysis more intuitive.

 

In the “Sales 2016” mark,  we put “Icon Down” into Label tile.

Figure 8: In the “Sales 2016” mark, we put “Icon Down” field into Label tile

 

In “Sales 2017” mark,  we put “Icon Up” into Label tile.

Figure 9: In the “Sales 2017” mark, we put “Icon Up” field into Label tile

And this is the final result:

Figure 9

Figure 10: Bar chart to compare sales between 2017 and 2016 with text that shows the % difference

 

 

Conclusions

We can use some icons as text instead of using shapes, so that we take advantage of embedment into Labels or Tooltips.

These kind of analysis are very engaging when we perform data analysis or when we are currently in the data discovery processes because they allow us to get insights in a very quick and visual way.

As a Tableau partner, we are certified with the last Tableau Certifications, so do not hesitate to contact us if you have any data challenge in mind.

 

ClearPeaks´ Visualisation Plugin

.

 

Introduction

If you’ve worked with any kind of data, you know how harrowing reading rows and rows of numbers can be. It isn’t easy to wade through all of those numbers and easily figure out what they mean. That’s the case where visualisation comes to the rescue. Visualisation de-mystifies the data and helps decision-makers derive actionable insights from it. The whole idea of this blog is to delve into the blossoming world of data visualisation. It is hard to ignore the weight that more advanced and more interactive visualisations carry in today’s data-centric world. It is common to get requests to add visualisations or other improvements to the dashboard in order to provide a flashier look or design. Typically, these kinds of requests are handled by embedding HTML and JavaScript to provide data driven, custom visualisations. At ClearPeaks, we have developed a set of Custom Visualisations that allow configurable visualisations to work natively in modern browser technologies.
 

1. Motivation

Following are the main Key factors, which drive the need for Custom Visualization Plugins:

Add new Capabilities to existing chart types for modern reporting tool.
Add brand new Visualization types.

Let us discuss each one of these points in detail.

Add new Capabilities to existing Chart types.
How many times have you received a request that you just could not meet with native chart types because there was not enough ability to customize the chart? For example, imagine that you want to build a line/bar combo chart with a third distinct Y-axis. Oh sure, you can map three metrics, but if the metrics do not have the same unit of measurement or the same scale, then you are screwed. To handle these kind of scenarios, we have to use these Pre-build custom Plugins.

Add brand new Visualisation types.
There is huge scope for improvement in terms of Interactive Visualizations with traditional charts Library and there are so many new visualization Patterns we can build using JavaScript like Donuts, Meters, Pokers or Animated Donuts etc, which is hard to visualize with Traditional Reporting tools.

 

2. How does it work?

ClearPeaks’ plugin is solely based on native browser technologies and doesn't require client side plugins like Flash or Java. The plugin is built with jQuery and SVG. With the ClearPeaks plugin referenced in your webpage, we are ready to use a wide range of highly customizable charts. In case of the Oracle BI implementations, where their servers are isolated from the Internet and protected in internal LAN segments, referencing these resources from Oracle BI means having to first deploy them in the WebLogic Server as static resources.
ClearPeaks’ plugin allows us to easily customize the design of a chart, like its size, colour and fonts. Also, it is possible to include or exclude parts of the charts.
 

3. Data Visualization Graphs

In this section, we present some of the visualization graphs developed by our team:

Gauge Chart: Gauge provides a rich amount of configurable items, which can set options we pass through the plugin invocation.
Figure 1 - Gauge Chart
Donut Chart: A Donut Chart is a circle chart that shows the percentage of an activity.
Figure 2 - Donut Chart
Pyramid: A Pyramid chart displays a single series of data in progressively decreasing or increasing proportions, organized in segments, where each segment represents the value for the particular item from the series.
Figure 3 - Pyramid
TimeLine: Timeline allows to visualise the starting and ending of an activity.
Figure 4 - Timeline

Visualisation also includes the below charts.

Horizontal Bar Chart:
Figure 5 - Horizontal Bar Chart
Vertical Bar Chart:
Figure 6 - Vertical Bar Chart
Bubble Chart:
Figure 7 - Bubble Chart
Percentage Bar:
Figure 8 - Percentage Bar

 

Conclusion

ClearPeaks’ custom visualisation plugin provides some of the best and most unique visualisations available. The charts are highly customizable in terms of size, colour and design. Better yet, the visualisations can be implemented in OBIEE or any custom html reports or dashboards.

Click here if you would you like to know more about this innovative solution!

privacy policy - Copyright © 2000-2010 ClearPeaks

topnav