Exécuter des actions de données contenant un contenu intégré
Suivez les informations décrites ici pour en savoir plus sur l'intégration et l'exécution des actions de données dans une visualisation dans des conteneurs externes tels qu'une page HTML ou une page Web d'application.
Note :
Les exemples de cette section s'appliquent aux actions de données intégrées lorsque l'application d'intégration n'utilise pas la technologie Oracle JET. Voir :Exécution d'actions de données
Lorsque vous cliquez sur une action de données Publier l'événement, elle détermine les informations contextuelles de la visualisation et transmet ces informations au service d'action de navigation pour traitement. Le processus de service de l'action de navigation génère un événement nommé "oracle.bitech.dataaction" avec les données utiles contextuelles. Vous pouvez vous abonner à cet événement et recevoir les données utiles dans le rappel d'événement, puis utiliser ces données comme vous le souhaitez.
La visualisation suivante affiche les revenus en dollars pour les secteurs d'activité, par exemple Communication, Digital, Electronics, des différentes organisations, par exemple Franchises Org, Inbound Org, International Org.
Format et contexte des événements et des données utiles
L'exemple ci-dessous présente la publication d'un événement lorsque l'action de données intégrée est appelée par une ou plusieurs cellules de données sur lesquelles un utilisateur a cliqué à l'aide du bouton droit de la souris et que l'action de données a été sélectionnée dans le menu affiché dans le classeur intégré.
Les exemples ci-dessous sont issus d'un fichier JSON, par exemple, obitech-cca/cca/component.json.
Format de l'événement
"events": {
"oracle.bitech.dataaction": {
"description": "Generic DV Event published from an embedded data visualization.",
"bubbles": true,
"cancelable": false,
"detail": {
"eventName": {
"description": "The name of the published BI Event",
"type": "string"
},
"payload": {
"description": "The payload contains context and related information to the event published",
"type": "object"
}
}
}
Format de données utiles
{"context":[
"or": [
"and":[
{"contextParamValues":[...],
"contextParamValuesKeys":[...],
"colFormula":"...",
"displayName":"...",
"isDoubleColumn":true/false,
"dataType":"..."
}
]
]
]
}
Transmission d'une valeur pour une colonne unique (transmission par contexte)
Dans cet exemple, lorsque vous cliquez sur une cellule de colonne, l'objet contenant des informations de contexte sur la colonne est transmis au conteneur externe. Dans ce cas, le nom de l'organisation est transmis.
{
"context": [
{
"contextParamValues": [
"Inbound Org."
],
"contextParamValuesKeys": [
"Inbound Org."
],
"colFormula": "\"A - Sample Sales\".\"Offices\".\"D3 Organization\"",
"displayName": "D3 Organization",
"isDoubleColumn": false,
"dataType": "varchar"
}
]
}Transmission d'une valeur pour chaque colonne (transmission par contexte)
Dans cet exemple, lorsque vous cliquez sur une cellule de colonne, par exemple Inbound Org et Digital products et que vous cliquez sur l'option de menu Action de données intégrée 1 pour sélectionner l'action intégrée, les revenus en dollars pour le secteur d'activité et l'organisation sélectionnés sont transmis. Par exemple, les revenus du secteur d'activité Digital pour l'organisation Inbound Org sont transmis, à savoir 1 458 738,42 dollars dans cet exemple.
.gif
{
"context": [
{
"contextParamValues": [
"Digital"
],
"contextParamValuesKeys": [
"Digital"
],
"colFormula": "\"A - Sample Sales\".\"Products\".\"P3 LOB\"",
"displayName": "P3 LOB",
"isDoubleColumn": false,
"dataType": "varchar"
},
{
"contextParamValues": [
"Inbound Org."
],
"contextParamValuesKeys": [
"Inbound Org."
],
"colFormula": "\"A - Sample Sales\".\"Offices\".\"D3 Organization\"",
"displayName": "D3 Organization",
"isDoubleColumn": false,
"dataType": "varchar"
}
]
}Transmission de plusieurs valeurs (transmission par contexte)
Dans cet exemple, lorsque vous cliquez sur deux cellules sur une rangée (par exemple Inbound Org et International Org pour le secteur d'activité Digital), puis que vous sélectionnez l'option de menu Action de données intégrée 1 pour sélectionner l'action intégrée, les revenus en dollars des deux cellules sélectionnées sont transmis. Par exemple, lorsque vous cliquez sur les revenus du secteur d'activité Digital pour les deux organisations sélectionnées (Inbound Org et International Org), les valeurs 1 458 738,42 et 915 528,97 dollars sont transmises.
.gif
{
"context": [
{
"or": [
{
"and": [
{
"contextParamValues": [
"Digital"
],
"contextParamValuesKeys": [
"Digital"
],
"colFormula": "\"A - Sample Sales\".\"Products\".\"P3 LOB\"",
"displayName": "P3 LOB",
"isDoubleColumn": false,
"dataType": "varchar"
},
{
"contextParamValues": [
"Inbound Org."
],
"contextParamValuesKeys": [
"Inbound Org."
],
"colFormula": "\"A - Sample Sales\".\"Offices\".\"D3 Organization\"",
"displayName": "D3 Organization",
"isDoubleColumn": false,
"dataType": "varchar"
}
]
},
{
"and": [
{
"contextParamValues": [
"Digital"
],
"contextParamValuesKeys": [
"Digital"
],
"colFormula": "\"A - Sample Sales\".\"Products\".\"P3 LOB\"",
"displayName": "P3 LOB",
"isDoubleColumn": false,
"dataType": "varchar"
},
{
"contextParamValues": [
"International Org."
],
"contextParamValuesKeys": [
"International Org."
],
"colFormula": "\"A - Sample Sales\".\"Offices\".\"D3 Organization\"",
"displayName": "D3 Organization",
"isDoubleColumn": false,
"dataType": "varchar"
}
]
}
]
}
]
}Suivez ces étapes pour afficher les données utiles des événements à l'aide des outils du navigateur Chrome.
- Dans Chrome, cliquez avec le bouton droit de la souris et sélectionnez Inspecter la source.
- Dans l'onglet Sources, cliquez avec le bouton droit de la souris sur la ligne
console.log("To view the payload, add a breakpoint on this line and use the browser tools debugger") ;et sélectionnez Ajouter un point d'arrêt.Lorsque l'action de données d'événement est appelée depuis le canevas intégré, une entrée de données utiles apparaît dans la section Portée du volet droit des outils du navigateur.
- Cliquez avec le bouton droit de la souris sur l'entrée de données utiles et sélectionnez Enregistrer comme variable globale.
La variable globale peut être affichée dans l'onglet Console et développée pour voir les détails des données utiles.
Exemple de page HTML avec visualisation recevant des événements
L'exemple de code suivant illustre comment définir un module d'écoute d'événements pour une action de données d'événement Analytics. Vous devez mettre à jour l'instance Analytics et le chemin intégré dans le classeur dans cet exemple de code. Le classeur doit avoir une action de données d'événement définie. L'événement écouté s'appelle oracle.bitech.dataaction. Lorsque l'événement est déclenché, un message est envoyé à la console.
<!DOCTYPE HTML>
<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Oracle Analytics embed example to view data action event payload</title>
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<script src="https://<OAC-INSTANCE>.analytics.ocp.oraclecloud.com/public/dv/v1/embedding/standalone/embedding.js" type="application/javascript">
</script>
</head>
<body>
<h1>Oracle Analytics embed example to view data action event payload</h1>
<div id="mydiv" style="position: absolute; width: calc(100% - 40px); height: calc(100% - 120px)" >
<oracle-dv project-path='<WORKBOOK-PATH-TO-EMBED>'
active-page='insight'
active-tab-id='snapshot!canvas!1'>
</oracle-dv>
</div>
<script>
requirejs(['knockout', 'ojs/ojcore', 'ojs/ojknockout', 'ojs/ojcomposite', 'jet-composites/oracle-dv/loader'], function(ko) {
ko.applyBindings();
});
</script>
<script>
var eventName = 'oracle.bitech.dataaction';
var element = document.getElementById("mydiv");
if (element) {
var oEventListener = element.addEventListener(eventName, function (e) {
console.log("***** Payload from DV sent ***** ");
console.log("eventName = " + e.detail.eventName);
console.log("To view the payload, add a breakpoint on this line and use the browser tools debugger") ;
console.log("******************************** ");
}, true);
}
</script>
</body>
</html>
Vous pouvez également modifier la section <script> dans l'exemple de code précédent pour renvoyer les valeurs indiquant où l'action de données a été appelée :
<script>
var eventName = 'oracle.bitech.dataaction';
var element = document.getElementById("mydiv");
if (element) {
var oEventListener = element.addEventListener(eventName, function (e) {
console.log("***** Payload from DV sent ***** ");
console.log("eventName = " + e.detail.eventName);
console.log("To view the payload, add a breakpoint on this line and use the browser tools debugger") ;
console.log("******************************** ");
var res = " Data Received from DV Content: ";
// Get the values of the row from where data action was invoked
Object.keys(e.detail.payload.context).forEach(function(key) {
res = res.concat(key);
res = res.concat(" : ");
var temp = e.detail.payload.context[key]["oValueMap"];
var temp1 = Object.keys(temp)[0];
res = res.concat(temp1);
res = res.concat(" | ");
});
console.log("Data Action Row Context : " + res);
}, true);
}
</script>