Mashup Builder > 小器具 > 標準小器具 > 清單小器具 (主題化)
清單小器具 (主題化)
「清單小器具」是可讓您顯示資料列的小器具。
* 
「清單」小器具可作為平台中的標準小器具使用，也可作為可從 SDK 匯入的 web 元件使用。
資料格式
您可以使用資料負載中的資料配置「清單」小器具項目，該資料負載的格式使用下列結構：
欄位定義
顯示欄位
值欄位
狀態欄位
描述
表示在執行時間的清單項目的標籤。
表示清單項目的實際值。此值也會儲存在 SelectedText 內容中。
表示清單中項目狀態的選用資料負載欄位。此內容可用於啟用或禁用清單中的項目。支援的值：Enabled 或 Disabled
基礎類型
STRINGor NUMBER
STRINGor NUMBER
STRING
定義清單項目
欲定義清單項目，請繫結使用所需資料格式設定格式的資料負載。
1. 在「資料」面板中，新增定義小器具清單項目的資料服務。您可以使用上一部份內容概述的資料負載格式來定義項目。
2. 將資料服務的 All Data 內容繫結至「清單」小器具的 Data 內容。即會建立繫結。
3. 在「內容」面板中，針對下列每一個內容選取資料負載欄位：
◦ DisplayField - 項目標籤的資料。
◦ ValueField - 項目標籤的實際值。
◦ StateField - 定義每個資料項目已啟用或已禁用狀態的選用欄位。
4. 按一下「儲存」，然後按一下「檢視混搭」。
清單項目會在執行時間顯示在小器具內。
啟用多重選取
您可以將小器具 MutliSelect 內容設定為 true 來在清單中啟用多重選取。多重選取會新增核取方塊，讓使用者能夠選取清單中的一或多個項目。此外，還會在項目上方新增一個控制項，讓使用者能夠清除或選取所有項目。
配置單一選取
依預設，小器具支援單一項目選取。所選項目會使用背景顏色反白。
欲在使用單一選取模式時啟用單選按鈕選取，請將 RadioButtonSelection 內容設定為 true。按鈕會顯示在清單的左側。清單項目會顯示為單選按鈕群組，以指示使用者一次只能選取一個項目。
新增篩選器
您可以將小器具 Filter 內容設定為 true，來將篩選器新增至清單。篩選器會顯示在清單上方，可讓使用者快速篩選清單中的項目。
清除項目選取
您可以將小器具 ClearSelection 內容設定為 true，來新增空白項目，讓使用者能夠清除單一選取清單中的選取。您也可以使用 ClearSelectionLable 內容來變更空白項目的標籤。
* 
當啟用多重選取時，此內容無法使用。
套用狀態格式
您可以使用 State Formatting 來根據字串或數值反白清單項目的目前狀況。如需詳細資訊，請參閱範例：將狀態格式套用至清單小器具 (ptc.com)。
小器具內容
屬性名稱
描述
基礎類型
預設值
是否可繫結 (Y/N)
可當地語系化 (Y/N)
Label
顯示為小器具標籤的文字。
STRING
清單
Y
Y
LabelAligment
將標籤向左、向右右或置中對齊。
STRING
左
Y
N
Aligment
將清單中的項目向左、向右或置中對齊。
STRING
左
Y
N
ClearselectionItem
將空白選取項目新增至清單。可讓使用者清除選取。
BOOLEAN
True
Y
N
ClearselectionLabel
在清單中指定清除選取項目的自訂文字。預設設定為「無」。
STRING
無
Y
Y
MultiSelect
可讓使用者選取清單中的多個項目。
BOOLEAN
False
N
N
StateField
指定要用於禁用或啟用清單中項目的資料負載。
INFOTABLE
n/a
N
N
Disabled
在混搭中禁用此小器具。小器具會顯示在混搭中，但您無法按一下。
BOOLEAN
False
Y
N
ShowListFilter
在清單中新增用來在執行時間篩選清單項目的篩選器。
BOOLEAN
False
N
N
FilterHintText
顯示清單篩選器的提示文字。
STRING
n/a
N
Y
AutoSelectFirstRow
將第一列設定為清單中的所選選項。
* 
當未選取 MultiSelect 內容時，此內容可供使用。
BOOLEAN
n/a
N
N
RadioButtonSelection
使用單一選取模式時，在清單項目旁顯示單選按鈕。
BOOLEAN
False
N
N
RowHeight
設定單一行的列高度。
NUMBER
34
Y
N
CustomClass
定義小器具頂部 Div 的 CSS。可輸入多個類別，之間以空格分隔。
STRING
n/a
Y
N
TabSequence
使用者按下 Tab 鍵時小器具反白的順序。
NUMBER
n/a
N
N
Data
小器具資料的資料負載或資料來源。
INFOTABLE
n/a
Y
N
DisplayField
表示資料值的資料負載欄位。
n/a
n/a
N
N
ValueField
用於 SelectedText 的欄位。
n/a
n/a
N
N
SelectedText
可讓您從清單中選取項目。
STRING
n/a
Y
Y
SelectedItems
定義清單中所選項目的資料負載來源。
INFOTABLE
n/a
Y
N
DoubleClicked
當您連按兩下小器具時，會觸發事件。
n/a
n/a
Y
N
ListFormat
此內容可用來套用資料的特定轉譯。
此內容支援下列轉譯格式：NUMBER、INTEGER、LONG、DATETIME、LOCATION、VEC2、VEC3、VEC4、THINGCODE、HYPERLINK、IMAGELINK、IMAGE、STRING、BOOLEAN、TAGS、HTML、THINGNAME、THINGSHAPENAME、THINGTEMPLATENAME、USERNAME、MASHUPS、INFOTABLE、PASSWORD、XML、JSON、VALUES。
n/a
n/a
n/a
n/a
驗證清單小器具資料
您可以使用驗證內容來驗證執行時間清單項目的選取。例如，您可以需要在清單中選取項目，並在未選取項目時顯示錯誤訊息。
如需有關驗證內容的詳細資訊，請參閱將驗證套用至小器具。
下表列出了 ThingWorx 9.3.4 或更新版本中「驗證」面板上可用的驗證內容。
內容
描述
基礎類型
預設值
是否可繫結 (Y/N)
可當地語系化 (Y/N)
CriteriaMessage
為驗證條件以及驗證失敗時顯示的訊息。
STRING
n\a
Y
Y
CriteriaMessageDetails
為驗證條件和失敗訊息顯示的詳細資訊。
STRING
n\a
Y
Y
RequiredMessage
當「必須填寫值」設定為 true 且未選取項目時顯示的訊息
STRING
需要選取一項
Y
Y
ShowValidationCriteria
編輯清單時，顯示有關所需輸入的提示訊息
BOOLEAN
False
Y
N
ShowValidationFailure
當所輸入值未通過驗證時顯示失敗訊息
BOOLEAN
False
Y
N
ShowValidationSuccess
當所輸入值成功通過驗證時，顯示成功訊息
BOOLEAN
False
Y
N
SuccessMessage
驗證成功時顯示的訊息
STRING
n\a
Y
Y
SuccessMessageDetails
顯示有關驗證成功訊息之詳細資訊的次要訊息
STRING
n\a
Y
Y
Validate
小器具值變更時觸發的可繫結事件。將此事件繫結至服務或函數以套用驗證模式或運算式。
event
n\a
Y
N
ValidationCriteriaIcon
選取要在驗證條件的提示訊息中顯示的 SVG 圖示
IMAGELINK
info
N
N
ValidationFailureIcon
設定當驗證失敗時要在狀況訊息中顯示的 SVG 圖示。
IMAGELINK
error
N
N
ValidationOutput
擷取小器具驗證的輸出。傳回的值為 Undefined、Valid、Unvalidated 或 Invalid。
STRING
n\a
Y
N
ValidationState
這是設定驗證狀態的可繫結內容。您可以將此內容設定為 Undefined、Unvalidated、Valid 或 Invalid。
STRING
Undefined
Y
N
ValidationSuccessIcon
選取當驗證成功時要在狀況訊息中顯示的 SVG 圖示
IMAGELINK
success
N
N
ValueRequired
需選取清單中某一項目
BOOLEAN
False
Y
N
這是否有幫助?