工具列小器具 (主題化)
簡介
 |
• 「工具列」小器具可用於 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 | n/a | Y | N | ||
CategoryLabel | 顯示在篩選器類別下拉式清單上方的文字。 | STRING | 篩選條件 | N | Y | ||
ConditionLabel | 顯示在篩選器條件下拉清單上方的文字。 | STRING | 情況 | N | Y | ||
CustomClass | 要套用至小器具頂部分區之使用者定義的 CSS 類別。 可輸入多個類別，之間以空格分隔。 | STRING | n/a | Y | N | ||
Disabled | 在混搭中禁用此小器具。 小器具會顯示在混搭中，但您無法按一下或選取該小器具。 | 布林值 | False | Y | N | ||
FilterChipPosition | 設定資料篩選器的晶片容器位置。您可以在小器具頂部或底部顯示晶片。 | STRING | 下 | N | N | ||
FilterData | 包含要顯示在晶片篩選器下拉清單中之項目資料的資料負載來源。 | INFOTABLE | n/a | Y | N | ||
FilterDateOrder | 設定在晶片篩選器中顯示之日期的日、月與年順序。 選項有「自動」、「日-月-年」、「月-日-年」與「年-月-日」。 | STRING | 自動 | N | N | ||
FilterDisclosureType | 設定用來將篩選器晶片顯示及隱藏為「顯示連結」或「按鈕」的元素類型。 | STRING | 顯示連結 | N | N | ||
FilterFormatToken | 使用 “DD-MM-YY” 模式設定晶片篩選器日期的格式。格式區分大小寫，且可取代 FilterDateOrder 內容。 此語法遵循 ISO 格式。 | STRING | n/a | N | Y | ||
FilterType | 設定篩選器類型。 您可以顯示簡單篩選方塊，或使用基於晶片的資料篩選器小器具。選取「無」可隱藏篩選器。
| STRING | 篩選方塊 | N | N | ||
HideFilterSeparator | 隱藏用於分隔工具列上資料篩選器的垂直線。
| 布林值 | False | N | N | ||
LatitudeLabel | 當您使用晶片篩選器按位置篩選時，會針對緯度顯示在輸入方塊上方的文字。 | STRING | Latitude | N | Y | ||
LongitudeLabel | 當您使用晶片篩選器按位置篩選時，會針對經度顯示在輸入方塊上方的文字。 | STRING | Longitude | N | Y | ||
Query | 用於擷取所篩選資料集的 JSON 査詢。 | QUERY | n/a | Y | N | ||
QueryChanged | 當篩選器小器具查詢變更時觸發事件。 | n/a | n/a | Y | N | ||
RangeEndValueLabel | 當您使用晶片篩選器篩選某一範圍的值時，會顯示在第二個輸入方塊上方的文字。 | STRING | 值 2 | N | Y | ||
RangeStartValueLabel | 當您使用晶片篩選器篩選某一範圍的值時，會顯示在第一個輸入方塊上方的文字。 | STRING | 值 1 | N | Y | ||
ResetToDefaultValue | 將此小器具的輸入重設為其預設值。 | n/a | n/a | Y | N | ||
ShowCategoryListFilter | 將篩選方塊新增至篩選器類別的下拉清單。 | 布林值 | False | Y | N | ||
ShowHideFilters | 隱藏資訊顯示控制項並展開資料篩選器小器具的晶片容器。 | 布林值 | True | N | N | ||
SortFilter | 依字母順序排序資料篩選器類別的選項清單。 | 布林值 | True | N | N | ||
SimpleFilterChanged | 修改篩選方塊中的字串時觸發事件。 | n/a | n/a | Y | N | ||
SimpleFilterHintText | 設定篩選方塊的提示文字。 | STRING | 篩選器 | N | Y | ||
SimpleFilterLabel | 設定篩選方塊的標籤。 | STRING | n/a | Y | Y | ||
SimpleFilterPosition | 設定篩選方塊在工具列中的位置。您可以將方塊放置在「左」、」「右」或「置中」區域。 當您將位置設定為「置中」時，SimpleFilterAlignment 內容會顯示在清單中。 | STRING | 左 | N | N | ||
SimpleFilterAlignment | 當在工具列中的中心區域放置時，設定篩選方塊的對齊。您可以將方塊向「左」、「右」或「置中」對齊。 | STRING | 左 | Y | N | ||
SimpleFilterString | 可讓您設定或擷取簡單篩選方塊中的字串。 | STRING | n/a | Y | N | ||
SimpleFilterWidth | 設定篩選方塊的寬度。 | NUMBER | 273 | Y | N | ||
TabSequence | 按下 TAB 鍵時設定小器具的序號。 | NUMBER | 0 | N | N | ||
UnitsLabel | 顯示在下拉清單上方的文字，用來在使用晶片篩選器根據位置或日期篩選時設定單位。 | STRING | 單位 | N | Y | ||
ValueLabel | 顯示在包含晶片篩選器中條件值之輸入方塊上方的文字。 | STRING | 值 | N | Y |