Katıştırılmış İçeriğe Sahip Veri Eylemlerini Yürütme
HTML sayfası veya uygulama web sayfası gibi harici kapsayıcılardaki bir görselleştirmede veri eylemlerini yürütme ve gömme hakkında bilgi edinmek üzere burada açıklanan bilgileri uygulayın.
Not:
Bu bölümdeki örnekler, gömülü uygulama Oracle JET teknolojisini kullanmadığında, gömülü veri eylemleri için geçerlidir. Bkz:Veri Eylemlerini Yürütme
Olay verilerini yayımla eylemine tıkladığınızda, görselleştirme için bağlam bilgilerini belirler ve bu bilgileri işlemek üzere gezinme eylemi hizmetine iletir. Gezinme eylemine yönelik hizmet işlemi, bağlam veri yükü bilgilerini içeren "oracle.bitech.dataaction" adlı bir olay başlatır. Bu olaya abone olabilir ve olay geri aramasındaki veri yükünü alabilirsiniz. Ayrıca, veri yükünden gerektiği şekilde daha da fazla yararlanabilirsiniz.
Şu görselleştirme, organizasyonlardaki (örneğin Yetkili Bayiler Org, Gelen Org, Uluslararası Org) iş kollarına (örneğin İletişim, Dijital, Elektronik) yönelik geliri (Dolar cinsinden) gösterir.
Olay ve Veri Yükü Formatı ve Bağlamı
Şu örnek, gömülü veri eylemi sağ tıklanan bir veya daha fazla veri hücresi tarafından çağrıldığında ve veri eylemi gömülü çalışma kitabında görüntülenen menüden seçildiğinde bir olayın yayımlanmasına olanak sağlar.
Aşağıdaki örnekler bir JSON dosyasındandır, örneğin, obitech-cca/cca/component.json.
Olay Formatı
"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"
}
}
}
Veri Yükü Formatı
{"context":[
"or": [
"and":[
{"contextParamValues":[...],
"contextParamValuesKeys":[...],
"colFormula":"...",
"displayName":"...",
"isDoubleColumn":true/false,
"dataType":"..."
}
]
]
]
}
Bağlama Göre İlet'te tek sütun için tek değer iletme
Bu örnekte, bir sütun hücresine tıkladığınızda sütun hakkındaki bağlam bilgilerini içeren bir nesne harici kapsayıcıya iletilir. Bu durumda organizasyon adı iletilir.
{
"context": [
{
"contextParamValues": [
"Inbound Org."
],
"contextParamValuesKeys": [
"Inbound Org."
],
"colFormula": "\"A - Sample Sales\".\"Offices\".\"D3 Organization\"",
"displayName": "D3 Organization",
"isDoubleColumn": false,
"dataType": "varchar"
}
]
}Bağlama Göre İlet'te her sütun için tek değer iletme
Bu örnekte, bir sütun hücresine (örneğin Gelen Org ve Dijital ürünler) tıkladığınızda, gömülü eylemi seçmek için Gömülü DA1 menü seçeneğine tıkladığınız zaman seçili iş kolu ve organizasyon için gelir değeri Dolar cinsinden iletilir. Örneğin, Gelen Org'daki Dijital ürünlere ait gelir iletilir (bu örnekte 1.458.738,42 USD).
.gif'' çiziminin açıklaması
{
"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"
}
]
}Bağlama Göre İlet'te birden fazla değer iletme
Bu örnekte, iki satır hücresine tıkladığınızda (örneğin Dijital ürünler için Gelen Org ve Uluslararası Org) ve katıştırılmış eylemi seçmek için Katıştırılmış DA1 menü seçeneğine tıkladığınızda, organizasyon ve iş kolu için seçilen iki hücreye ait gelir değeri dolar cinsinden iletilir. Örneğin, iki seçili organizasyondaki (Gelen Org ve Uluslararası Org) Dijital ürünlere ait gelire tıkladığınızda 1.458.738,42 USD ve 915.528,97 USD değerleri iletilir.
.gif'' çiziminin açıklaması
{
"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"
}
]
}
]
}
]
}Chrome tarayıcı araçlarını kullanarak olay veri yüklerini görüntülemek üzere bu adımları kullanın.
- Chrome'da, sağ tıklayın ve Kaynağı Denetle'yi seçin.
- Kaynaklar sekmesinde,
console.log satırına sağ tıklayın ("Veri yükünü görüntülemek, bu satıra bir kesme noktası eklemek ve tarayıcı araçları hata ayıklayıcısını kullanmak için") ;ve Kesme noktası ekle'yi seçin.Gömülü fondan olay veri eylemi çağrıldığında, tarayıcı araçlarının sağ taraftaki bölmesinde yer alan Kapsam bölümünde bir veri yükü girişi görünecektir.
- Veri yüküne sağ tıklayın ve Global değişken olarak sakla'yı seçin.
Global değişken Konsol sekmesinde görüntülenebilir ve veri yükünün detaylarını görüntülemek üzere genişletilebilir.
Görselleştirme İçeren ve Olayları Alan HTML Sayfasının Örneği
Şu örnek kod bir analitik olay veri eylemine ilişkin olay izleyicisinin nasıl tanımlanacağını göstermektedir. Bu kod örneğinde analitik örneğini ve gömülü dizin yolunu çalışma kitabına güncellemelisiniz. Çalışma kitabının tanımlı bir olay veri eylemi olmalıdır. İzlenen olay oracle.bitech.dataaction adındadır. Olay gerçekleştiğinde konsola bir mesaj gönderilir.
<!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>
Ayrıca veri eyleminin çağrıldığı yerdeki değerleri döndürmek üzere önceki kod örneğindeki <script> bölümünü de değiştirebilirsiniz.
<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>