Mashup Builder > ウィジェット > 標準ウィジェット > ツールバーウィジェット (テーマ指定可能)
ツールバーウィジェット (テーマ指定可能)
概要
* 
ツールバーウィジェットは ThingWorx 9.2.x 以降のバージョンで使用できます。
このウィジェットは、プラットフォーム内の標準装備として、および 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
f. 「保存」をクリックし、「マッシュアップを表示」をクリックします。
プロパティテーブル
ツールバーウィジェットのプロパティを以下に示します。
プロパティ名
説明
ベースタイプ
デフォルト値
バインド可能か(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
Auto
N
N
FilterDisclosureType
フィルタチップの表示および非表示に使用するエレメントのタイプを「リンクを表示」または「ボタン」として設定します。
STRING
リンクを表示
N
N
FilterFormatToken
“DD-MM-YY” パターンを使用してチップフィルタの日付をフォーマットします。このフォーマットでは大文字と小文字が区別され、FilterDateOrder プロパティがオーバーライドされます。
この構文は ISO フォーマットに従います。
STRING
該当なし
N
Y
FilterType
フィルタタイプを設定します。
シンプルなフィルタボックスを表示することも、チップベースのデータフィルタウィジェットを使用することもできます。フィルタを非表示にするには、「なし」を選択します。
* 
「なし」を選択すると、SimpleFilterHintTextSimpleFilterPositionSimpleFilterAlignmentSimpleFilterLabelSimpleFilterWidthSimpleFilterString プロパティおよび SimpleFilterChanged イベントはプロパティリストに表示されません。
「「データフィルタ」ウィジェット」を選択すると、次の CategoryLabelConditionLabelFilterChipPositionFilterDateOrderFilterDisclosureTypeFilterFormatTokenHideFilterSeparatorLatitudeLabelLongitudeLabelQueryQueryChangedRangeEndValueLabelRangeStartValueLabelShowCategoryListFilterShowHideFiltersSortFilterUnitsLabel、および ValuesLabel プロパティがプロパティリストに表示されます。
STRING
フィルタボックス
N
N
HideFilterSeparator
ツールバー上のデータフィルタの分離に使用する垂直線を非表示にします。
* 
このプロパティは ThingWorx バージョン 9.3.0 以降で使用できます。
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
これは役に立ちましたか?