30日間の無料評価版をお試しいただけます。


はじめに

コードモードは、ダッシュボードキャンバスで使用することができ、ダッシュボードの機能を拡張します。



コードモードの有効化

ロール権限

ロール設定ページの「ダッシュボード」配下にある、「コードモード使用権」を有効にする必要があります。


システム構成

ロール権限の有効化と合わせて、管理コンソールで「ダッシュボードコードモード」オプションを有効にする必要があります。「管理」＞「システム構成」＞「システム」＞「セキュリティ」に移動します。

こちらの設定が無効な場合、コードモードダッシュボードは実行されません。



コードモードの使用

コードモードを有効にして、ダッシュボードの編集を始めると、ダッシュボードツールバーに以下のトグルが表示されます。

「コード」をクリックすることで、コードモードへ移動します。

コードモードへ切り替えると、HTML、JS、CSSという3つのタブが表示されます。



HTML

HTMLタブは、現在のキャンバスタブをHTML形式で表示します。キャンバス上の各アイテムは、対応するHTMLタグを持ちます。

以下のキャンバスは、2つのエレメントを持ちます。レポートと、境界線として使用されている四角です。


こちらのキャンバスのHTMLは、以下の通りです。

<canvas-area xmlns="http://www.w3.org/1999/xhtml" canvas-uuid="aee7c574-3ad3-4ac0-a366-7810861d91eb">
<!-- This the element tag for the Report-->
         <report-output publish-uuid="ffe09245-8739-416c-b039-05fff6427242" report-uuid="c83357db-8aef-4ec7-ab72-fce34de9ee77" height="475" top="46" left="54" name="Agency Benchmark" width="897" display-type="CHART" chart-uuid="a9aba052-51b5-47b1-b311-2c0cc3abd932" on-click="none" style="z-index: 3;"></report-output>
<!-- Element tag for the rectangle -->
                  <canvas-rectangle publish-uuid="d0fafeb9-57a8-4a21-ab6c-844501ebf50b" width="927" height="496" top="35" left="36" rotation="0" name="Rectangle" stroke-color="#009eec" fill-color="#ffffff" on-click="none" style="z-index: 2" stroke-width="14" fill-opacity="100"></canvas-rectangle>
</canvas-area>


HTMLタブで、これらのタグの属性に追加された変更は、キャンバスビジュアルエディターに同期されます。chart-uuid属性を削除し、display-typeを「REPORT」に変更すると、ビジュアルエディターも更新されます。

Yellowfin 9.5から、以前のウィジェットUUIDは、公開UUIDに置き換わります。こちらのページでは、更新されたUUIDを反映するように更新されています。以前のバージョンのYellowfinを使用されているユーザーは、アップグレードをするか、公開UUIDの代わりに一時的に名前属性を使用することを推奨します。



コード

         <report-output publish-uuid="ffe09245-8739-416c-b039-05fff6427242" report-uuid="c83357db-8aef-4ec7-ab72-fce34de9ee77" height="475" top="46" left="54" name="Agency Benchmark" width="897" display-type="REPORT" on-click="none" style="z-index: 3;"></report-output>

Yellowfin 9.5から、以前のウィジェットUUIDは、公開UUIDに置き換わります。こちらのページでは、更新されたUUIDを反映するように更新されています。以前のバージョンのYellowfinを使用されているユーザーは、アップグレードをするか、公開UUIDの代わりに一時的に名前属性を使用することを推奨します。



ビジュアル


共通の属性

キャンバスに追加されるエレメントの多くは異なる属性を持ちますが、次の属性はすべて共有されます。


width（幅）

ウィジェットの初期幅（ピクセル単位）です。


height（高さ）

ウィジェットの初期高さ（ピクセル単位）です。


left（左）

ウィジェットの初期の左側の位置（ピクセル単位）です。


Top（上部）

ウィジェットの初期の上部の位置（ピクセル単位）です。


name（名前）

ウィジェットの名前です。ウィジェットをDOMから容易に選択するための識別子として使用することができます。


publishUUID（公開UUID：Yellowfin 9.5から導入）

ウィジェットに一意のIDです。これは、キャンバスからアイテムを選択するために使用できます。


widgetUUID（ウィジェットUUID：Yellowfin 9.5から廃止）

ウィジェットに一意のIDです。これは、キャンバスからアイテムを選択するときに使用してはいけません。Yellowfin 9以前のバージョンを使用されている場合は、ウィジェットUUIDの代わりに名前属性を使用することを推奨します。



JS

JSタブは、ユーザーがタブに移動したときに実行されるJavaScriptを記述することができます。最初にこちらのタブに移動すると、次のコードが表示されます。

// Declare variables or insert code here

/**
* Called when the canvas and all its child elements are rendered and attached into the page.
*/
this.onRender = function () {
         // Insert your code here. This is an ideal place for setting up event listeners
};

/**
* Called when the canvas and all its child elements are removed from the page.
*/
this.onRemove = function () {
         // Insert your code here. This is an ideal place for removing event listeners
};



関数

onRender

説明

この関数は、サブタブがページ上で描画されると呼び出され、サブタブが再び表示されるたびに呼び出されます。これは、必要なイベントリスナーをページに追加するのに適した場所です。

これは、以下を使用してコードモードオブジェクトに追加できます。

this.onRender = function() { //Your logic here }



onRemove

説明

これは、サブタブがページから削除されると呼び出されます。これは、ユーザーが異なるタブに移動すると発生します。

この方法は、新しいタブに移動するときに、保持しないイベントリスナーや、オブジェクトを削除する場合に使用します。

例

let subTabAPI = this.apis.subtab;  

this.bodyClick = function() {
         console.log('A click was recorded on ' + subTabAPI.name);
});

this.onRender = function() {
       document.body.addEventListener('click', this.bodyClick);
});

this.onRemove = function() {
       document.body.removeEventListener('click', this.bodyClick);
};



APIの取得方法

「this」オブジェクトには、「apis」パラメーターが含まれます。このオブジェクトには、次のオブジェクトが含まれます。


これらは、以下のように取得されます。

this.apis.canvas;
this.apis.subtab;
this.apis.dashboard;
this.apis.filters



レポートの取得方法

コードモードの使用における強みのひとつは、レポートAPIにアクセスできることですが、レポートAPIは必要に応じて動的にロードされるため、「this.apis」オブジェクトの一部として渡されません。

レポートが描画されると、ダッシュボードはそのレポートAPIを作成します。

現在サブタブに表示されているレポートのレポートAPIを取得する場合、キャンバスAPIのselect、またはselectAll関数を使用することで、ページ上のレポートエレメントを選択し、そこからAPIを取得することができます。select、およびselectAllは関数であり、キャンバスエレメントのquerySelector、およびquerySelectorAll関数に渡されるセレクターを作成します。


以下の例では、レポート名を「report_1」としています。キャンバスAPIのselect関数を使用して、そのエレメントを選択し、そこからレポートAPIを取得します。

let reportElement = this.apis.canvas.select('report_1');
reportElement.onReportLoad.then(() => { //onReportLoad is a promise that is resolved once the reportAPI for that report element has finished loading.
         let reportAPI = reportElement.reportAPI; //This is now the ReportAPI.
});


次のアプローチは、dashboard.loadReport() 関数を、dashboard getAllReports() 、またはgetReportsForSubTab()と組み合わせて使用します。これについては、ダッシュボード APIで概説しています。



JSからのエレメント属性の更新

エレメントのHTML属性をJSタブのコードから更新することはできますが、これらの変更は、HTMLタブでこれらを変更するようにデータベースに保存されません。ただし、エレメントは更新されます。



CSS

CSSタブには、サブタブに適用したい任意のスタイリングが含まれます。こちらに適用されたすべてのCSSは、他のページに影響を与えません。ユーザーがサブタブが離れた場合、このCSSはページから削除されます。



例


レポート表示の更新

こちらの例は、ダッシュボード上のレポートの表示を5秒ごとに切り替えます。


HTML

<canvas-area xmlns="http://www.w3.org/1999/xhtml" canvas-uuid="aee7c574-3ad3-4ac0-a366-7810861d91eb">
         <report-output publish-uuid="ffe09245-8739-416c-b039-05fff6427242" report-uuid="c83357db-8aef-4ec7-ab72-fce34de9ee77" height="475" top="46" left="54" name="report_1" width="897" display-type="CHART" chart-uuid="a9aba052-51b5-47b1-b311-2c0cc3abd932" on-click="none" style="z-index: 3;"></report-output>
         <canvas-rectangle publish-uuid="d0fafeb9-57a8-4a21-ab6c-844501ebf50b" width="927" height="496" top="35" left="36" rotation="0" name="Rectangle" stroke-width="14" stroke-color="#009eec" fill-opacity="100" fill-color="#ffffff" on-click="none" style="z-index: 2;"></canvas-rectangle>
</canvas-area>

Yellowfin 9.5から、以前のウィジェットUUIDは、公開UUIDに置き換わります。こちらのページでは、更新されたUUIDを反映するように更新されています。以前のバージョンのYellowfinを使用されているユーザーは、アップグレードをするか、公開UUIDの代わりに一時的に名前属性を使用することを推奨します。


JS

this.onRender = function () {
         //Select the report_1 element from the page canvas through the canvas api
         let report1 = this.apis.canvas.select('report_1');
   
         //The report will begin loading once it is added to the DOM, so it is possible that at this point it hasn't completed yet. So wait for the onReportLoad promise to resolve.
         report1.onReportLoad.then(() => {
                  let changeDisplayType = () => {
                           let currentDisplay = report1.getAttribute('display-type');
                           if(currentDisplay === "CHART") {
                                    currentDisplay = "REPORT";
                           } else {
                                    currentDisplay = "CHART";
                           }
           
                           report1.setAttribute('display-type', currentDisplay);
                  }
                  this.reportChangeTimeout = setInterval(changeDisplayType, 5000);
         });
};

this.onRemove = function () {
         //The SubTab is being removed from the page, we want to stop triggering the reportChange
         clearTimeout(this.reportChangeTimeout);
};



レポートAPIデータセットを使用したカスタムテーブルの構築

HTML

<canvas-area xmlns="http://www.w3.org/1999/xhtml" canvas-uuid="a4c909fb-70d1-44f1-a95a-17a0eada6bf6">
          <custom-html widget-uuid="eff0b9bd-4009-4d83-ade8-46c40587ed97" width="880" height="450" top="130" left="10" rotation="0" name="custom_table" on-click="none" style="z-index: 2;"></custom-html>
         <report-output widget-uuid="90a601cc-a148-40d8-a460-15daab8a238b" report-uuid="3e842fae-02f7-4ad3-a632-ca267e0078da" height="125" top="4" left="8" name="Campaign Summary" width="880" display-type="CANVAS" on-click="none" style="z-index: 1;"></report-output>
</canvas-area>


JS

this.outputTypes = []; //Create an array of outputKeys and what report API they came from for easy removal

this.onRender = function () {
         let campaignSummary = this.apis.canvas.select('Campaign Summary');
         campaignSummary.onReportLoad.then(() => {
                  let reportAPI = campaignSummary.reportAPI;
                  let outputKey = reportAPI.registerOutputType('dataset', reportDataset => {
                           let tableData = [];
                           let tableElement = document.createElement('table');
           
                           //Give the table a class name so we can style it
                           tableElement.className = "codeModeExampleTable";
           
                           let tHead = document.createElement('thead');
                           let headerRow = document.createElement('tr');
                           tHead.appendChild(headerRow);
                           tableElement.appendChild(tHead);

                           //Loop over all the reports fields to get their names. The fields will be
                           //in the same order as the columns in the dataset
                           reportAPI.fields.forEach(field => {
                                    let th = document.createElement('th');
                                    th.innerText = field.name;
                                    headerRow.appendChild(th);
                           });
           
                           let tbody = document.createElement('tbody');
                           tableElement.appendChild(tbody);
                           //Loop over the rows in the dataset and create a table row at each level.
                           reportDataset.forEach(rowData => {
                                    let tr = document.createElement('tr');
               
                                    //Loop over the columns and append the formattedValue from each item
                                    rowData.forEach(columnData => {
                                             let td = document.createElement('td');
                                             //columnData will have rawValue, formattedValue and htmlFormattedValue.
                                             td.innerText = columnData.formattedValue;
                                             tr.appendChild(td);
                                    });
                                    tbody.appendChild(tr);
                               });
           
                                //Now we've done all that we want to get the custom_table element and insert the table there
                                let customTable = this.apis.canvas.select('custom_table');
                                customTable.innerHTML = ''; //Clear any previous table that might be there
                                customTable.appendChild(tableElement); //Append our new table
           
                  });
       
                  this.outputTypes.push({
                            key: outputKey,
                            reportAPI: reportAPI
                  });
       
        });
};

this.onRemove = function () {
         //Remove the output types so that we aren't generating extra tables each time we come back to this
        //tab
        this.outputTypes.forEach(outputObject => {
                  outputObject.reportAPI.removeOutputType(outputObject.key)
        });
};


CSS

table.codeModeExampleTable {
         width:100%;
         height:100%;
         border-collapse:separate;
         border-spacing:0px;
}

table.codeModeExampleTable thead {
         background-color: #009EEC;
}

table.codeModeExampleTable thead th {
         border-left: 1px solid white;
}

table.codeModeExampleTable tbody td {
         border:1px solid #ccc;
        border-top:none;
}



ページトップ

  • No labels