...
コードモードは、一般的なコーディング言語を使用して、無制限の機能性とデザインの柔軟性により、ダッシュボードやプレゼンテーションのカスタマイズや拡張を可能にします。ビジュアルモードでキャンバスにドラッグされたすべてのダッシュボードオブジェクトのコードは、こちらのエディターから確認できます。開発者は、オブジェクト機能を強化し、カスタマイズして、独自のUIオブジェクトや機能を、スクラッチから作成することができます。コードモードは、カスタムHTMLウィジェットや、アクションボタン機能など、特定のコードウィジェットの編集に必須です。
Yellowfinは、独自のコードウィジェットを作成するためのツールおよびリソースも提供しています。ダッシュボードコードモードを使用してウィジェットのパーツをテストし、コードウィジェットを開発する開発者向けの追加リソースページも参照してください。
バイラテラルエディター
コードモードでの編集は、ビジュアルモードで即座に可視化されるため、JavaScriptを通して追加されたすべての対話機能や、HTMLを通してウィジェットプロパティに追加されたカスタマイズ、CSSを通した全体的なキャンバスデザインは、ビジュアルエディターに自動的に同期され、利用できるようになります。同様に、ビジュアルモードで行われた変更も、コードモードへ即座に反映されます。
...
- コードモードは、ダッシュボードおよびプレゼントで利用できます。
- ダッシュボードでは、キャンバスレイアウトでのみコードモードを使用することができ、他のレイアウトではサポートされていません。
- こちらのモードを使用するには、特定の「コードモード」ロール権限が必要です。これにより、権限のある開発者のみが、ダッシュボードのコードを編集することができます。
...
コードモードエディターの理解
以下のダイアグラムは、コードモードの機能を示します。
...
| Column | ||
|---|---|---|
| ||
|
...
| width | 70% |
|---|
...
こちらのコードエディターで、ダッシュボードのコードを記述し、編集します。
...
オブジェクト一覧
画面左側のオブジェクト一覧には、ダッシュボードに追加されたすべてのオブジェクトが表示されます。こちらの一覧を使用して、次のアクションを実行できます。
- オブジェクト名にマウスオーバーするか、これをクリックすることで、コードエディターのHTML項目で対象のコードを強調表示します。これにより、簡単にコードを見つけることができます。
- 横にある削除アイコンを使用して、オブジェクトを削除します。
- コードエディターに表示される順序で、オブジェクトを確認します。新規オブジェクトは一覧の最後に追加されますが、オブジェクトをコードエディター内で移動した場合、これを反映して一覧が更新されます。これにより、その配置に従って、エディター内でコード要素を簡単に見つけることができます。
簡単にデバッグ
以下に示すように、エラーや間違いのあるコードには、エラーアイコンが表示されます。
コードモードのヒント
- プレビューモードで、カスタムコード機能をテストします（プレビューモードには、ダッシュボードエディター右上にある「プレビューモード」ボタンからアクセスすることができます）。
- 他のダッシュボードで再利用したいコード機能は、コードウィジェットに保存することができます。ウィジェットとしてパッケージ化する前に、こちらでテストをします。ウィジェットは、プラグイン管理から追加することができ、ダッシュボードビルダーのコードウィジェット一覧に表示されます。
- 特定のオブジェクトのコーティングを容易にするためには、プロパティパネルから、キャンバスにドラッグした各コンテンツに名前を付けます。これにより、コードモードで対象のオブジェクトをより簡単に見つけることができます。
コードモードの例
こちらの項目では、コードモードを使用したシンプルなダッシュボード機能の例を紹介します。これには、ユーザーのダッシュボードでも利用できる、コードスニペットが含まれています。
目的：ユーザーの選択に基づき、グラフを変更するレポートセレクターを、ダッシュボードキャンバス上に作成します。
このため、片側に2つのアクションリンクを追加します。各リンクは、異なるグラフを表示します。ユーザーが他のリンクをクリックした場合、グラフは変更されます。
手順
非開発者向けに、この機能を自身で作成する方法を紹介します。
...
次のコードスニペットをコピーして、HTMLエディターに貼り付けます（</canvas-area>タグを閉じる直前まで）。エディターに貼り付けると、Yellowfinは自動的に変更するため、オブジェクトのウィジェットuuidを変更する必要はありません。
| Note |
|---|
こちらのコードスニペットは基本的に、見出しと、レポートを表示する2つの「アクションリンク」を表示します。 |
| Code Block | ||||
|---|---|---|---|---|
| ||||
<text-title widget-uuid="59bee07d-e354-486b-a395-0dbbc6886a7b" width="202" height="34" left="41" top="170" line-spacing="normal" character-spacing="0" rotation="0" opacity="100" style="z-index: 4"><b xmlns="http://www.w3.org/1999/xhtml"><font color="#009eec">Code Mode Demo</font></b>
</text-title>
<text-simple class="link" name="Link 1" widget-uuid="0b286f5f-6dce-46c2-b7a4-d2832b035c29" width="102" height="29" left="41" top="214" line-spacing="normal" character-spacing="0" rotation="0" opacity="100" style="z-index: 5">See Report 1</text-simple>
<text-simple class="link" name="Link 2" widget-uuid="7a6f61b3-fd46-4952-9ee9-dbe2efd1b622" width="108" height="36" left="41" top="243" line-spacing="normal" character-spacing="0" rotation="0" opacity="100" style="z-index: 7">See Report 2</text-simple> |
...
コードモードに戻り、JavaScript項目へ移動し、次のコードセグメントをコピーします。
| Note |
|---|
こちらのコードは、リンク1がレポート1を表示し、リンク2がレポート2を表示する機能を定義します。 |
| Code Block | ||||
|---|---|---|---|---|
| ||||
let link1 = this.apis.canvas.select('Link 1');
let link2 = this.apis.canvas.select('Link 2');
let report1 = this.apis.canvas.select('Report 1');
let report2 = this.apis.canvas.select('Report 2');
$(report2).css({ display: 'none' });
/* Use external libraries and custom scripts */
requirejs(['jquery'], function($) {
link1.addEventListener('click', (e) => {
$(report1).css({ display: 'initial' });
$(report2).css({ display: 'none' });
});
link2.addEventListener('click', (e) => {
$(report1).css({ display: 'none' });
$(report2).css({ display: 'initial' });
});
}); |
...