ツールバーウィジェット (テーマ指定可能)
概要
 |
このウィジェットは、プラットフォーム内の標準装備として、および SDK からインポート可能な Web コンポーネントとして使用できます。
|
ツールバーウィジェットは、マッシュアップにレスポンシブツールバーを表示します。このウィジェットは、頻繁に使用される機能を簡潔な形式で表示するように設定できる共通のエレメントを組み合わせます。グリッド、リスト、チャートなどのデータを処理するウィジェットを操作する際、ツールバーを使用してフィルタの作成、サービスのトリガー、およびビューの修正を行うことがきます。
ウィジェットを設定してグリッドウィジェットに操作をバインドする方法については、次の動画を参照してください。新しいタブでビデオを開くには、プレーヤーのタイトルをクリックします。
ツールバーウィジェットには、以下が含まれています。
• データフィルタ - これにはシンプルなフィルタボックスまたはチップベースのデータフィルタがあります。
|
|
ウィジェットをワークスペースにドラッグすると、シンプルフィルタがデフォルトで有効になります。
|
|
シンプルフィルタ
|
チップベースのデータフィルタ
|
 |
 |
• 操作 - これにはユーザー定義の操作が含まれています。
ツールバーの操作
ツールバーウィジェットを使用して、グリッド、リスト、チャートなどのほかのウィジェットに対して以下の操作を実行できます。
• ボタン
• ドロップダウン
• リンク
• 切り替え
• メニューボタン
次のイメージは、操作の例を示しています。
これらの操作をフィルタと組み合わせると、マッシュアップ内のデータに対する効果的なツールバーとして機能します。このツールバーには、必要に応じて多数のボタン、ドロップダウン、リンク、または切り替えボタンを含めることができます。このツールバーは、十分にレスポンシブであるため、操作によって占有されている領域でオーバーフローが発生すると、ユーザー定義の操作をドロップダウンリストに表示します。オーバーフロー制御アイコンが表示され、それをクリックして操作のドロップダウンリストを表示できます。
次のイメージは、チップベースのデータフィルタと操作があるツールバーウィジェットの例を示しています。
1. データフィルタ - チップベースのデータフィルタ。FilterType プロパティを使用してフィルタを設定できます。
2. チップ - この領域には、チップベースのデータフィルタによって設定されるフィルタチップが表示されます。
3. 操作 - この領域には、ボタン、ドロップダウンリスト、リンク、切り替えボタン、およびメニューボタンがあります。
4. オーバーフロー制御アイコン
データフィルタは、下の「プロパティテーブル」で説明されているプロパティを使用して設定できます。操作の設定については、インフォテーブルを使用したツールバー操作の定義を参照してください。
データ形式
• FilterData:
ツールバーでシンプルなフィルタボックスではなくチップベースのデータフィルタを使用する場合、マッシュアップ内のデータのフィルタカテゴリとして使用される「フィールド定義」を使用して「データシェイプ」を作成しなければなりません。これらのフィールド定義をマッピングする必要があり、各フィールドはフィルタドロップダウンに表示されるカテゴリを表します。
次のイメージは、データシェイプ内のフィールド定義の例を示しています。
以下のイメージに、このフィールド定義に基づいた、ウィジェット内のフィルタカテゴリドロップダウンリストの例を示します。
• ActionsData:
ツールバーに操作を作成するには、プラットフォームでシステムエンティティとして使用可能な ToolbarAction データシェイプを使用しなければなりません。この定義済みのデータシェイプは、インフォテーブル出力をフォーマットするサービスを作成し、マッシュアップ内のサービスをバインドしてツールバーに操作を作成するときに使用します。詳細については、インフォテーブルを使用したツールバー操作の定義を参照してください。
データソースのバインド
• データフィルタの場合 - ツールバーウィジェットをデータフィルタのソースにバインドするには、次の手順を実行します。
a. 「データ」パネルで、データフィルタに適したデータ形式のインフォテーブルを返すデータサービスを追加します。
b. データサービスの All Data プロパティをウィジェットの FilterData プロパティにバインドします。
c. ツールバーウィジェットを選択してから、「プロパティ」パネルで、これらのプロパティを使用してデータフィルタを設定します。
d. 「保存」をクリックし、「マッシュアップを表示」をクリックします。
• 操作の場合 - ツールバーウィジェットを操作のデータソースにバインドするには、次の手順を実行します。
a. 「データ」パネルで、操作に適したデータ形式のインフォテーブルを返すデータサービスを追加します。
b. データサービスの All Data プロパティをウィジェットの ActionsData プロパティにバインドします。
c. データソースをバインドすると、サービスで定義した操作ごとに、一連の新しいプロパティとイベントが「プロパティ」パネルに表示されます。
d. ツールバーウィジェットを選択してから、「プロパティ」パネルで、以下のプロパティを使用して、マッシュアップ内のグリッド、リスト、チャートなどのほかのウィジェットに対する操作を設定します。
|
|
プロパティ名は、サービス内の actionId の値に基づいて表示されます。
|
|
操作
|
プロパティ/イベント名
|
説明
|
例
|
|---|---|---|---|
|
ボタン
|
<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
|
|
|
メニューボタン
|
<actionId>_MenuItemConfigMode
|
メニューアイテムの設定方法を制御します。「インフォテーブルデータ」 - インフォテーブルデータを使用して、各メニューアイテムの表示と状態を設定します。サービスの actionId_SelectedDataChanged イベントと actionId_SelectedData プロパティを使用して、選択されたアイテムを別のサービスに渡すことができます。「ウィジェットプロパティ」 - 各メニューアイテムの表示と状態を、ウィジェットプロパティを使用して手動で設定するか、バインドを使用して動的に設定します。actionId_SelectedData プロパティを別のサービスに渡すには、メニューアイテムの Clicked イベントをバインドする必要があります。
|
MenuButton1_MenuItemConfigMode
|
|
<actionId>_Disabled
|
ツールバーの操作を無効にします。
|
MenuButton1_Disabled
|
|
|
<actionId>_Visible
|
ツールバーの操作の表示を制御します。
|
MenuButton1_Visible
|
|
|
<actionId>_SelectedData
|
メニューボタンで最後に選択したメニューアイテムのデータを表すインフォテーブル。
|
MenuButton1_SelectedData
|
|
|
<actionId>+<menuID_name>_Clicked
|
メニューアイテムがクリックされたときにトリガーされるバインド可能なイベント。このプロパティは、<actionId>_MenuItemConfigMode が「ウィジェットプロパティ」に設定されている場合に表示されます。
|
MenuButton1Item1_Clicked
|
|
|
<actionId>+<menuID_name>_Disabled
|
メニューボタンのアイテムを無効にします。このプロパティは、<actionId>_MenuItemConfigMode が「ウィジェットプロパティ」に設定されている場合に表示されます。
|
MenuButton1Item1_Disabled
|
|
|
<actionId>+<menuID_name>Visible
|
メニューボタンのアイテムの表示を制御します。このプロパティは、<actionId>_MenuItemConfigMode が「ウィジェットプロパティ」に設定されている場合に表示されます。
|
MenuButton1Item1_Visible
|
e. 「保存」をクリックし、「マッシュアップを表示」をクリックします。
プロパティテーブル
ツールバーウィジェットのプロパティを以下に示します。
|
プロパティ名
|
説明
|
ベースタイプ
|
デフォルト値
|
バインド可能か(Y/N)
|
ローカライズ可能か(Y/N)
|
||
|---|---|---|---|---|---|---|---|
|
ActionsData
|
ToolbarAction データシェイプを使用してフォーマットされる、ツールバーの操作アイテムを表示および設定するためのインフォテーブルデータソース。
|
INFOTABLE
|
該当なし
|
Y
|
N
|
||
|
CategoryLabel
|
フィルタカテゴリのドロップダウンリストの上に表示されるテキスト。
|
STRING
|
フィルタ基準
|
N
|
Y
|
||
|
ConditionLabel
|
フィルタ条件のドロップダウンリストの上に表示されるテキスト。
|
STRING
|
条件
|
N
|
Y
|
||
|
CustomClass
|
ウィジェットの最上位の div に適用するユーザー定義の CSS クラス。
スペースで区切って、複数のクラスを入力できます。
|
STRING
|
該当なし
|
Y
|
N
|
||
|
Disabled
|
マッシュアップ内のウィジェットを無効にします。
ウィジェットはマッシュアップ内に表示されますが、クリックまたは選択はできません。
|
BOOLEAN
|
false
|
Y
|
N
|
||
|
FilterChipPosition
|
データフィルタのチップコンテナの位置を設定します。ウィジェットの上部または下部にチップを表示できます。
|
STRING
|
下
|
N
|
N
|
||
|
FilterData
|
チップフィルタのドロップダウンに表示するアイテムのデータが含まれているインフォテーブルソース。
|
INFOTABLE
|
該当なし
|
Y
|
N
|
||
|
FilterDateOrder
|
チップフィルタに表示される日付の日、月、年の順序を設定します。
「自動」、「日-月-年」、「月-日-年」、「年-月-日」の各オプションがあります。
|
STRING
|
自動
|
N
|
N
|
||
|
FilterDisclosureType
|
フィルタチップの表示および非表示に使用するエレメントのタイプを「リンクを表示」または「ボタン」として設定します。
|
STRING
|
リンクを表示
|
N
|
N
|
||
|
FilterFormatToken
|
“DD-MM-YY” パターンを使用してチップフィルタの日付をフォーマットします。このフォーマットでは大文字と小文字が区別され、FilterDateOrder プロパティがオーバーライドされます。
この構文は ISO フォーマットに従います。
|
STRING
|
該当なし
|
N
|
Y
|
||
|
FilterType
|
フィルタタイプを設定します。
シンプルなフィルタボックスを表示することも、チップベースのデータフィルタウィジェットを使用することもできます。フィルタを非表示にするには、「なし」を選択します。
|
STRING
|
フィルタボックス
|
N
|
N
|
||
|
HideFilterSeparator
|
ツールバー上のデータフィルタの分離に使用する垂直線を非表示にします。
|
BOOLEAN
|
false
|
N
|
N
|
||
|
LatitudeLabel
|
チップフィルタを使用して場所でフィルタするときに緯度の入力ボックスの上に表示されるテキスト。
|
STRING
|
Latitude
|
N
|
Y
|
||
|
LongitudeLabel
|
チップフィルタを使用して場所でフィルタするときに経度の入力ボックスの上に表示されるテキスト。
|
STRING
|
Longitude
|
N
|
Y
|
||
|
Query
|
フィルタされたデータセットの取得に使用される JSON クエリー。
|
QUERY
|
該当なし
|
Y
|
N
|
||
|
QueryChanged
|
フィルタウィジェットのクエリーが変更されるとイベントをトリガーします。
|
該当なし
|
該当なし
|
Y
|
N
|
||
|
RangeEndValueLabel
|
チップフィルタを使用して値の範囲をフィルタするときに 2 つ目の入力ボックスの上に表示されるテキスト。
|
STRING
|
値 2
|
N
|
Y
|
||
|
RangeStartValueLabel
|
チップフィルタを使用して値の範囲をフィルタするときに 1 つ目の入力ボックスの上に表示されるテキスト。
|
STRING
|
値 1
|
N
|
Y
|
||
|
ResetToDefaultValue
|
このウィジェットの入力をそれぞれのデフォルト値にリセットします。
|
該当なし
|
該当なし
|
Y
|
N
|
||
|
ShowCategoryListFilter
|
フィルタカテゴリのドロップダウンリストにフィルタボックスを追加します。
|
BOOLEAN
|
false
|
Y
|
N
|
||
|
ShowHideFilters
|
データフィルタウィジェットの開示の制御を非表示にし、チップコンテナを拡張します。
|
BOOLEAN
|
True
|
N
|
N
|
||
|
SortFilter
|
データフィルタカテゴリのオプションのリストをアルファベット順に並べ替えます。
|
BOOLEAN
|
True
|
N
|
N
|
||
|
SimpleFilterChanged
|
フィルタボックス内の文字列が修正されるとイベントをトリガーします。
|
該当なし
|
該当なし
|
Y
|
N
|
||
|
SimpleFilterHintText
|
フィルタボックスのヒントテキストを設定します。
|
STRING
|
フィルタ
|
N
|
Y
|
||
|
SimpleFilterLabel
|
フィルタボックスのラベルを設定します。
|
STRING
|
該当なし
|
Y
|
Y
|
||
|
SimpleFilterPosition
|
ツールバーのフィルタボックスの位置を設定します。このボックスは、「左」、「右」、または「中央」領域に配置できます。
位置を「中央」に設定すると、SimpleFilterAlignment プロパティがリストに表示されます。
|
STRING
|
左
|
N
|
N
|
||
|
SimpleFilterAlignment
|
フィルタボックスがツールバーの中央領域に配置される場合のその整列を設定します。このボックスは、「左」、「右」、または「中央」に整列させることができます。
|
STRING
|
左
|
Y
|
N
|
||
|
SimpleFilterString
|
シンプルなフィルタボックス内の文字列を設定または取得できます。
|
STRING
|
該当なし
|
Y
|
N
|
||
|
SimpleFilterWidth
|
フィルタボックスの幅を設定します。
|
NUMBER
|
273
|
Y
|
N
|
||
|
TabSequence
|
TAB キーを押したときの、ウィジェットのシーケンス番号を設定します。
|
NUMBER
|
0
|
N
|
N
|
||
|
UnitsLabel
|
チップフィルタを使用して場所または日付でフィルタするときに単位を設定するドロップダウンリストの上に表示されるテキスト。
|
STRING
|
Units
|
N
|
Y
|
||
|
ValueLabel
|
チップフィルタに条件の値を含む入力ボックスの上に表示されるテキスト。
|
STRING
|
値
|
N
|
Y
|