目次:

はじめに

Extension Designer に同梱された Endpoint、Component、および Parameters ノードを使ってフローを作成できます。Component ノードと Parameters ノードにウィジェット定義が組み込まれており、Endpoint ノードはどのウィジェットを作成するかを選択できます。

Extension Designer がウィジェットとデータの定義をすべて提供できるよう、Endpoint ノードはウィジェットのデータを提供します。そのため、ユーザーは特定のエンドポイントや設定を記録する必要なく、スムーズにデータをダッシュボードで確認できます。 

各ノードの詳細については「ノードの使用」を参照してください。

Component ノードの設定

Component ノードは、カスタム ウィジェットおよびレポートの構造と定義を格納します。Sample Widgets ライブラリからカスタム ウィジェットをインポートし、コンポーネントをクリックしてそのパーツを表示します。

1. 3 点メニューから [読み込み] を選択します。
   
2. [ライブラリ] > [サンプル ウィジェット] フォルダーからサンプル ウィジェットを選択します。
   

Component ノード

Component は次のパーツから構成されています。

• HTML テンプレート 
• Javascript Controller
• CSS スタイル

HTML テンプレート

[HTML Template] タブでは、ダッシュボードまたはカスタム レポートでのコンポーネントの表示方法を定義します。このテンプレートは、$scope オブジェクトの下に Javascript Controller がどのプロパティを持つべきかを定義します。

JavaScript Controller

[JavaScript Controller] タブでは、HTML に従ってグラフをどのように表示するかを実装します。グラフの色とドリルダウン操作をコントロールします。

CSS スタイル

[CSS Styles] タブでは、コンポーネントに固有の CSS スタイルを定義します。CSS をカスタマイズする場合、一意な接頭辞を付けることを強く推奨します。そうしない場合、同じダッシュボードの他のウィジェットとスタイル定義が競合する可能性があります。

Parameter ノードの設定

Parameters ノードは、ウィジェットの追加ダイアログでウィジェットが含めることができるオプションを定義します。Parameters ノードには [Parameters] タブと [Labels] タブがあります。Parameter Values Endpoint を使用して、どのオプションを使用可能にするかを設定することもできます。サンプル ウィジェットの Parameters ノードをダブルクリックして、パーツを表示します。 

[Parameters] タブ

[Parameters] タブでは、パラメーターのリストとそのデータ ソースを定義します。一部のパラメーターは、依存関係にリンクすることもでき、ビルド ID などのフィルターを設定できます。

[Labels] タブ

[Labels] タブでは、[ウィジェットの追加] または [ウィジェットの編集] ページでのパラメーター ラベルの表示方法を定義します。

パラメーターは DTP ダッシュボードで厳密に定義されています。必要に応じて、フィルター、期間、ベースライン/ターゲット ビルドといった既知のパラメーターを組み合わせて使用できますが、定義できるのはテキスト ボックス パラメーターだけです。アーティファクトで定義された一部の Parameter ノードには、プロファイル パラメーター定義があります (「モデル プロファイルの使用」を参照)。

サンプル ウィジェット

Extension Designer には、ユーザー独自のカスタム ウィジェットを定義するためにすぐに使用できる Component と Parameters が用意されています。すべての定義は [読み込み] > [ライブラリ] > [Sample Widgets] にあります。 

詳細についてはサンプル ウィジェットをインポートし、Sample Data ノードを確認してください。

ウィジェットとレポートごとに同じパラメーターのセットが定義されています。その理由は、ドリルダウン レポートのために異なるパラメーター セットが必要だからです。

各 Component ノードは、グラフを描画するために特定のペイロードを取るよう設定されています。 

ウィジェットまたはレポート フローをデプロイするたびに、更新を反映するためにダッシュボード ブラウザーを完全にリフレッシュする必要があります。コンポーネントとパラメーターの定義は、ダッシュボードがロードされるときにだけ更新されます。ウィジェットをリフレッシュしても、コンポーネントやパラメーターに変更は反映されません。ただし、データ フローで作業している場合、ウィジェットだけをリフレッシュして変更を確認できます。

Pie Chart ウィジェットの新規作成

このセクションでは、Pie Chart サンプル ウィジェットを使って新規にチャート ウィジェットを作成する方法について説明します。 

1. Extension Designer メニューから [読み込み] > [ライブラリ] > [Sample Widgets] > [Pie Chart] サンプルを選択して、任意のサービスの新しい [フロー] タブにインポートします。

2. Example Pie Chart エンドポイント ノードをダブルクリックして、その設定を確認します。このノードはウィジェットの実装を定義します。 
    
   
   以下のフィールドを変更してこのサンプルウィジェットを設定できます。 

   Name	DTP ダッシュボードに表示されるウィジェット名。
   UUID	エンドポイントの固有の識別子。フローにエンドポイント ノードをドロップしたときに自動生成されます。
   Type	[Type] ドロップダウン メニューからエンドポイントの種類を選択します。 Widget: DTP ダッシュボード ウィジェットを指定します。この値を選択すると、[size]、[category]、[component]、および [parameter] フィールドが表示されます。ウィジェットのサイズの詳細については「ダッシュボード グリッド」を参照してください。 Report: DTP ダッシュボードのカスタム レポートを指定します。この値を選択すると、[component] および [parameter] フィールドが表示されます。 General: 一般的な REST エンドポイントを指定します。エンドポイントで GET 操作と POST 操作の両方を使用できます。エンドポイントの URL を取得するには、[サービス カテゴリ] ページを開いて URL をコピーします。
   Category	DTP ダッシュボード ウィジェットのカテゴリを定義します。一般的に、値は "custom" または "process intelligence" にします。新しい名前を入力して新規にカテゴリを作成できます。独自のカテゴリ名を作成した場合、ウィジェットのヘッダーの色は灰色になります。
   Component:	提供するコンポーネントを指定します。同一のタブにデプロイされたコンポーネントがドロップダウン メニューに表示されます。
   Parameter	DTP ダッシュボードに提供するパラメーター セットを指定します。同一のタブにデプロイされたすべてのパラメーターがドロップダウン メニューに表示されます。
   Description	エンドポイントの説明を指定します。この説明は DTP ダッシュボード、[ウィジェットの追加] ページ (「ウィジェットの追加」を参照)、および Extension Designer のカテゴリ ページでエンドポイントの説明として使用されます。

3. [UUID] フィールドのリフレッシュ ボタンをクリックします。この操作は、新しいウィジェットが他のエンドポイントと競合しないようにします。
4. ウィジェットをデプロイします。
5. 新しい Endpoint ノードをフローにドロップし、以下の設定を行います。
   1. 名前を指定します。
   2. [Type] から Widget を選択します。
   3. [Component] から Pie Chart Component を選択します。
   4. [Parameters] から Pie Chart - Widget Parameters を選択します。
   5. (オプション) 説明を入力します。
      
6. 出力ハンドルをクリックし、新しいコンポーネントで "Sample Data" function ノードの入力ハンドルをクリックします。
    
7. フローをデプロイします。
8. Report Center でダッシュボードが開いている場合はダッシュボードをリフレッシュし、[ウィジェットの追加] をクリックします。[ウィジェットの追加] オーバーレイに [My Own Category] カテゴリと My own Widget が表示されます。
   
9. ウィジェットの追加を完了して My own Widget をダッシュボードに表示します。
   

Endpoint の出力リンク

Endpoint のノードの出力リンクは、ウィジェットのデータソースにリンクします。出力として [出力] カテゴリの http response ノードを使用してください。

Widget Error Messages ノード

このノードは、エンドポイントへの出力として、構造化された msg.payload を提供します。DTP ダッシュボードはウィジェットのデータとしてレスポンスを使用します。すべてのサンプル ウィジェットに、実際のデータを持った Sample Data function ノードとペイロード スキーマ用の No Data functionノードが用意されています。No Data ノードは、ウィジェットが適切にメッセージを表示できるよう、ウィジェットにエラー メッセージを送る方法を実演します。

カスタム ウィジェットから Sample Data ノードへのコネクタをクリックし、Delete キーを押します。

No Data ノードへの新しい接続を作成します。 

更新されたフローを展開し、Report Center の DTP ダッシュボードをリフレッシュします。

ダッシュボードにウィジェットを追加した後にエンドポイントを削除した場合、DTP はウィジェット定義が失われたことを検出し、以下のメッセージを表示します。

同じ UUID で Endpoint ノードを元に戻し、ダッシュボードをリフレッシュします。元のウィジェットが表示されます。

エラー メッセージの設定

エラー メッセージは、以下の Standard Error Object の書式を使用します。これはウィジェットに適用されるほか、ウィジェットとやり取りするすべてのフローに適用されます。

msg.payload = {
    error: {
        title: "error message title",
       message: "detailed error message"
    }
} 

このエラー オブジェクトをカスタム ウィジェットまたはレポートに戻す場合は、以下を msg オブジェクトに追加してください。

msg.statusCode = 400;