Exécution d'actions de données comportant du contenu imbriqué
Suivez les informations décrites dans cette section pour apprendre à incorporer et à exécuter des actions de données dans une visualisation au sein de conteneurs externes tels qu'une page HTML ou une page Web d'application.
Remarque :
Les exemples de cette section s'appliquent aux actions de données imbriquées lorsque l'application d'imbrication n'utilise pas la technologie Oracle JET. Reportez-vous à :Exécution d'actions de données
Lorsque vous cliquez sur une action Evénement de publication, elle détermine les informations contextuelles pour la visualisation et les transmet au service d'action de navigation à des fins de traitement. Le processus du service pour l'action de navigation génère un événement appelé "oracle.bitech.dataaction" avec les informations de charge utile contextuelles. Vous pouvez vous abonner à cet événement et recevoir la charge utile dans le callback de l'événement, et vous pouvez utiliser la charge utile autant que nécessaire.
La visualisation suivante présente le chiffre d'affaires en dollars pour les différents secteurs d'activité (par exemple, Communication, Digital, Electronics) des organisations (par exemple, Franchises Org, Inbound Org, International Org).
Format et contexte de l'événement et de la charge utile
L'exemple suivant montre la publication d'un événement lorsque l'action de données imbriquée est appelée par au moins une cellule de données sur laquelle vous avez cliqué avec le bouton droit de la souris et par l'action de données sélectionnée dans le menu affiché dans le classeur imbriqué.
Les exemples ci-dessous proviennent d'un fichier JSON, par exemple, obitech-cca/cca/component.json.
Format d'é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 charge utile
{"context":[
"or": [
"and":[
{"contextParamValues":[...],
"contextParamValuesKeys":[...],
"colFormula":"...",
"displayName":"...",
"isDoubleColumn":true/false,
"dataType":"..."
}
]
]
]
}
Transmission d'une valeur unique pour une colonne unique dans le contexte de transmission
Dans cet exemple, lorsque vous cliquez sur une cellule d'une colonne, l'objet avec des informations contextuelles 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 unique pour chaque colonne dans le contexte de transmission
Dans cet exemple, lorsque vous cliquez sur une cellule de colonne, par exemple Inbound Org et Digital, l'élément transmis lorsque vous cliquez sur l'option de menu DA1 imbriqué pour sélectionner l'action imbriquée est la valeur du chiffre d'affaires en dollars pour le secteur d'activité et l'organisation sélectionnés. Par exemple, le chiffre d'affaires associé aux produits Digital dans Inbound Org est transmis, soit 1 458 738,42 $ 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 dans le contexte de transmission
Dans cet exemple, lorsque vous cliquez sur deux cellules d'une ligne (par exemple Inbound Org et International Org pour Digital) et sur l'option de menu DA1 imbriqué pour sélectionner l'action imbriquée, l'élément transmis est la valeur du chiffre d'affaires en dollars associé aux deux cellules sélectionnées pour le secteur d'activité et l'organisation. Par exemple, le fait de cliquer sur le chiffre d'affaires associé au produits Digital des deux organisations sélectionnées (Inbound Org et International Org) transmet les valeurs 1 458 738,42 $ et 915 528,97 $.
.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 configurer l'exemple de page HTML affiché ci-dessous.
-
Ajoutez ou modifiez l'emplacement du classeur.
Reportez-vous à
<======== 1ci-dessous. -
Abonnez-vous à l'événement publié nommé "oracle.bitech.dataaction".
Reportez-vous à
<======== 2ci-dessous. -
Définissez un processus d'écoute d'événement et un callback d'événement.
Reportez-vous à
<======== 3ci-dessous.
Exemple de page HTML avec visualisation recevant des événements
La page HTML suivante possède une visualisation imbriquée et peut recevoir des événements. La page HTML est configurée de façon à écouter l'événement "oracle.bitech.dataaction".
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"><html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Standalone DV CCA Demo</title>
<script src="http://hostname:port/bali/ui/api/v1/plugins/embedding/standalone/embedding.js" type="text/javascript"></script>
</head>
<body>
<h1>Standalone DV CCA Embedded Data Action Demo</h1>
<div id="mydiv" style="position: absolute; width: calc(100% - 40px); height: calc(100% - 120px)" >
<oracle-dv project-path="/Shared Folders/RR/sample"></oracle-dv> <=============== 1
</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'; <========== 2
var element = document.getElementById("mydiv");
if (element) {
var oEventListener = element.addEventListener(eventName, function (e) { <================= 3
console.log("***** Payload from DV ***** ");
console.log("eventName = " + e.detail.eventName);
console.log("payload = " + JSON.stringify(e.detail.payload));
console.log("***** Payload from DV end ***** ");
}, true);
}
</script>
</body>
</html>