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

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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


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

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


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

Note

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



コード

 widget
         <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>


Note

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



ビジュアル


共通の属性

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

...

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


publishUUID(Yellowfin 9.5から導入)

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


widgetUUID(ウィジェットUUID)

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


...


JS

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

...

<canvas-area xmlns="http://www.w3.org/1999/xhtml" canvas-uuid="aee7c574-3ad3-4ac0-a366-7810861d91eb">
         <report-output widget 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 widgetpublish-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>


Note

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);
};

...