マッシュアップへのグリッドウィジェットの追加
グリッドの追加
1. 「ウィジェット」パネルからキャンバス上のコンテナに「グリッド」ウィジェットをドラッグします。
2. 「データ」パネルで、インフォテーブルを返すデータサービスを追加します。
3. パネル上のデータサービスを展開し、「戻されたデータ」の下で、データサービスの All Data プロパティをグリッドウィジェットの Data プロパティにバインドします。塗りつぶし矢印によって、インフォテーブルがグリッドにバインドされていることが示されます。
4. 「プロパティ」パネルで、
をクリックしてウィジェットコンフィギュレーションダイアログボックスを開きます。
5. グリッド列を設定し、
「完了」をクリックします。使用可能な列のコンフィギュレーションの詳細については、
グリッド列の設定を参照してください。
6. 「保存」をクリックして、マッシュアップを表示します。サービスインフォテーブルのデータがグリッド内に表示されます。
ツリーグリッドの追加
1. 「ウィジェット」パネルからキャンバス上のコンテナに「グリッド」ウィジェットをドラッグします。
2. 「データ」パネルで、グリッド上の親ノードのデータが含まれているインフォテーブルを返すデータサービスを追加します。このデータには、最初に表示するデータが含まれている必要があります。
3. パネル上のデータサービスを展開し、「戻されたデータ」の下で、データサービスの All Data プロパティをグリッドウィジェットの Data プロパティにバインドします。塗りつぶし矢印によって、インフォテーブルがグリッドにバインドされていることが示されます。
4. 手順 2 を繰り返して、親ノードの子データが含まれているインフォテーブルを返す 2 つ目のデータサービスを追加します。このデータインフォテーブルには、親を展開したときに表示されるデータが含まれています。
| 同じサービスからの親データと子データを使用する場合、サービスの「すべてのデータ」プロパティをプロパティ ChildData および Data にバインドします。 |
5. パネル上のデータサービスを展開し、「戻されたデータ」の下で、データサービスの All Data プロパティをグリッドウィジェットの ChildData プロパティにバインドします。
6. 「プロパティ」パネルで、以下を設定します。
◦ をクリックしてウィジェットコンフィギュレーションダイアログボックスを開きます。グリッド列を非表示にしたり、順序を変更したり、名前を変更したり、検証を適用したりできます。
◦ IDFieldName プロパティを、子行の ID が含まれているインフォテーブル列の名前に設定します。
◦ ParentIDFieldName プロパティを、親行の ID が含まれているインフォテーブル列の名前に設定します。
◦ HasChildrenFieldName プロパティを、行に子データがあるかどうかを示すインフォテーブル列の名前に設定します。
7. グリッドデータサービスをランタイムで実行するため、イベントをバインドします。
8. 「保存」をクリックして、マッシュアップを表示します。サービスインフォテーブルのデータがグリッド内に表示されます。
ツリーグリッドデータの設定
ツリーグリッド構造を作成するには、次のフォーマットを使用したインフォテーブルデータをバインドする必要があります。
データと子データを同じソースに接続することも別のソースに接続することもできます。複数のプロパティを 1 つのインフォテーブルとしてウィジェットの Data プロパティにバインドすることも、親データを Data プロパティにバインドし、子データを ChildData プロパティにバインドすることもできます。次の例は、親データのインフォテーブルフォーマットを示しています。
id | continent | hasChildren |
---|
1 | アジア | true |
2 | ヨーロッパ | true |
3 | 北米 | true |
4 | 南米 | true |
5 | 南極大陸 | false |
次の例は、子データのインフォテーブルフォーマットを示しています。
id | parentId | continent | country | population | hasChildren |
---|
1 | 2 | | ドイツ | 8300 万 | false |
2 | 2 | | スウェーデン | 1000 万 | false |
3 | 2 | | 英国 | 6700 万 | false |
4 | 2 | | イタリア | 6000 万 | false |
5 | 1 | | 韓国 | 5100 万 | false |
6 | 3 | | 米国 | 3 億 3100 万 | false |
7 | 3 | | カナダ | 3700 万 | false |
8 | 4 | | ブラジル | 2 億 1200 万 | false |
9 | 4 | | ペルー | 3300 万 | false |
10 | 1 | | 日本 | 1 億 2600 万 | false |
ランタイムで、親行を展開すると子行が表示されます。