Showing posts with label OBIEE 11g UI Customizations. Show all posts
Showing posts with label OBIEE 11g UI Customizations. Show all posts

Friday, June 20, 2014

OBIEE 11g : Using Popup Boxes/Alerts with prompts

We can make use of JavaScript Popup boxes in OBIEE 11g UI customization.

We can associate these alert messages with dashboard prompts.

We can achieve data validation using these alerts.

For this we create a prompt as Number1 and Number2. Also we define presentation variable as num1 and num2 respectively.


 


Now we add text view and add following code to it.

                <head>
                <script type="text/javascript">

                var num1='@{num1}';
                var num2='@{num2}';

                alert('Number 1 is '+num1+'and number 2 is '+num2);

                </script>
                </head>

This code simply checks numbers entered in text boxes and generates alert.




As you can see an alert is being shown when we apply prompts. According to our script it simply shows numbers entered in text boxes.

Here we use ‘alert()’ function of JavaScript to generate alert.
Also we can use presentation variables i.e. num1 and num2 to initiate variables.

Now consider following code.
We can also check other operations as following code.


                <head>

                <script type="text/javascript">

                var num1='@{num1}';
                var num2='@{num2}';

                if(num1>num2)
                alert('Number1 is greater than number2' );

                else if(num1<num2)
                alert('Number2 is greater than number1' );

                else
                alert('Number1 and number2 are same' );

                </script>

                </head>


This script compares numbers entered in 2 text boxes and generates alert as follows.









Tuesday, June 17, 2014

OBIEE 11g : Changing Oracle Logo from Login/Home Page


In OBIEE 11g we can change the oracle logo from login page as well as home page.
For custom skin changes we have already deployed ‘TestSkin’.
Plese refer ,

OBIEE 11g: Deploying & Developing a Custom Skin Part 1

OBIEE 11g: Deploying & Developing a Custom Skin Part 2


1. Changing Oracle Logo from Login Page-

Oracle logo appearing on login page is located at below location,

<instances>/instance1/bifoundation/OracleBIPresentationServicesComponent/coreapplication_obips1/analyticsRes/sk_TestSkin/login/

The logo image located at this location is oracle_logo.png”.
So we simply need to replace this image with the logo that we need to put.
Rename new logo as “oracle_logo”
Logo should have same size as of Oracle logo i.e. 119x25

2. Changing Oracle Logo from Home Page-

Oracle logo appearing on home page is located at below location,

<instances>/instance1/bifoundation/OracleBIPresentationServicesComponent/coreapplication_obips1/analyticsRes/sk_TestSkin/B_mozila_4/

We need to follow same steps as we followed to change logo from login page.
The logo image located at this location is oracle_logo.png”.
So we simply need to replace this image with the logo that we need to put.
Rename new logo as “oracle_logo”
Logo should have same size as of Oracle logo i.e. 119x25

Once done restart presentation services and you will see the changed logos on login as well as home page.




Friday, June 13, 2014

OBIEE 11g : Display Image / Using Image as a Link on Dashboard Page

Display  Image:

We can add an image or image link on dashboard page by making use of HTML <img> tag.

Syntax for image tag is,

<img src="URL" alt="Some_Text" width="x" height="y">

Src is the location of image.
In case of OBIEE we will be storing image on server folder.
To fetch this image we need to give path of image location.

In this example I will be storing image on Custom skin folder created for Custom Skin.
To understand Custom Skin Folder creation please refer,

Deploying & Developing a Custom Skin Part 1


I have copied my image i.e. ‘welcome.jpg’ at following location in ‘analyticsRes’ custom skin folder,

<instance>/bifoundation/OracleBIPresentationServicesComponent/coreapplication_obips1/analyticsRes/s_TestSkin/b_mozilla_4

Now to fetch this image in we need to add text view to dashboard page and select ‘Contains HTML markup’.
Then use following code,

<img  src=”/analyticsRes/s_TestSkin/b_mozilla_4/welcome.jpg"  alt="WelcomeImg"  width="400"  height="200">

We can use this path from ‘analyticsRes’ as we have deployed this custom folder in fusion middleware.
This will display image on your dashboard page.

Using  Image as a Link on Dashboard Page:

Similarly to use  image as a link we can use following code,

<a href="http://slc02oky.oracle.com:7780/analytics/saw.dll?PortalGo&Action=prompt&path=%2Fshared%2FPrashant%2FTest%2FDashboard""><img  src=”/analyticsRes/s_TestSkin/b_mozilla_4/welcome.jpg"  alt="WelcomeImg"  width="400"  height="200">

Thus every time user clicks on this image he will get directed to Test Dashboard.

Similarly we can also navigate to other dashboard objects/pages/analysis/webpages just by changing path as per requirement.


Relevant Posts:

Thursday, June 12, 2014

OBIEE 11g : Using HTML Hyperlinks (Links) with OBIEE 11g

Using HTML Hyperlinks (Links) with OBIEE 11g

 

We can make use of HTML Hyperlinks to put links on dashboard.

Links allow users to click their way from page to page.

The HTML <a> tag defines a hyperlink.
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document.

When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

Syntax for HTML hyperlink is,

<a href="url">Link text</a>

For example:

Add text view in OBIEE and put following code in text view. Select ‘Contains HTML markup’

<a href=”http://bisimplified.blogspot.com”>Visit BI Simplified</a>


It will create hyperlink on dashboard as follows,

                          Visit BI Simplified

This link will open target web page within same link.

To open target page in new tab we can use following code,

<a href=”http://bisimplified.blogspot.com” target="_blank">Visit BI Simplified</a>

The link generated will be as follows,

                          Visit BI Simplified


You can allocate this link on dashboard as per your requirement using <div> tag.

OBIEE 11g : Using IFrame with OBIEE 11g

Using IFrame with OBIEE 11g
OBIEE 11g Object/Webpage embeding in dashboard


We can make use of HTML and Javascript very effectively when it comes to the UI customizations of OBIEE.

In this post I will explain about how we can use HTML <iframe> tag with OBIEE 11g for UI customizations.
An iframe is used to display a web page within a web page.
Syntax for iframe is,

                     <iframe src="URL" width="200" height="200"></iframe>

In OBIEE 11g we can use IFrame tag to in HTML code to display an object from within OBIEE such as analysis created, reports etc. or we can embed any webpage within dash board.

I have created a table which I need to display on my dashboard page using iframe.


To fetch the URL of this particular analysis I need to go to catlog and open this analysis.
On opening this analysis we get URL in browser address bar.



 We need to add this URL in iframe tag as follows,

Add text object in ‘IFrame Demo’ tab of Test dashboard. Add following script to dashboard and select ‘contains HTML markup’.

<iframe frameborder="0" MARGINWIDTH="0"  MARGINHEIGHT="0" scrolling="no" width="100%" height="1200"   src="http://slc02oky.oracle.com:7780/analytics/saw.dll?PortalGo&Action=prompt&path=%2Fshared%2FPrashant%2FIFrame_Demo_table"></iframe>

In src property we need to add URL of this particular analysis.

Now execute the dashboard.
On executing the dashboard, you will be able to see Child dashboard being merged into parent dashboard. But we do not wish to see the OBIEE header getting displayed with analysis.


To remove these links from embedded analysis add narrative view in analysis edit section and select ‘contains HTML markup’. Then add following script,




<script type="text/javascript">
var tds = document.getElementsByTagName('table');
for (var td = 0; td < tds.length; td++) {
if (tds[td].className != 'HeaderTopBar' && tds[td].className != 'HeaderSecondBar' ) {
continue;
}
if (tds[td].className == 'HeaderTopBar') {
var x = tds[td].parentNode;
x.removeChild(tds[td]);}
if (tds[td].className == 'HeaderSecondBar HeaderSecondBarPadding' || tds[td].className == 'HeaderSecondBar HeaderSecondBarMargin') {
var x = tds[td].parentNode;
x.removeChild(tds[td]);}
}
</script>

This script disables the header objects of child dashboard.

getElementsByTagName() method accesses all elements with the specified tagname.

'HeaderTopBar' and HeaderSecondBar' are the class names of header bars.
So using this javascript code we are disabling the header bars.

Run the dashboard and you will be able to see the analysis embedded within dashboard page.





Same way  we can embed a web page or web page object on dashboard.
In following example I am embedding http://www.bseindia.com/  on dashboard page.

<iframe frameborder="0" MARGINWIDTH="0"  MARGINHEIGHT="0" scrolling="no" width="100%" height="1200"   src="http://www.bseindia.com/"></iframe>



In this example we don’t need to add javascript to disable header.
Set width and height as per requirement.

Monday, June 9, 2014

OBIEE 11g: Deploying & Developing a Custom Skin Part 2

Developing a Custom Skin


1.   Once the custom skin folder ‘analyticRes’ is deployed and tested successfully, we can create custom skin.

2.   To create custom skin we will copy one default skins, either blafp or FusionFX.
These skins are located at,

<ORACLE_HOME>/OracleBI1/bifoundation/web/app/res 

3.   We will copy ‘FusionFX’ skin for our development.
We can see 2 forlders at these locations as s_FusionFX and sk_FusionFX
Here 's' represents style and 'sk' represents skin.

4.   We will rename these folders within AnalyticRes folder as per the requirement.
      Now whatever changes we need to do we will be doing in these copied skin folders.
      For example, our skin name is 'TestSkin' and 2 copied folders will be s_TestSkin and sk_TesSkin.

5.   Now we need to set this skin as a default skin for our dashboard.
For this we need to add a XML code within instanceconfig.xml file located at,

<ORACLE_INSTANCE>/config/OracleBIPresentationServicesComponent/coreappliation_obips1

At the bottom of the file but within the <ServerInstance> grouping, enter the following code:

 <URL>
 <CustomerResourcePhysicalPath>/u01/Middleware/instances/instance1/bifoundation/OracleBIPresentationServicesComponent/coreapplication_obips1/analyticsRes
</CustomerResourcePhysicalPath>

<CustomerResourceVirtualPath>/analyticsRes</CustomerResourceVirtualPath>

  </URL>

 <UI>
      <DefaultStyle>TestSkin</DefaultStyle>
      <DefaultSkin>TestSkin</DefaultSkin>
 </UI>


Here <CustomerResourcePhysicalPath> sets the path of the skin.
<CustomerResourceVirtualPath> sets the virtual path for path mentioned within <CustomerResourceVirtualPath> tag.
<DefaultStyle> sets the default style and will map to folder s_TestSkin.
<DefaultSkin> sets the default skin and will map to folder sk_TestSkin.


6.    Now restart the Presentation Services from EM.

7.   Once the services are restarted you can check the default skin being set under dashboard properties.



In my further posts I will explain further customizations for the custom skin we created.


Relevant Post :
Deploying & Developing a Custom Skin Part 1

OBIEE 11g: Deploying & Developing a Custom Skin Part 1


Deploying a Custom Skin Folder

We can completely customize the OBIEE appearance and design our own custom skin.
OBIEE comes with 2 default skins which can be applied from dashboard properties.
These skins are nothing but ‘blafp’ and ‘FusionFX’.
You can find these default skins at,

<ORACLE_HOME>/OracleBI1/bifoundation/web/app/res 

This directory should not be modified  it will get overwritten with any new installation.
So its suggested to create a new Static Directory for new custom skin.

In this post I will explain how to deploy and develop  the custom skin.

Creating a Static Directory in WebLogic Server

1 .
The default installation for Oracle BI EE 11g creates a default directory that can be used for customization.This directory is,

<ORACLE_INSTANCE>/bifoundation/OracleBIPresentationServicesComponent
/coreappplication_obips1/analyticsRes

To expose this directory, you must open the WebLogic Administration Console.
Open a browser window and in the address bar, enterhttp://<hostname>:7001/console/login/LoginForm.jsp (for example, http://localhost:7001/console/login/LoginForm.jsp). The WLS Login window appears.





2 .
Select Deployments from the Domain Structure pane on the left.


The "Summary of Deployments" pane appears on the right.



3 .
In the Change Center pane on the left (directly above the Domain Structure pane), 
click Lock & Edit.


All applications are made available for update within the table and the Install button is enabled. Note that the "Lock & Edit" button is now disabled.



4 .
In the "Summary of Deployments" pane on the right, click the Control tab and then click Install, enabling you to install a new web application. The Install Application Assistant pane appears.



5 .
a. Select the appropriate folders within the Install Application Assistant pane to navigate to<ORACLE_INSTANCE>/bifoundation/OracleBIPresentationServicesComponent
/coreappplication_obips1.
The path is automatically entered for you.
b. Select the option button for analyticsRes. This is a valid application for deployment.




6 .
Click Next and accept the default value "Install this deployment as an application."



7 .
Click Next. In "Optional Settings - Source accessibility", select the radio button for I will make the deployment accessible from the following location and accept the default path.



8 .
Click Next to review the summary. In the "Additional configuration" section, ensure that the radio button for Yes, take me to the deployment's configuration screen is selected, and then click Finish.


9 .
The "Settings for analyticsRes" pane appears. Click Save.

A confirmation message appears above the "Settings for analyticsRes" pane.


10.   
  In the Change Center pane on the left, click Activate Changes.
A second confirmation message appears above the "Settings for analyticsRes" pane.

11. 
Select Deployments in the Domain Structure pane.

12 .
Click the Control tab and then select the check box for the analyticsRes application. Notice that the state for analyticsRes appears asPrepared. You need to start the application.

13 .
Click Start and then select Servicing all requests.



14 .
Click Yes in the Start Application Assistant pane.

15 .
The "Summary of Deployments" pane reappears with a confirmation message. Note that analyticsRes now shows a state of Active.

16 .
Open a browser window and enter http://<hostname>:7001/analyticsRes/test.txt (for example,http://localhost:7001/analyticsRes/test.txt). Your test file should appear in the browser window.



That completes our custom skin folder deployment.
In my next post I will write about developing custom skin.