本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 在 Amazon Connect 的無程式碼建置器 UI 中設定動態欄位
<a name="no-code-ui-builder-properties-dynamic-fields"></a>

本主題說明如何在建置客服人員和客戶介面時使用 Amazon Connect 中的無程式碼建置器 UI，以在元件中設定動態欄位，顯示執行時期資料，而非硬式編碼值。

在部分情況下，您可能希望能動態填入向客服人員或客戶顯示的資料，而不是硬式編碼。例如，如果您製作螢幕彈出視窗，您可能希望顯示客戶名稱和設定檔 ID。這種情況下，您便需要動態資料，因為每位聯絡人的這些欄位值可能都不同。

若要動態填入元件欄位：

1. 開啟該元件的屬性索引標籤。

1. 選取您想要在動態欄位旁顯示的動態圖示 (閃電圖示)。

最常需要動態值的欄位為：
+ 顯示欄位的**值**欄位。
+ 表單輸入的 **DefaultValue** 欄位。

技術上而言，任何客服人員可見和不可見的欄位都可以在執行時期動態決定。這就是為什麼**屬性**索引標籤的每個欄位都可以設為動態 (閃電圖示)。

例如，請參閱下圖的 **AttributesBar** 元件。

![\[屬性列元件，其值設為動態。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-attributebar-example.png)

+ 屬性 1 的標籤靜態定義為**客戶名稱**。
+ 屬性的**值**設為動態 (已選取閃電圖示)。

透過這些設定，**AttributesBar** 的值取決於執行時期傳入 [顯示檢視](show-view-block.md) 區塊的資料。

當欄位設為動態時，其靜態值則取代為動態參考。欄位下方會出現**範例資料**區段。您可以使用該區段來定義[範例資料](no-code-ui-builder-sample-data.md)。

動態參考會反映 [顯示檢視](show-view-block.md) 區塊在設定執行時期資料時預期的資料結構。例如，請參閱 [AttributesBar](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/ui-component-attributebar--with-attributes) 元件中，屬性 1 的**值**，如下圖所示。

![\[AttributesBar 元件中，屬性 1 的動態值。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-dynamicicon.png)

+  設為動態時，該欄位會變成 `$.AttributeBar_1.Attributes[0].Value`，其中 `AttributeBar_1` 是元件 ID。
+ 這表示在 [顯示檢視](show-view-block.md) 區塊中，`AttributeBar_1` 欄位應會收到物件。
+ 物件包含 `Attributes` 陣列，其中第一個項目 (`[0]`) 應為具 `Value` 欄位的物件。

您可以編輯動態參考，以提升清晰度和重複使用率。動態參考可以在視圖中的多個欄位和元件間共用。例如，在下圖 [AttributeBar](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/ui-component-attributebar--with-attributes) 元件中，我們會將其動態參考更新為 `$.myAttributeValue`。現在，[顯示檢視](show-view-block.md) 區塊具有預期字串輸入的 `myAttributeValue` 欄位。

![\[AttributeBar 元件的屬性；這是動態值。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-dynamic-example2.png)


**重要**  
動態參考的類型必須符合預期的欄位類型。例如，您無法在布林值欄位中使用字串型動態參考。下圖顯示動態參考不相符時的錯誤訊息範例。  

![\[自訂面板，出現錯誤訊息，因為動態參考不符合欄位的預期類型。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-properties-dynamic-fields-example-4.png)


您也可以選擇將元件的所有屬性設為動態。下圖中，有關此屬性的所有內容 (包括標籤) 將根據執行時期傳遞到 [顯示檢視](show-view-block.md) 區塊的值決定。例如，**客戶名稱**現在是範例資料，您可以使用這些資料，以了解客服人員使用指南時會看到的內容。但客服人員無法檢視此值。

![\[自訂面板，客戶名稱作為範例資料。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-properties-dynamic-fields-example-5.png)


針對特定元件，例如 [AttributesBar](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/ui-component-attributebar--with-attributes)，您也可以將元件的所有屬性設為動態。例如，您可以透過 AttributeBar 設定選擇動態圖示 (閃電)，將所有屬性設為動態。屬性取決於在執行時期傳遞至 [顯示檢視](show-view-block.md) 區塊的任何內容。

![\[AttributeBar 的所有屬性都會設為動態。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-properties-dynamic-6.png)