Pop up effect in OBIEE using jQuery

.

In this article of our OBIEE Customization Series I will show you how to introduce the Pop up effect in OBIEE using jQuery. The tooltip can provide additional details (like an explanation of a KPI) or load content such as target report.

Motivation

For our example let’s imagine we have a summary level report with purchase orders listed. We can navigate to order details level, but that would require leaving the current page or opening the content of detail report in a new window. What if we could have a summary level report and peek into details on the same page? Implementing the dynamic navigation to a report inside the tooltip will allow us to achieve that.

Pop up effect in OBIEE using jQuery

Because OBIEE Answers and Dashboards allow using web technologies such as HTML5, JavaScript, CSS3, and AJAX we are able to customize the look and user interface of any report just like we can do with websites. To achieve that, we will use the most popular JavaScript library called jQuery. It’s an optimized .js file containing Document Object Model (DOM), events, effects and Ajax functions that can be called from the report. JQuery is widely used in website development and allows implementing complex components using pre-defined methods defined in library. For the tooltip we will need also a plugin, an additional library that defines the effect. There are many available plugins for tooltip functionality both free and requiring paid license. Many UI libraries such as jQuery UI or Kendo UI offer, among others, a tooltip functionality. For the example in this article we will use the Tipped tooltip library, which offers a lot of customization options but requires a licence for commercial use.
As an example in this article we will invoke a tooltip that loads the contents of target report when hovered on a column’s value. To create this effect we will need to use AJAX technology. Such method is already included in the jQuery library. We will need to specify the target page or report from which the external content will be loaded.

Implementing the tooltip

Let’s start by creating a simple report showing Order Number, Number of Order Lines and Order Cost.

graph1

Our objective here is to provide additional information of the orders displayed in the first report but without navigating. Therefore let’s create another simple report that will contain more details on a given Order and its Order Lines. We need to add a filter - Order Number is prompted to enable navigation.

graph2

Let’s go to the results tab and edit the views. The contents of this report will be displayed in a tooltip. We can add a pie chart with breakdown of the line cost and save the report as Order Lines Report.

graph3

Let’s get back to the main report. We will need to add a static text view with code to load libraries. Those files could be referred pointing to the file on the internet (we can do it by loading jQuery library from google developers and for example jQuery UI library which contains tooltip functionality). However we should have those files on our OBIEE server. Often internal network security settings disallow loading content (especially script files with .js extension) from external sources. A one-domain policy is used to prevent security breaches. Because of that we will need to save those library files on OBIEE server. To be able to link a file on a OBIEE server we will need to create a virtual directory on OBIEE server in weblogic settings.
When we have the virtual directory created we can refer to the libraries using such link: http://localhost:9704/userfiles/jquery.1.9.0.min.js

graph4

 

First, we need to load the jQuery library:

<script type="text/javascript" src="http://localhost1:9704/user_files/jquery-1.9.0.min.js"></script>

Tipped libraries:  

<script type="text/javascript" src="http://localhost:9704/user_files/Tipped/tipped-3.1.8/js/tipped/tipped.js"></script>
<script type="text/javascript" src="http://localhost:9704/user_files/Tipped/tipped-3.1.8/js/excanvas/excanvas.js"></script>
 

Tipped CSS stylesheet, which contains the styles used for tooltip customization:

<link rel="stylesheet" type="text/css" href="http://localhost:9704/user_files/Tipped/tipped-3.1.8/css/tipped/tipped.css"/>

Then let’s edit the column formula to dynamically generate a tooltip with navigation to Order Line Details.

graph5

We need a couple of elements here. Instead of just "Order"."Order Number" column value we need to embed some more elements in the formula code. The code inside will contain HTML tags so let’s mark Constains HTML Markup option.

graph6

For our example we will need to use the following column formula: '

'<div id="popup' ||"Order"."Order Number"|| '">
' ||"Order"."Order Number"|| '
</div>'
||'<script type="text/javascript"> Tipped.create("#popup' ||"Order"."Order Number"||'", "saw.dll?Go&path=%2Fshared%2FReports%2FOrder%20Lines%20Report&Action=extract&p0=1&p1=eq&p2=%22Order%22.%22Order%20Number%22&p3='||"Order"."Order Number"||'",
{ajax: true,
 skin:"white",
 hook: "bottomright",
 border: { size:1},
 afterUpdate: function()
{}
} );
</script>'

Explanation:
To separate HTML formatting from the OBIEE column value ("Order"."Order Number") we will need to use single quote (') and to merge HTML formatting with the column value we need to use concatenate (||).

<divmarkup is a placeholder for our tooltip. Its id is generated dynamically by concatenation with value of the "Order"."Order Number" column.
Here we initialize Tipped script and call plugin’s method to create a tooltip. The syntax of the script to create a Tipped tooltip is as follows:
<script type="text/javascript">
Tipped.create("#target", "url", { ajax: true });
</script>

# is a jQuery selector that points to a single element with the given id attribute, in our case #popup div concatenated with Order Number. Then there is a url with the external content to be loaded inside ("url"). The important part here is the ajax: true option, which allows loading of external content.

<script type="text/javascript"> Tipped.create("#popup' ||"Order"."Order Number"||'

So basically, the popup will display whatever contents are displayed in the url, therefore we can pass a GOURL link to the detail report passing the order as a parameter. Note the Extract parameter which displays just the results of target report in a format without the paging control, hot links and other elements.

"saw.dll?Go&path=%2Fshared%Reports%2FOrder%20Lines%20Report &Action=extract&p0=1&p1=eq&p2=%22Order%22.%22Order%20Number%22&p3='||"Order"."Order Number"||'"

Here we specify the formatting options of the tooltip. For Tipped tooltip to load external content we will need to use  ajax: true option. Tipped offers richness of customization options for skins, positioning and effects.

{ajax: true,
 skin:"white",
 hook: "bottomright",
 border: { size:1},
 afterUpdate: function()
{}
}

Because the column formula does not include the whole script (it references to the scripts loaded in the Narrative View) we will get a “Formula syntax is invalid” error:

graph7

We can ignore it, as it will work correctly with the whole script at the report execution. We also need to change the Data Format Column Properties:

graph8

We need to override Default Data Format in order to treat text as HTML:

graph9

Let’s make sure that report has the Static Text view added to the Compound Layout.

graph10

Now we can try out our development. The table with Orders should display the tooltip with navigation to target report with the Order details.

graph11

On hover, the order details from the target report are displayed in a tooltip:

graph12

The contents of the tooltip are displayed dynamically based on the navigation condition (in our case Order Number)

Maintenance and other considerations

We need to take into consideration that by embedding scripts to the OBIEE reports we are adding another layer of complexity.  This is especially true for the maintenance reasons as it requires more time and skills for the end users and developers to edit and create reports that contain scripts. Another concern should be that adding too many scripts to the report may negatively affect the performance of the report. We also need to take into consideration the web browsers used by users in the company. Some of the plugins and the latest versions of jQuery library are fully compatible only with the latest versions of browsers.

Conclusions

Thanks to the possibility of using many web technologies such as JavaScript we are able to customize OBIEE reports and dashboards. Tooltip can be a valuable tool to enhance the functionality of OBIEE reports, allowing users to get detailed information when hovering over a link.

Do you have another method to achieve the pop-up effect? Please leave us a comment below, we would be happy to answer it! If you would like to know more about visual enhancements in OBIEE, read our blog posts series about enhanced visualization:

Rich Visualizations in OBIEE with Javascript

16 Responses to “Pop up effect in OBIEE using jQuery”

  1. Avinash says:

    Hi,

    Nice post, thanks for posting..

    I need to some suggestions pls help me out.

    from where i can download the J query script?? on which path i need to place the lib files.

    Thanks,

  2. Rafal says:

    Hi Avinash,

    The jQuery library is available on its official website (http://jquery.com/download/). For the tooltip library you need to download it from the plugin website (example used in this article is created with Tipped).

    To use them in OBIEE you should store them in a virtual directory created on the WebLogic server (please see http://docs.oracle.com/cd/E13222_01/wls/docs81/webapp/weblogic_xml.html#1039396 for reference).

  3. Vikram says:

    Hello Rafal,
    I really like the popup feature shown and would like to try and implement the same.
    I followed your outlined steps to implement a popup on a col.
    I do not get the column to have a hyperlink appearance nor do I see a popup on hover or click on the column values.

    I have the javascript files and css files uploaded (Different version numbers as I found on the website)
    The links for these resources works since I’m able to see the javascript and css files content when I click on them and source it.

    What would be the troubleshooting steps please?

  4. Cindy says:

    Hello Rafal,

    I have tried all the steps that you mentioned in your blog, but I didn’t get the same results. I put this URL in the code:
    “saw.dll?Go&path=%2Fshared%2FDireccion_General%2FPrueba_Tipped_1&Action=Extract”
    When I opened the analysis and I dragged the mouse over it didn’t show the content of the detail report, instead of that it showed the url text.

    What do you think is happening?

    Thanks.

  5. satish says:

    Hi,

    Great Post.I got it working on the report level.but when i push that report to dashboard ,the popup effect seems to be not working .Any idea what’s happening?

  6. Buti says:

    Hi Rafal

    Good Post, I followed all the steps outlined but I could not get the tooltip to show or working. I do not get the column to have a popup nor a hyperlink. Can you please assist?

  7. Raghu says:

    Hi Rafal,

    Nice post.

    I need to some suggestions please help me.

    from where i can download the J query script?? on which path i need to place the lib files.

    how to create virtual directory?

    Regards,
    Raghu.

  8. Bibu says:

    Hi satish,
    I got the same issue as yours, can you kindly share if you did solve it?
    Thanks.

  9. Jose says:

    Hi Satish and Bibu,
    I have the same issue that you both, did you find the way to solve it??
    If it so, could you please share it??

    Thanks
    Bye!!

  10. Chinmay says:

    Hi,
    I tried to implement the solution but no success.
    I downloaded the latest version of tipped and the specified version of jquery
    I can access those files from the localhost bi url.
    But what about the ‘Interaction tab’. Do we Specify the link to ‘Detail report’?
    Coz without it i am not getting a link on the value in the report.
    Help would be appreciated . Thanks

  11. Jose says:

    Chinmay, yes you have to do that, in the intareaction tab

  12. DEBASHIS Paul says:

    Hi Rafal ,
    I don’t see this functionality is working as expected and demoed here.
    I got tooltip but it is showing “No Result” and I see from session log that the detail query didn’t fire while hovering mouse on Primary report column (here Order Number) .
    Also for tooltip when I placed the report in Dashboard I don’t see the tooltip appearing anymore. Can you please help or if anybody find any solution on it about the behavior ?
    thanks

  13. Pavan says:

    Hello Rafal,

    Thanks for your post, this was really awesome!!!

    I am trying to implement the same, but after adding the jquery links in the static text view, the report is not retrieving any data, it is keep loading. Could you please suggest the possible causes? Thanks in advance!!

    Pavan

  14. Anila says:

    Hi, Is there a way to add checkboxes next to the rows and when selected can act as a global filter.

  15. Will this technique work for popping up an Oracle APEX page?

Leave a Comment

privacy policy - Copyright © 2000-2010 ClearPeaks

topnav