Mashup Builder > 小器具 > 標準小器具 > 下拉清單小器具 (主題化)
下拉清單小器具 (主題化)
* 
此小器具會取代舊有清單小器具的「組合方塊」檢視。
「下拉清單」小器具可讓您新增在執行時間開啟項目清單的下拉選單。您可以為單一或多個選取項配置小器具。所選項目會儲存在小器具 SelectedText 內容中，您可以將該內容繫結為其他小器具、功能或資料服務的輸入。您可藉由建立可傳回資料負載的資料服務，來定義項目及其狀態。您可使用小器具內容執行之組態的範例如下：
• 將項目標籤針對下拉清單向左、向右或置中對齊
• 啟用單一或多個選取項
• 新增篩選方塊，讓使用者能夠更快速地在長清單中找到項目
• 將樣式格式套用至清單項目
* 
「下拉清單」小器具可作為平台中的標準小器具使用，也可作為可從 SDL 匯入的 web 元件使用。
資料格式
欲配置「下拉清單」小器具的清單項目，您必須建立能夠傳回具有下列欄位定義之資料負載的資料服務：
顯示欄位
值欄位
狀態欄位
基礎類型
STRING
STRING
布林值
描述
要針對下拉清單中項目顯示的標籤。
要用於每個項目的實際值。當繫結至其他小器具或資料服務時，會在小器具 SelectedItems 內容中使用此值。
指定項目是已啟用還是已禁用。您無法選取已禁用的項目。
列範例
English
en
True
資料負載中的每一列都定義下拉清單中的一個項目。您可根據來自其他小器具或資料服務的輸入，將資料服務配置為靜態或以動態方式產生項目。
繫結清單項目資料
欲將組態資料繫結至下拉清單小器具，請執行下列步驟：
1. 使用「資料」面板新增包含清單項目之資料服務的物件。
2. 將服務的 All Data 內容繫結至小器具 Data 內容。
3. 將服務繫結至 Loaded 混搭事件。
4. 在「內容」面板中，指定要用來配置下拉清單項目的資料負載欄：
◦ DisplayField - 選取要用於項目標籤的欄。
◦ ValueField - 選取要用於項目實際值的欄。
◦ StateField - 選取要用於項目狀態的欄。
5. 按一下「儲存」，然後按一下「檢視混搭」。
在執行時間，當您開啟下拉清單時，會顯示清單項目。
設定清單與下拉清單之間的間距
使用小器具 ListMarginTop 內容可指定「下拉清單」與項目清單之間的間距。依預設，間距設定為 8 個像素。欲移除間距，請將此內容值設定為 0。
新增用來清除選取項的項目
依預設，「下拉清單」小器具不允許使用者在執行時間清除清單選取項。若要讓使用者能夠在執行時間清除選取項，請啟用 ClearSelectionItem 內容。已在清單中額外新增了一個預設標籤為「無」的項目。使用者可以選取此項目以避免在下拉清單中進行選擇。
小器具內容
屬性名稱
描述
基礎類型
預設值
可繫結? (Y/N)
可當地語系化? (Y/N)
HintText
顯示預留位置文字，說明應在欄位中輸入的內容。
STRING
選取..
Y
Y
Label
顯示為小器具標籤的文字。
STRING
n/a
Y
Y
LabelAlignment
可讓您向左、向右或置中對齊標籤。
STRING
左
Y
N
Alignment
可讓您在下拉清單中向左、向右或置中對齊文字項目。
STRING
左
Y
ClearSelectionItem
將空白選取項目新增至下拉清單。可讓使用者清除選取。
BOOLEAN
True
Y
ClearSelectionLabel
在下拉清單中指定清除選取項目的自訂文字。預設設定為「無」。
STRING
無
Y
Y
Disabled
使用此內容可禁用混搭中的小器具。小器具會顯示在混搭中，但您無法按一下。
BOOLEAN
False
Y
N
ShowListFilter
可讓您在下拉清單內新增篩選器，並可讓您在執行時間篩選清單項目。
BOOLEAN
False
N
N
FilterHintText
顯示下拉清單篩選器的提示文字。
STRING
n/a
Y
Y
ListMaxHeight
可讓您設定所顯示下拉清單的最大高度。
如果下拉清單中的項目數大於設定的清單高度，會在顯示中新增捲軸。
NUMBER
n/a
Y
N
StateField
代表下拉清單中條列項目狀態的資料負載。
此內容可用於啟用或禁用下拉清單中的條列項目。
INFOTABLE
n/a
N
N
MultiSelect
可讓使用者選取下拉清單中的多個項目。
BOOLEAN
False
N
N
AutoSelectFirstRow
可讓您將下拉清單中第一列設定為所選選項。
* 
當未選取 MultiSelect 內容時，此內容可供您使用。
BOOLEAN
False
N
N
RowHeight
可讓您設定單行的列高度。
NUMBER
34
Y
N
CustomClass
可讓您定義要套用至小器具頂部分區之 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
此內容有兩種運作方式，具體取決於在使用單一選取模式時它的繫結方向：
• 入 - 選取標籤符合內容值的項目。
• 出 - 擷取清單中所選項目的文字。
* 
當啟用多重選取時，不支援此內容。請改為使用 SelectedItems 內容。
STRING
n/a
Y
Y
SelectedItems
清單中所選項目的資料負載來源。
INFOTABLE
n/a
Y
N
ListFormat
可開啟一個對話方塊，讓您指定小器具資料的轉譯與格式規則。在 ThingWorx 9.1 及更新版本中，您也可以將狀態格式套用至小器具。
轉譯器和狀態格式
n/a
N
N
ListMarginTop
設定下拉清單和項目清單之間的間距。
NUMBER
8
N
N
TooltipField
顯示當您將游標置於與下拉清單及目前在下拉清單中所選值相關聯之標籤上時的工具提示文字。
* 
此內容適用於 ThingWorx 9.3.0 版及更新版本。
STRING
n/a
Y
Y
TooltipIcon
為下拉清單小器具的工具提示設定圖示圖像。
* 
此內容適用於 ThingWorx 9.3.0 版及更新版本。
MEDIA ENTITY
n/a
N
N
驗證下拉清單小器具資料
您可以使用驗證內容來驗證執行時間的項目選取。例如，您可以需要在下拉清單中選取一項，並在未選取項目時顯示錯誤訊息。
如需有關驗證內容的詳細資訊，請參閱將驗證套用至小器具。
下表列出了 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
這是否有幫助?