

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

# 在視圖中設定欄位配置、顏色和資料定義
<a name="no-code-ui-builder-customize-panel"></a>

本主題說明如何在 Amazon Connect UI 建置器中設定欄配置、顏色和動態資料欄位，以自訂聯絡中心客服人員的檢視。

在 UI 建置器中，**自訂**面板位於右側，如下圖所示。

![UI 建置器中的自訂面板範例，即全域設定圖示。](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-customize-panel-example.png)


您可以使用**自訂**面板來設定：
+ 整個視圖資源的全域設定。
+ 元件層級的本機設定。每個元件都有自己的一組屬性。

您可以使用**自訂**面板來設定視圖，包括：
+ 欄位配置
+ 顏色
+ 動態資料映射
+ 範例資料
+ 靜態資料定義

## 設定視圖的全域配置和顏色
<a name="no-code-ui-builder-properties-global-settings"></a>

若要進行全域設定，請前往**自訂**面板，然後選擇全域設定圖示，如下圖所示。

![自訂面板，全域設定圖示。](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-properties-global-settings-example.png)


您可以使用全域設定來設定視圖的整體配置和顏色：
+ 透過**對齊**區段，控制元件在視圖左側、中心或右側的相對位置。
+ 選擇三個顏色欄位：
  + 主要顏色
  + 次要顏色
  + 中性顏色

 根據預設，視圖中的每個元件都會套用這些設定。但是，自訂元件時，您可以變更這些全域顏色設定。

## 配置欄位
<a name="no-code-ui-builder-properties-layout-columns"></a>

視圖資源使用帶有 12 欄的柔性盒子模式。元件會佔據彼此的相對位置。元件不會完美符合像素地放置在畫布上。如此一來，視圖能互動式調整大小，而不遺失視圖組成。

在全域設定中，您可以決定如何分類欄位。例如，在**欄位**區段中，您可以將視圖分成兩部分，每部分六個欄位，如下圖所示。

![欄位區段，分為兩部分，每部分有六個欄位。](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-properties-layout-columns-example-1.png)


下圖顯示客服人員看到的配置範例。

![視圖分為兩部分，每部分六個欄位，呈現給客服人員。](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-properties-layout-columns-details-example-1.png)


您也可以使用**自訂**滑桿，變更這些群組的比例。例如，您可以設定讓視圖左側為四欄，右側為八欄，如下圖所示：

![一邊有四欄，另一邊有八欄的配置。](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-properties-layout-columns-example-2.png)


下圖顯示使用者看到的配置範例。

![兩邊各有四欄，呈現給客服人員。](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/no-code-ui-builder-properties-layout-columns-details-example-2.png)
