Embedding Oracle Analytics Dynamically - Part II

This blog is a part of the 2 part blog series on embedding Oracle Analytics content into an External portal. In the first part, we explored how to embed visualizations from a project into an external web portal, with the ability to pass filter values from the web portal down to the embedded Oracle Analytics visual. In this second part, let's see how to set-up an interaction directly initiated in Oracle Analytics visual, and sent to the external web portal. This will represents the other way of configuring the communication. This ability to communicate both ways makes the embedded visual, dynamic and interactive, making it very useful in data analytics context.

Oracle Analytics Data Actions can be included as a part of the embedded visualization, that is the feature we will leverage to let Oracle Analytics initiate actions into the host web portal. We are going to use a particular data action type called "Publish Event" in establishing the communication from the embedded Analytics content to the external web portal. When the Publish Event data action is invoked on, it enables external applications to directly receive context from the Analytics visualization . The word context here means the set of data elements values at the selected location in the visualization. 

In the first part of the blog, our web portal looked something like this

We will be using the same and will be enhancing this further by adding the Publish Event data action for the Analytics Project. To create a Publish Event data action, we should follow the following steps.

• Login to your OAC instance and navigate to the Analytics project embedded inside our website 
• Click on the hamburger icon towards the top right corner and choose the option "Data Actions"
• Click on the "+" symbol to create a new data action 
• Give it a name and choose the type of the data action as "Publish Event"
• Event Name is an unique name for the event a user should enter. This is passed when the context event is published. User can choose to AnchorTo data element(s) and choose Pass Values, and specify what data element values to be passed when data action is clicked

Click on Save to create the Publish Event data action.

A page refresh is needed on our website for the changes in embedded content to kick-in. Now when a right-click is performed on the embedded visual, it displays all applicable data actions and the "Embedding DA1" data action of the Publish Event type will also be part of the options. When this data action is invoked, it passes the following information to the navigation action service

In our case 

event Name = "Event from DA1"

event Type = "oracle.bitech.dataAction"

payload = a json object containing the values of rows and columns that was selected during the right click action

Event Type

The navigation action service raises an event type called "oracle.bitech.dataaction" which is a generic event type for all data actions of type Publish Event. So for a third party/ external website to make use of this event type, it needs to do the following

1) Subscribe to the publish event called 'oracle.bitech.dataaction'

2) Define an event listener and an event callback for the event

Payload Format

The payload information that is getting passed through the publish event data action is a JSON object with 2 attributes.

• The context property has all the information about the columns and it's values that was selected during the right click action.
• The contextv2 property has the information about the remaining context like the filters the embedding visualization is listening to. This might be canvas/project/listbox/viz level filters.

For example, to get the list of filters the visualization is listening to, we can use the following code snippet:

    e.detail.payload.contextv2().getFilterModels()

This will list down an array of filters the visualization is listening to. If the array length is more than 0, we can get the column name and the values being used as filter by querying the filterModel.

    oFilterModel.getDataElement().getColumnID() -> Column Name used as filter

    oFilterModel.getSelectedValues() -> Filter Values

These methods are specific for list filters. For other types of filters the methods might vary.

Now having all this information, we will update our website to include the Publish Event data action and to capture the context of selection sent to our website.

There is a separate <div> tag included in our website to catch the data that is being sent from the embedded viz. 

By default, it shows that there is no data received from the embedded viz. But once the Publish Event data action is invoked, this text will be replaced with the information sent on the payload from the data action.

Publish Event data action getting invoked

Data captured from data action

We are now able to capture the information sent from the embedded viz. The modifications to our web portal code to listen to the publish event data action is as follows.

In this example we are printing the context inside a <div> tag but it can be extended further as required.

Thanks for reading