Visual Builder Component for Oracle Analytics — Part 7 — Events
An event can be a user action and software development makes heavy use of event driven programming. Oracle Analytics Cloud Data Actions functionality allows the creation of a number of ‘actions’ whereby a user can navigate to different analytics content, passing values as filters, navigate to URLs or call REST APIs.
Part 7 of this blog series will describe how to use an OAC event data action that allow an end user to invoke the event from within the context of an analytics canvas and pass that context to the host application.
Note: this functionality was introduced in the 1.2.2 release of the oa-oj-project component. See below for details on upgrading.
Configuring the web component
The first task is to configure the OAC web component to handle events passed from the embedded OAC canvas. This video runs through the configuration and I’ll describe the steps below:
The first step is to navigate to the ‘Events’ tab in the properties section of the OA web component:
Then choose ‘New Event’ , ‘New Custom Event’:
Select the option for ‘Oracle Analytics Project Events’, ‘oacEventDataAction’ (if you’ve just upgraded the web component and don’t see this, refresh your browser page and it should appear) :
This will prompt to select or create a new action chain — create a new one:
At this point the VB UI changes to the action chain designer, navigate back to the ‘Page Designer’. At this stage, create two Input Parameters:
event — string
eventPayload — object
Use the expression editor to provide the following mappings:
event — $event.detail.event
eventPayload — $event.detail.payload.context
Using the web component
This video illustrates how to display the payload passed by the OAC Event Data action in the browser console:
The first step is to create a function that will accept the payload as a parameter and display that to the console:
Here is sample code for that function:
define([], () => {
'use strict';
class PageModule {
constructor(eventPayloadObject) {
this.eventPayloadObject = eventPayloadObject;
}
outputEvent(eventPayloadObject) {
console.log("***** Payload from DV in Visual Builder ***** ");
console.log("payload = " + JSON.stringify(eventPayloadObject));
console.log("***** Payload from DV n Visual Builder end ***** ");
}
}
return PageModule;
});The action chain associated with the event, has a node added to call this function when the event is fired by the end user:
The mapping shows the eventPayload mapped to the function argument ‘eventPayloadObject’:
Invoking the event data action ‘Send Event’:
Viewing the event payload in the browser console:
The event is invoked from a bar chart with values of Product Category = Office Supplies, Ship Mode = Express Air and Sales = 275,226.82.
You will notice that there are sections for each dimension / attribute or measure and the property that contains the actual value is ‘oValueMap’.
Here is an example of the payload contents:
payload = {
"ProductCategory": {
"oColumnInfo": {
"_bIsXSA": true,
"SerializedObjectType": {
"Caption": "caption"
},
"_info": {
"columnID": "ProductCategory",
"isTime": false,
"desc": "",
"subjectArea": "XSA('mike.durran@oracle.com'.'Sample Order Lines')",
"columnHeading": {
"text": "Product Category"
},
"tableHeading": {
"text": "Columns"
},
"type": "regularColumn",
"sqlInfo": {
"dataType": "varchar",
"category": "text",
"primaryType": "text",
"typeName": "VARCHAR",
"aggType": "nonAgg",
"aggRule": "none",
"nullable": true,
"displayFormula": "\"Columns\".\"Product Category\"",
"sqlFormula": "XSA('mike.durran@oracle.com'.'Sample Order Lines').\"Columns\".\"Product Category\"",
"sqlFormulaIn2Parts": "\"Columns\".\"Product Category\"",
"sqlFormulaSubjectAreaPart": "XSA('mike.durran@oracle.com'.'Sample Order Lines')",
"sqlFormulaDisplaySubjectAreaPart": "XSA('mike.durran@oracle.com'.'Sample Order Lines')",
"hasSortKey": false,
"isDoubleColumn": false,
"precision": "",
"scale": ""
},
"formula": "XSA('mike.durran@oracle.com'.'Sample Order Lines').\"Columns\".\"Product Category\"",
"additionalProperties": {},
"bIsFormulaValid": true,
"serializedType": "regularColumn",
"isUserExpression": false
},
"_internalIsMeasure": false
},
"oValueMap": {
"Office Supplies": "Office Supplies"
}
},
"ShipMode": {
"oColumnInfo": {
"_bIsXSA": true,
"SerializedObjectType": {
"Caption": "caption"
},
"_info": {
"columnID": "ShipMode",
"isTime": false,
"desc": "",
"subjectArea": "XSA('mike.durran@oracle.com'.'Sample Order Lines')",
"columnHeading": {
"text": "Ship Mode"
},
"tableHeading": {
"text": "Columns"
},
"type": "regularColumn",
"sqlInfo": {
"dataType": "varchar",
"category": "text",
"primaryType": "text",
"typeName": "VARCHAR",
"aggType": "nonAgg",
"aggRule": "none",
"nullable": true,
"displayFormula": "\"Columns\".\"Ship Mode\"",
"sqlFormula": "XSA('mike.durran@oracle.com'.'Sample Order Lines').\"Columns\".\"Ship Mode\"",
"sqlFormulaIn2Parts": "\"Columns\".\"Ship Mode\"",
"sqlFormulaSubjectAreaPart": "XSA('mike.durran@oracle.com'.'Sample Order Lines')",
"sqlFormulaDisplaySubjectAreaPart": "XSA('mike.durran@oracle.com'.'Sample Order Lines')",
"hasSortKey": false,
"isDoubleColumn": false,
"precision": "",
"scale": ""
},
"formula": "XSA('mike.durran@oracle.com'.'Sample Order Lines').\"Columns\".\"Ship Mode\"",
"additionalProperties": {},
"bIsFormulaValid": true,
"serializedType": "regularColumn",
"isUserExpression": false
},
"_internalIsMeasure": false
},
"oValueMap": {
"Express Air": "Express Air"
}
},
"Sales": {
"oColumnInfo": {
"_bIsXSA": true,
"SerializedObjectType": {
"Caption": "caption"
},
"_info": {
"columnID": "Sales",
"isTime": false,
"desc": "",
"subjectArea": "XSA('mike.durran@oracle.com'.'Sample Order Lines')",
"columnHeading": {
"text": "Sales"
},
"tableHeading": {
"text": "Columns"
},
"type": "regularColumn",
"sqlInfo": {
"dataType": "numeric",
"category": "numeric",
"primaryType": "numeric",
"typeName": "NUMERIC",
"aggType": "agg",
"aggRule": "sum",
"nullable": true,
"displayFormula": "\"Columns\".\"Sales\"",
"sqlFormula": "XSA('mike.durran@oracle.com'.'Sample Order Lines').\"Columns\".\"Sales\"",
"sqlFormulaIn2Parts": "\"Columns\".\"Sales\"",
"sqlFormulaSubjectAreaPart": "XSA('mike.durran@oracle.com'.'Sample Order Lines')",
"sqlFormulaDisplaySubjectAreaPart": "XSA('mike.durran@oracle.com'.'Sample Order Lines')",
"hasSortKey": false,
"isDoubleColumn": false,
"precision": "0",
"scale": "0"
},
"formula": "XSA('mike.durran@oracle.com'.'Sample Order Lines').\"Columns\".\"Sales\"",
"additionalProperties": {},
"bIsFormulaValid": true,
"serializedType": "regularColumn",
"isUserExpression": false
},
"_internalIsMeasure": true
},
"oValueMap": {
"275226.81999999997": "275,226.81999999995"
}
}
}Here is some sample code for a function that can be called in the action chain that executes after the event is invoked from the embedded analytics canvas. This function will obtain the dimensions / attributes / measure and their values and create a string seprated by a colon.
createString(eventPayloadObject) {
var res = "";
Object.keys(eventPayloadObject).forEach(function(key) {
console.log(key, eventPayloadObject[key]["oValueMap"]);
res = res.concat(key);
res = res.concat(":");
var temp = eventPayloadObject[key]["oValueMap"];
var temp1 = Object.keys(temp)[0];
res = res.concat(temp1);
res = res.concat(",");
});
console.log(res);
return(res);
}The resulting string (I’ve called this ‘eventValueString’) is:
ProductCategory:Office Supplies,ShipMode:Express Air,Sales:275226.81999999997,At this stage, the values sent from the payload can be used elsewhere in the application.
Upgrading to Version 1.2.2 of oj-oa-project
This video explains how to upgrade an existing instance of oj-oa-project that you may be using in a VB project.
