グリッドツールバーへのカスタム操作の追加
グリッドツールバーに表示するカスタム操作を定義できます。
概要
• ボタン
• ドロップダウン
• リンク
• 切り替えボタン
グリッドウィジェットツールバーのカスタム操作の設定
1. Composer で、操作定義に必要なデータを含むインフォテーブルを返すデータサービスを作成します。サポートされているデータ形式の詳細については、例: ツールバーコンフィギュレーションの例を参照してください。
2. Mashup Builder で、「データ」パネルを使用してマッシュアップにサービスを追加します。
3. サービスインフォテーブルをグリッドウィジェットの ToolbarActions プロパティにバインドします。カスタム操作用の追加のプロパティが「プロパティ」パネルにリストされます。
4. 「プロパティ」パネルで、ツールバー操作を設定します。ウィジェット内部のバインドを作成するには、バインドコンフィギュレーションダイアログを使用します。
5. 「保存」をクリックし、「マッシュアップを表示」をクリックします。
カスタム操作のプロパティ
次の表に、グリッドウィジェットに追加できるカスタム操作のプロパティを、カスタム操作のタイプ別にリストします。
|
操作タイプ
|
プロパティ/イベント名
|
説明
|
例
|
|---|---|---|---|
|
ボタン
|
<actionId>_Clicked
|
ボタンがクリックされたときにトリガーするイベント。
|
Button1_Clicked
|
|
<actionId>_Disabled
|
ツールバーのボタンを無効にします。
|
Button1_Disabled
|
|
|
<actionId>_Visible
|
ツールバーのボタンの表示を制御します。
|
Button1_Visible
|
|
|
ドロップダウン
|
<actionId>_Disabled
|
ツールバーのドロップダウンを無効にします。
|
Dropdown1_Disabled
|
|
<actionId>_SelectedText
|
このバインド可能なプロパティを使用することにより、ドロップダウン操作で選択したテキストの値を設定および取得できます。
|
Dropdown1_SelectedText
|
|
|
<actionId>_SelectedTextChanged
|
ドロップダウンリストで選択されているアイテムが変更されたときにトリガーされるイベント。
|
Dropdown1_SelectedTextChanged
|
|
|
<actionId>_Visible
|
ツールバーのドロップダウンの表示を制御します。
|
Dropdown1_Visible
|
|
|
リンク
|
<actionId>_Disabled
|
ツールバーのリンクを無効にします。
|
Link1_Disabled
|
|
<actionId>_Visible
|
ツールバーのリンク操作の表示を制御します。
|
Link1_Visible
|
|
|
切り替えボタン
|
<actionId>_Disabled
|
ツールバーの切り替えボタンを無効にします。
|
Toggle1_Disabled
|
|
<actionId>_State
|
このバインド可能なプロパティを使用することにより、切り替えボタンの操作の状態を設定および取得できます。
|
Toggle1_State
|
|
|
<actionId>_StateChanged
|
切り替えボタンの状態が変わったときにトリガーされるイベント。
|
Toggle1_StateChanged
|
|
|
<actionId>_Visible
|
ツールバーの切り替えボタン操作の表示を制御します。
|
Toggle1_Visible
|
例: グリッドツールバーのカスタム操作を設定するサービスの作成
次の例は、グリッドツールバーに次のカスタム操作を作成するサービスを示しています。
• 行の高さを制御するドロップダウン。
• 行番号の表示を制御する切り替えボタン。
• グリッド上の選択行をエクスポートするエクスポートボタン。
Composer で、カスタム操作に必要なデータを含むインフォテーブルを返すデータサービスを作成します。サポートされているデータ形式の詳細については、インフォテーブルを使用したツールバー操作の定義を参照してください。
var result = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape({
infoTableName : "InfoTable",
dataShapeName : "ToolbarAction"
});
// Dropdown start
result.AddRow({
actionId: "DD1",
actionType: "dropdown",
actionLabel: "Row Height",
actionTooltip: "Change row height",
actionDisabled: false,
actionVisible: true,
dropdownData: [{label:"36 px", value: "36"}, {label:"48 px", value: "48"}, {label:"64 px", value: "64"}],
actionMaxWidth: 200,
dropdownHintText: "Select..."
});
// Dropdown end
// Toggle start
result.AddRow({
actionId: "T1",
actionType: "toggle",
actionLabel: "Show Row Numbers",
actionTooltip: "Adds a column that shows row numbers.",
actionDisabled: false,
actionVisible: true,
toggleChipIcon: true,
toggleState: false,
toggleLabelPosition: 'right',
actionMaxWidth: 200
});
// Toggle end
// Button start
result.AddRow({
actionId: "B1",
actionType: "button",
actionLabel: "Export",
actionTooltip: "Export the selected rows data.",
actionDisabled: false,
actionVisible: true,
buttonType: "primary",
actionMaxWidth: 100
});
// Button end
infoTableName : "InfoTable",
dataShapeName : "ToolbarAction"
});
// Dropdown start
result.AddRow({
actionId: "DD1",
actionType: "dropdown",
actionLabel: "Row Height",
actionTooltip: "Change row height",
actionDisabled: false,
actionVisible: true,
dropdownData: [{label:"36 px", value: "36"}, {label:"48 px", value: "48"}, {label:"64 px", value: "64"}],
actionMaxWidth: 200,
dropdownHintText: "Select..."
});
// Dropdown end
// Toggle start
result.AddRow({
actionId: "T1",
actionType: "toggle",
actionLabel: "Show Row Numbers",
actionTooltip: "Adds a column that shows row numbers.",
actionDisabled: false,
actionVisible: true,
toggleChipIcon: true,
toggleState: false,
toggleLabelPosition: 'right',
actionMaxWidth: 200
});
// Toggle end
// Button start
result.AddRow({
actionId: "B1",
actionType: "button",
actionLabel: "Export",
actionTooltip: "Export the selected rows data.",
actionDisabled: false,
actionVisible: true,
buttonType: "primary",
actionMaxWidth: 100
});
// Button end
Mashup Builder で、次のバインドを作成します。
• グリッド行の高さを制御するには、SelectedText ドロップダウンプロパティを、文字列ベースタイプを数値に変換する定義式関数にバインドします。この後、関数の出力を MinRowHeight グリッドプロパティにバインドできます。
• 行番号の表示を制御するには、切り替えボタンの T1_State プロパティを ShowRowNumbers グリッドプロパティにバインドします。
• 行が選択されたときにエクスポートボタンを表示するには、RowsSelected グリッドプロパティを B1_Visible ボタンプロパティにバインドします。
カスタム操作に使用可能なコンフィギュレーションオプションの詳細については、例: ツールバーコンフィギュレーションの例を参照してください。