Page History

...

概要

コードモードは、共通のコーディング言語を使用して、無制限の機能性と柔軟性により、ダッシュボードやプレゼンテーションのカスタマイズや拡張を可能にします。ビジュアルモードでキャンバスにドラッグしたすべてのダッシュボードオブジェクトのコードは、こちらのエディターから確認することができます。開発者は、オブジェクト機能を強化し、カスタマイズして、独自のUIオブジェクトや機能を、スクラッチから作成することができます。コードモードは、カスタムHTMLウィジェットや、アクションボタン機能など、特定のコードウィジェットの編集に必須です。コードモードは、一般的なコーディング言語を使用して、無制限の機能性と柔軟性により、ダッシュボードやプレゼンテーションのカスタマイズや拡張を可能にします。ビジュアルモードでキャンバスにドラッグしたすべてのダッシュボードオブジェクトのコードは、こちらのエディターから確認することができます。開発者は、オブジェクト機能を強化し、カスタマイズして、独自のUIオブジェクトや機能を、スクラッチから作成することができます。コードモードは、カスタムHTMLウィジェットや、アクションボタン機能など、特定のコードウィジェットの編集に必須です。

バイラテラルエディター

コードモードでの編集は、ビジュアルモードで即座に可視化されるため、JavaScriptを通して追加されたすべての対話機能や、HTMLを通してウィジェットプロパティに追加されたカスタマイズ、CSSを通した全体的なキャンバスデザインは、ビジュアルエディターに自動的に同期され、利用できるようになります。同様に、ビジュアルモードで行われた変更も、コードモードへ即座に反映されます。

...

コードモードエディターの理解

以下のダイアグラムは、コードモードの機能を紹介します。

...

オブジェクト一覧

画面左側のオブジェクト一覧には、ダッシュボードに追加されたすべてのオブジェクトが表示されます。こちらの一覧を使用して、次のアクションを実行できます。

• オブジェクト名にマウスオーバーするか、これをクリックすることで、コードエディターのHTML項目で対象のコードを強調表示します。これにより、コードを簡単に見つけることができます。オブジェクト名にマウスオーバーするか、これをクリックすることで、コードエディターのHTML項目で対象のコードを強調表示します。これにより、簡単にコードを見つけることができます。
• 横にある削除アイコンを使用して、オブジェクトを削除します。

Image Modified

• コードエディターに表示される順序で、オブジェクトを確認します。新しいオブジェクトは一覧の最後に追加されますが、オブジェクトをコードエディター内で移動した場合、これを反映して一覧が更新されます。これにより、その配置に従って、エディター内でコード要素を簡単に見つけることができるようになります。コードエディターに表示される順序で、オブジェクトを確認します。新規オブジェクトは一覧の最後に追加されますが、オブジェクトをコードエディター内で移動した場合、これを反映して一覧が更新されます。これにより、その配置に従って、エディター内でコード要素を簡単に見つけることができるようになります。

容易になったデバッグ

以下に示すように、エラーや間違いのあるコードには、エラーアイコンが表示されます。

...

コードモードの例

こちらの項目では、コードモードを使用したシンプルなダッシュボード機能の例を紹介します。これには、ユーザーのダッシュボードでも利用できる、コードスニペットが含まれています。

...