本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# Amazon Connect 中用户界面生成器的用户界面组件库
<a name="user-interface-component-library-sg"></a>

[Amazon Connect 用户界面组件文档中描述了所有界面](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/overview--page)生成器组件。本文档向您展示了可以在界面生成器中使用的各个 UI 组件，以及如何配置它们。

您可以在 UI 生成器的 “**创建**” 面板的 “**库**” 选项卡中访问库组件。下图显示了**库**选项卡和**容器**组件的示例。

![\[UI 生成器 “创建” 面板、“库” 选项卡、UI 组件。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/user-interface-component-library-example.png)


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

容器是生成视图的核心构建块。您可以将用户界面组件（包括其它容器）移动到一个容器中，以便在页面上以逻辑和直观的方式将它们分组在一起。

要在自定义顶层视图设置时保持页面内容相对一致，建议您在所有视图中使用容器。容器还带有列布局。列布局支持您整理容器内的内容。

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

要创建表单供座席或客户填写和提交，您可以使用[表单](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-form--with-all)组件。您可以：
+ 将**表单**组件从用户界面库拖放到画布上。
+ 或者，从**模板**选项卡中，选择**表单示例**模板。它使用表单组件。

[表单](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-form--with-all)组件是一种特殊类型的容器，您可以在其中插入输入字段并添加**提交**按钮。当与指南交互的用户按下**提交**按钮时，Amazon Connect 将输入到表单字段中的所有值传递给流。在流程中，您可以使用该[AWS Lambda 函数](invoke-lambda-function-block.md)模块将自己的业务逻辑和 send/retrieve 数据自定义到第三方系统。

下图显示了一个带有占位符标签和“提交”按钮的示例**表单**组件。

![\[带有占位符标签和“提交”按钮的表单组件。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/user-interface-component-library-form-section-example.png)