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

# Amazon Connect 中 UI 建置器的 UI 元件程式庫
<a name="user-interface-component-library-sg"></a>

[Amazon Connect UI 元件文件中說明所有 UI 建置器元件](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/overview--page)。本文件顯示您可以在 UI 建置器中使用的個別 UI 元件，以及如何設定這些元件。

您可以在**建立**面板的程式庫索引標籤中，存取 UI 建置器中的**程式庫**元件。下圖顯示**程式庫**索引標籤和**容器**元件的範例。

![\[UI 建置器建立面板、程式庫索引標籤、UI 元件。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/user-interface-component-library-example.png)


## 使用容器來移動和整理元件
<a name="user-interface-component-library-containers"></a>

容器是製作視圖的核心構建區塊。您可以將 UI 元件 (包括其他容器) 移動到容器中，在頁面上以邏輯和視覺化方式分類。

為了在自訂頂層視圖設定時維持相對一致的頁面內容，建議您在所有視圖中使用容器。容器也配有欄位配置。您可以透過欄位配置，在容器內整理內容。

## 建立表單
<a name="user-interface-component-library-form-section"></a>

若要建立表單供客服人員或客戶填寫和提交，請使用[表單](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-form--with-all)元件。您可擇一方法：
+ 從 UI 程式庫將**表單**元件拖放到畫布。
+ 或者從**範本**索引標籤中選取**表單範例**範本。該範本使用表單元件。

[表單](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-form--with-all)元件是一種特殊容器類型，您可以在其中插入輸入欄位和新增**提交**按鈕。與指南互動的使用者按下提交**按鈕**時，Amazon Connect 會將所有輸入到表格欄位的值傳到流程。此時，您可以在流程中使用 [AWS Lambda 函數](invoke-lambda-function-block.md) 區塊，自訂自己的業務邏輯，並將資料傳送/擷取至第三方系統。

下圖顯示具預留位置標籤和提交按鈕的**表單**元件範例。

![\[具預留位置標籤和提交按鈕的表單元件。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/user-interface-component-library-form-section-example.png)