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

# 生成器文档
<a name="builder-documentation"></a>

以下主题包含的信息可帮助在 App Studio 中创建、编辑和发布应用程序的用户。

**Topics**
+ [教程](tutorials.md)
+ [使用生成式 AI 构建你的 App Studio 应用程序](generative-ai.md)
+ [创建、编辑和删除应用程序](applications-create-edit-delete.md)
+ [预览、发布和共享应用程序](applications-preview-publish-share.md)
+ [页面和组件：构建应用程序的用户界面](pages-components-ux.md)
+ [自动化和操作：定义应用程序的业务逻辑](automations.md)
+ [实体和数据操作：配置应用程序的数据模型](data.md)
+ [页面和自动化参数](paramters.md)
+ [JavaScript 用于在 App Studio 中编写表达式](expressions.md)
+ [数据依赖关系和时序注意事项](data-dependencies-timing-considerations.md)
+ [构建包含多个用户的应用程序](builder-collaboration.md)
+ [查看或更新应用程序的内容安全设置](app-content-security-settings-csp.md)

# 教程
<a name="tutorials"></a>

**Topics**
+ [使用 Amazon Bedrock 构建人工智能文本摘要器应用程序](tutorial-conversational-bedrock.md)
+ [使用组件和自动化与 Amazon 简单存储服务交互](automations-s3.md)
+ [在 App Studio 应用程序中调用 Lambda 函数](tutorial-lambda.md)

# 使用 Amazon Bedrock 构建人工智能文本摘要器应用程序
<a name="tutorial-conversational-bedrock"></a>

在本教程中，您将在 App Studio 中构建一个应用程序，该应用程序使用 Amazon Bedrock 来提供最终用户输入的文本的简明摘要。该应用程序包含一个简单的用户界面，用户可以在其中输入他们想要摘要的任何文本。这可能是会议记录、文章内容、研究结果或任何其他文字信息。用户输入文本后，他们可以按下按钮将文本发送到 Amazon Bedrock，Amazon Bedrock 将使用 Claude 3 Sonnet 模型对其进行处理并返回摘要版本。

**Contents**
+ [先决条件](#tutorial-conversational-bedrock-prerequisites)
+ [步骤 1：创建和配置 IAM 角色和 App Studio 连接器](#tutorial-conversational-bedrock-steps-create-role-connector)
+ [步骤 2：创建应用程序](#tutorial-conversational-bedrock-steps-create-application)
+ [步骤 3：创建和配置自动化](#tutorial-conversational-bedrock-steps-create-automation)
+ [步骤 4：创建页面和组件](#tutorial-conversational-bedrock-steps-user-interface)
  + [重命名默认页面](#tutorial-conversational-bedrock-steps-user-interface-create-page)
  + [向页面添加组件](#tutorial-conversational-bedrock-steps-user-interface-add-components)
  + [配置页面组件](#tutorial-conversational-bedrock-steps-user-interface-configure-components)
+ [步骤 5：将应用程序发布到**测试**环境](#tutorial-conversational-bedrock-steps-publish)
+ [（可选）清理](#tutorial-conversational-bedrock-steps-cleanup)

## 先决条件
<a name="tutorial-conversational-bedrock-prerequisites"></a>

在开始之前，请查看并完成以下先决条件：
+ 访问 AWS App Studio。请注意，您必须具有管理员角色才能在本教程中创建连接器。
+ 可选：查看[AWS 应用工作室的概念](concepts.md)并熟悉 App Studio 的重要概念。[教程：从一个空的应用程序开始构建](getting-started-tutorial-empty.md)

## 步骤 1：创建和配置 IAM 角色和 App Studio 连接器
<a name="tutorial-conversational-bedrock-steps-create-role-connector"></a>

要让 App Studio 访问亚马逊 Bedrock 型号，您必须：

1. 启用要在应用程序中使用的 Amazon Bedrock 模型。在本教程中，您将使用 **Claude 3 Sonnet**，因此请确保启用该模型。

1. 创建具有相应的 Amazon Bedrock 权限的 IAM 角色。

1. 使用将在您的应用程序中使用的 IAM 角色创建 App Studio 连接器。

[Connect 到 Amazon Bedrock](connectors-bedrock.md)有关详细说明，请在按照步骤操作并创建连接器后返回本教程。

## 步骤 2：创建应用程序
<a name="tutorial-conversational-bedrock-steps-create-application"></a>

使用以下步骤在 App Studio 中创建一个空应用程序，然后将其内置到文本摘要器应用程序中。

1. 登录 App Studio。

1. 导航到生成器中心，然后选择 **\$1 创建应用程序**。

1. 选择**从头开始**。

1. 在**应用程序名称**字段中，为您的应用程序提供一个名称，例如**Text Summarizer**。

1. 如果系统要求您选择数据源或连接器，请在本教程中选择 “**跳过**”。

1. 选择**下一步**以继续。

1. （可选）：观看视频教程，快速了解如何在 App Studio 中构建应用程序。

1. 选择 **“编辑应用程序”**，这将带您进入应用程序工作室。

## 步骤 3：创建和配置自动化
<a name="tutorial-conversational-bedrock-steps-create-automation"></a>

您可以在*自动化中定义 App Studio 应用程序的逻辑和行为。*自动化由称为*操作*的各个步骤、用于将数据从其他资源传递给操作的*参数*以及可供其他自动化或组件使用的*输出*组成。在此步骤中，您将创建一个自动化系统，通过以下方式处理与 Amazon Bedrock 的互动：
+ 输入：用于将用户输入的文本传递给自动化的参数。
+ 操作：一个 **GenAI 提示**操作，用于将文本输入发送到 Amazon Bedrock 并返回输出文本摘要。
+ 输出：由来自 Amazon Bedrock 的已处理摘要组成的自动化输出，可在您的应用程序中使用。

**创建和配置自动化，以便向 Amazon Bedrock 发送提示并处理和返回摘要**

1. 选择画布顶部的 “**自动化**” 选项卡。

1. 选择 **\$1 添加自动化**。

1. 在右侧面板中，选择 “**属性**”。

1. 通过选择铅笔图标来更新自动化名称。输入 **InvokeBedrock**，键入按 **Enter**。

1. 通过执行以下步骤，向自动化添加一个参数，该参数将用于将用户输入的文本提示传递到自动化中，以便在向 Amazon Bedrock 的请求中使用：

   1. 在画布的参数框中，选择 **\$1 添加**。

   1. 在**名称**中，输入 **input**。

   1. 在**描述**中，输入任何描述，例如**Text to be sent to Amazon Bedrock**。

   1. 在**类型**中，选择**字符串**。

   1. 选择 “**添加**” 以创建参数。

1. 通过执行以下步骤添加 **GenAI 提示**操作：

   1. 在右侧面板中，选择**动作**。

   1. 选择 **GenAI 提示**以添加操作。

1. 通过执行以下步骤来配置操作：

   1. 从画布中选择操作以打开右侧的 “**属性**” 菜单。

   1. **PromptBedrock**通过选择铅笔图标，输入名称并按 Enter 键将动作重命名为。

   1. 在**连接器**中，选择在中创建的连接器[步骤 1：创建和配置 IAM 角色和 App Studio 连接器](#tutorial-conversational-bedrock-steps-create-role-connector)。

   1. 在**模型**中，选择要用于处理提示的 Amazon Bedrock 型号。在本教程中，你将选择 **Claude 3.5 Sonn** et。

   1. 在**用户提示符**中，输入`{{params.input}}`。这表示您之前创建的`input`参数，并将包含您的应用程序用户输入的文本。

   1. 在**系统提示符**中，输入您要发送给 Amazon Bedrock 的系统提示符说明。在本教程中，输入以下内容：

      ```
      You are a highly efficient text summarizer. Provide a concise summary of the prompted text, capturing the key points and main ideas.
      ```

   1. 选择 “**请求设置”** 将其展开，然后更新以下字段：
      + 在**温度**中，输入`0`。温度在 0 到 10 的范围内决定输出的随机性或创造性。数字越高，回应就越有创意。
      + 在**最大代币**数中，输入`4096`以限制响应的长度。

1. 此自动化的输出将是摘要文本，但是，默认情况下，自动化不会创建输出。通过执行以下步骤配置自动化以创建自动化输出：

   1. 在左侧导航栏中，选择**InvokeBedrock**自动化。

   1. 在右侧的 “**属性**” 菜单的 “**输出**” 中，选择 **\$1 添加**。

   1. 在**输出中，输**入**\$1\$1results.PromptBedrock.text\$1\$1**。此表达式返回`processResults`操作的内容。

## 步骤 4：创建页面和组件
<a name="tutorial-conversational-bedrock-steps-user-interface"></a>

在 App Studio 中，每个页面都代表用户将与之交互的应用程序用户界面 (UI) 屏幕。在这些页面中，您可以添加各种组件，例如表格、表单、按钮等，以创建所需的布局和功能。

### 重命名默认页面
<a name="tutorial-conversational-bedrock-steps-user-interface-create-page"></a>

本教程中的文本摘要器应用程序将仅包含一页。新创建的应用程序带有默认页面，因此您可以重命名该页面，而不是添加一个页面。

**重命名默认页面**

1. 在顶部栏导航菜单中，选择**页面**。

1. 在左侧面板中，选择 **Page1**，然后在右侧面板中选择 “**属性**” 面板。

1. 选择铅笔图标，输入**TextSummarizationTool**，然后**按 Enter**。

1. 在**导航标签**中输入**TextSummarizationTool**。

### 向页面添加组件
<a name="tutorial-conversational-bedrock-steps-user-interface-add-components"></a>

在本教程中，文本摘要器应用程序有一个包含以下组件的页面：
+ 一种**文本输入**组件，最终用户使用它来输入要汇总的提示。
+ 用于向 Amazon Bedrock 发送提示的 B **ut** ton 组件。
+ 一个**文本区域**组件，用于显示来自 Amazon Bedrock 的摘要。

向页面添加**文本输入**组件，用户将使用该组件输入要汇总的文本提示。

**添加文本输入组件**

1. 在右侧的 “**组件**” 面板中，找到**文本输入**组件并将其拖到画布上。

1. 选择画布中的文本输入以将其选中。

1. 在右侧的 “**属性**” 面板中，更新以下设置：

   1. 选择铅笔图标将文本输入重命名为**inputPrompt**。

   1. 在**标签**中，输入**Prompt**。

   1. 在**占位符**中，输入**Enter text to be summarized**。

现在，添加一个 B **ut** ton 组件，用户可以选择将其发送到 Amazon Bedrock。

**添加按钮组件**

1. 在右侧的 “**组件**” 面板中，找到 B **ut** ton 组件并将其拖到画布上。

1. 在画布中选择按钮将其选中。

1. 在右侧的 “**属性**” 面板中，更新以下设置：

   1. 选择要将按钮重命名为的铅笔图标**sendButton**。

   1. 在 **“按钮标签”** 中，输入**Send**。

现在，添加一个**文本区域**组件，该组件将显示 Amazon Bedrock 返回的摘要。

**添加文本区域组件**

1. 在右侧的 “**组件**” 面板中，找到**文本区域**组件并将其拖到画布上。

1. 在画布中选择文本区域将其选中。

1. 在右侧的 “**属性**” 面板中，更新以下设置：

   1. 选择要将按钮重命名为的铅笔图标**textSummary**。

   1. 在**标签**中，输入**Summary**。

### 配置页面组件
<a name="tutorial-conversational-bedrock-steps-user-interface-configure-components"></a>

现在，该应用程序包含一个包含组件的页面，下一步是配置组件以执行适当的行为。要将组件（例如按钮）配置为在与之交互时执行操作，必须向其添加*触发器*。对于本教程中的应用程序，您将在`sendButton`按钮中添加两个触发器来执行以下操作：
+ 第一个触发器将`textPrompt`组件中的文本发送到 Amazon Bedrock 进行分析。
+ 第二个触发器在`textSummary`组件中显示从 Amazon Bedrock 返回的摘要。

**添加将提示发送到 Amazon Bedrock 的触发器**

1. 在画布中选择按钮将其选中。

1. 在右侧的 “**属性**” 面板的 “**触发器**” 部分，选择 **\$1 添加**。

1. 选择 “**调用自动化**”。

1. 选择为对其进行配置而创建的 **InvokeAutomation1** 触发器。

1. 在**操作名称**中，输入**invokeBedrockAutomation**。

1. 在 “**调用自动化**” 中，选择之前创建的**InvokeBedrock**自动化。

1. 在参数框中，在之前创建的**输入**参数中输入**\$1\$1ui.inputPrompt.value\$1\$1**，它会传递`inputPrompt`文本输入组件中的内容。

1. 选择面板顶部的左箭头返回到组件属性菜单。

现在，您已经配置了一个触发器，该触发器会在点击按钮时调用自动向 Amazon Bedrock 发送请求，下一步是配置第二个触发器，在组件中显示结果。`textSummary`

**添加在文本区域组件中显示 Amazon Bedrock 结果的触发器**

1. 在按钮右侧的 “**属性**” 面板的 “**触发器**” 部分，选择 **\$1 添加**。

1. 选择 “**运行组件操作”**。

1. 选择为对其进行配置而创建的 **Runcomponentaction1** 触发器。

1. 在**操作名称**中，输入**setTextSummary**。

1. 在**组件**中，选择**文本摘要**组件。

1. 在 “**操作**” 中，选择 “**设置值**”。

1. 在 **“将值设置为**” 中，输入**\$1\$1results.invokeBedrockAutomation\$1\$1**。

## 步骤 5：将应用程序发布到**测试**环境
<a name="tutorial-conversational-bedrock-steps-publish"></a>

通常，在构建应用程序时，最好先对其进行预览以查看其外观并对其功能进行初步测试。但是，由于应用程序在预览环境中不与外部服务交互，因此您可以将应用程序发布到测试环境，以便能够测试发送请求和接收来自 Amazon Bedrock 的响应。

**将您的应用程序发布到测试环境**

1. 在应用程序构建器的右上角，选择**发布**。

1. 为测试环境添加版本描述。

1. 查看并选中与 SLA 相关的复选框。

1. 选择**启动**。发布最多可能需要 15 分钟。

1. （可选）准备就绪后，您可以通过选择 “**共享**” 并按照提示向其他人授予访问权限。有关共享 App Studio 应用程序的更多信息，请参阅[共享已发布的应用程序](application-share.md)。

测试应用程序后，再次选择 **Publish** 以将该应用程序提升到生产环境。请注意，生产环境中的应用程序只有在共享后才可供最终用户使用。有关不同应用程序环境的更多信息，请参阅[应用程序环境](applications-publish.md#application-environments)。

## （可选）清理
<a name="tutorial-conversational-bedrock-steps-cleanup"></a>

现在，您已成功完成本教程，并使用 Amazon Bedrock 在 App Studio 中构建了一个文本摘要应用程序。您可以继续使用您的应用程序，也可以清理在本教程中创建的资源。以下列表包含要清理的资源列表：
+ 在 App Studio 中创建的亚马逊 Bedrock 连接器。有关更多信息，请参阅 [查看、编辑和删除连接器](viewing-deleting-connectors.md)。
+ App Studio 中的文本摘要器应用程序。有关更多信息，请参阅 [删除 应用程序](applications-delete.md)。
+ 在 IAM 控制台中创建的 IAM 角色。有关更多信息，请参阅*AWS Identity and Access Management 用户指南*中的[删除角色或实例配置文件](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_manage_delete.html)。
+ *如果您请求模型访问权限以使用 Claude 3 Sonnet 并希望恢复访问权限，请参阅《亚马逊 Bedrock [用户指南》中的 “管理对亚马逊 Bedrock 基础模型](https://docs.aws.amazon.com/bedrock/latest/userguide/model-access.html)的访问权限”。*

# 使用组件和自动化与 Amazon 简单存储服务交互
<a name="automations-s3"></a>

您可以从 App Studio 应用程序中调用各种 Amazon S3 操作。例如，您可以创建一个简单的管理面板来管理您的用户和订单，并显示来自 Amazon S3 的媒体。虽然您可以使用调用操作调用任何 Amazon S3 AWS操作，但您可以将四个专**用** Amazon S3 操作添加到应用程序的自动化中，以便对 Amazon S3 存储桶和对象执行常见操作。这四个动作及其操作如下：
+ **放置对象**：使用`Amazon S3 PutObject`操作将对象添加到 Amazon S3 存储桶。
+ **获取对象**：使用`Amazon S3 GetObject`操作从 Amazon S3 存储桶中检索对象。
+ **列出对象**：使用`Amazon S3 ListObjects`操作列出 Amazon S3 存储桶中的对象。
+ **删除对象**：使用`Amazon S3 DeleteObject`操作从 Amazon S3 存储桶中删除对象。

除了操作之外，还有一个 **S3 上传**组件，您可以将其添加到应用程序的页面中。用户可以使用此组件选择要上传的文件，该组件调用将文件上传`Amazon S3 PutObject`到配置的存储桶和文件夹。本教程将使用此组件代替独立的 Pu **t Object** 自动化操作。（独立操作应用于更复杂的场景，这些场景涉及在上传之前或之后要执行的额外逻辑或操作。）

## 先决条件
<a name="automations-s3-prerequisites"></a>

本指南假设您已完成以下先决条件：

1. 创建并配置了亚马逊 S3 存储桶、IAM 角色和策略以及亚马逊 S3 连接器，以便成功将 Amazon S3 与 App Studio 集成。要创建连接器，必须具有管理员角色。有关更多信息，请参阅 [连接到亚马逊简单存储服务 (Amazon S3) Service](connectors-s3.md)。

## 创建一个空的应用程序
<a name="automations-s3-create-app"></a>

执行以下步骤，创建一个要在本指南中使用的空应用程序。

**创建空应用程序**

1. 在导航窗格中，选择**我的应用程序**。

1. 选择 **\$1 创建应用程序**。

1. 在 “**创建应用程序**” 对话框中，为应用程序命名，选择 “**从头开始**”，然后选择 “**下一步**”。

1. 在 “**连接现有数据**” 对话框中，选择 “**跳过**” 以创建应用程序。

1. 选择 **“编辑应用程序”**，进入新应用程序的画布，您可以在其中使用组件、自动化和数据来配置应用程序的外观和功能。

## 创建页面
<a name="automations-s3-create-pages"></a>

在应用程序中创建三个页面以收集或显示信息。

**创建页面**

1. 如有必要，请选择画布顶部的 “**页面**” 选项卡。

1. 在左侧导航栏中，有一个使用您的应用程序创建的页面。选择 “**\$1 添加**” 两次可再创建两个页面。导航窗格总共应显示三个页面。

1. 通过执行以下步骤更新 **Page1** 页面的名称：

   1. 选择省略号图标并选择**页面属性**。

   1. 在右侧的 “**属性**” 菜单中，选择铅笔图标以编辑名称。

   1. 输入 **FileList**，键入按 **Enter**。

1. 重复前面的步骤更新第二页和第三页，如下所示：
   + 将 **Page2** 重命名为。**UploadFile**
   + 将 **Page3** 重命名为。**FailUpload**

现在，您的应用程序应该有三个名为**FileList**、和**UploadFile**、的页面 **FailUpload**，它们显示在左侧的 “**页面**” 面板中。

接下来，您将创建和配置与 Amazon S3 交互的自动化。

## 创建和配置自动化
<a name="automations-s3-automations"></a>

创建与 Amazon S3 交互的应用程序的自动化程序。使用以下过程创建以下自动化：
+ **GetFiles** 自动化，用于列出您的 Amazon S3 存储桶中的对象，这些对象将用于填充表格组件。
+ **DeleteFile** 自动化，用于从您的 Amazon S3 存储桶中删除对象，该存储桶将用于向表格组件添加删除按钮。
+ **ViewFile** 自动化，可从您的 Amazon S3 存储桶中获取对象并显示该对象，用于显示有关从表格组件中选择的单个对象的更多详细信息。

### 创建`getFiles`自动化
<a name="automations-s3-get-files"></a>

创建自动化，列出指定 Amazon S3 存储桶中的文件。

1. 选择画布顶部的 “**自动化**” 选项卡。

1. 选择 **\$1 添加自动化**。

1. 在右侧面板中，选择 “**属性**”。

1. 通过选择铅笔图标来更新自动化名称。输入 **getFiles**，键入按 **Enter**。

1. 通过执行以下步骤添加 “**列出对象**” 操作：

   1. 在右侧面板中，选择**动作**。

   1. 选择 “**列出对象**” 以添加动作。该动作应命名`ListObjects1`。

1. 通过执行以下步骤来配置操作：

   1. 从画布中选择操作以打开右侧的 “**属性**” 菜单。

   1. 对于**连接器**，请选择您根据先决条件创建的 Amazon S3 连接器。

   1. 在**配置**中，输入以下文本，*bucket\$1name*替换为您在先决条件中创建的存储桶：

      ```
      {
        "Bucket": "bucket_name",
        "Prefix": ""
      }
      ```
**注意**  
您可以使用该`Prefix`字段将响应限制为以指定字符串开头的对象。

1. 此自动化的输出将用于使用您的 Amazon S3 存储桶中的对象填充表组件。但是，默认情况下，自动化不会创建输出。通过执行以下步骤配置自动化以创建自动化输出：

   1. 在左侧导航栏中，选择 **GetFiles 自动化**。

   1. 在右侧的 “**属性**” 菜单上，在 “**自动输出**” 中，选择 “**\$1 添加输出**”。

   1. 在 “**输出**” 中，输入**\$1\$1results.ListObjects1.Contents\$1\$1**。此表达式返回操作的内容，现在可用于填充表格组件。

### 创建`deleteFile`自动化
<a name="automations-s3-delete-file"></a>

创建自动化，从指定的 Amazon S3 存储桶中删除对象。

1. 在左侧的 “**自动化**” 面板中，选择 **\$1** 添加。

1. 选择 **\$1 添加自动化**。

1. 在右侧面板中，选择 “**属性**”。

1. 通过选择铅笔图标来更新自动化名称。输入 **deleteFile**，键入按 **Enter**。

1. 通过执行以下步骤，添加用于向自动化传递数据的自动化参数：

   1. 在右侧的 “**属性**” 菜单的 “**自动化参数**” 中，选择 **\$1 添加**。

   1. 选择铅笔图标编辑自动化参数。将参数名称更新为，**fileName**然后**按 Enter**。

1. 通过执行以下步骤添加 “**删除对象**” 操作：

   1. 在右侧面板中，选择**动作**。

   1. 选择 “**删除对象**” 以添加动作。该动作应命名`DeleteObject1`。

1. 通过执行以下步骤来配置操作：

   1. 从画布中选择操作以打开右侧的 “**属性**” 菜单。

   1. 对于**连接器**，请选择您根据先决条件创建的 Amazon S3 连接器。

   1. 在**配置**中，输入以下文本，*bucket\$1name*替换为您在先决条件中创建的存储桶：

      ```
      {
        "Bucket": "bucket_name",
        "Key": params.fileName
      }
      ```

### 创建`viewFile`自动化
<a name="automations-s3-view-file"></a>

创建自动化，从指定的 Amazon S3 存储桶中检索单个对象。稍后，您将使用文件查看器组件来配置此自动化，以显示该对象。

1. 在左侧的 “**自动化**” 面板中，选择 **\$1** 添加。

1. 选择 **\$1 添加自动化**。

1. 在右侧面板中，选择 “**属性**”。

1. 通过选择铅笔图标来更新自动化名称。输入 **viewFile**，键入按 **Enter**。

1. 通过执行以下步骤，添加用于向自动化传递数据的自动化参数：

   1. 在右侧的 “**属性**” 菜单的 “**自动化参数**” 中，选择 **\$1 添加**。

   1. 选择铅笔图标编辑自动化参数。将参数名称更新为，**fileName**然后**按 Enter**。

1. 通过执行以下步骤添加 “**获取对象**” 操作：

   1. 在右侧面板中，选择**动作**。

   1. 选择 “**获取对象**” 以添加动作。该动作应命名`GetObject1`。

1. 通过执行以下步骤来配置操作：

   1. 从画布中选择操作以打开右侧的 “**属性**” 菜单。

   1. 对于**连接器**，请选择您根据先决条件创建的 Amazon S3 连接器。

   1. 在**配置**中，输入以下文本，*bucket\$1name*替换为您在先决条件中创建的存储桶：

      ```
      {
        "Bucket": "bucket_name",
        "Key": params.fileName
      }
      ```

1. 默认情况下，自动化不会创建输出。通过执行以下步骤配置自动化以创建自动化输出：

   1. 在左侧导航栏中，选择 **ViewFile 自动化**。

   1. 在右侧的 “**属性**” 菜单上，在 “**自动输出**” 中，选择 “**\$1 添加输出**”。

   1. 在 “**输出**” 中，输入**\$1\$1results.GetObject1.Body.transformToWebStream()\$1\$1**。此表达式返回操作的内容。
**注意**  
您可以通过以下方式阅读`S3 GetObject`的回复：  
`transformToWebStream`：返回一个流，必须使用该流才能检索数据。如果用作自动化输出，则自动化会处理此问题，并且输出可用作图像或 PDF 查看器组件的数据源。它也可以用作其他操作的输入，例如`S3 PutObject`。
`transformToString`：返回自动化的原始数据，如果您的文件包含文本内容（例如 JSON 数据），则应在 JavaScript 操作中使用该数据。必须等待，例如：`await results.GetObject1.Body.transformToString();`
`transformToByteArray`: 返回一个 8 位无符号整数的数组。此响应用于字节数组，该数组允许存储和操作二进制数据。必须等待，例如：`await results.GetObject1.Body.transformToByteArray();`

接下来，您将向之前创建的页面添加组件，并使用您的自动化功能对其进行配置，以便用户可以使用您的应用程序查看和删除文件。

## 添加和配置页面组件
<a name="automations-s3-components"></a>

现在，您已经创建了定义应用程序业务逻辑和功能的自动化，接下来您将创建组件并将它们连接起来。

### 向**FileList**页面添加组件
<a name="automations-s3-components-filelist-page"></a>

您之前创建的**FileList**页面将用于显示已配置的 Amazon S3 存储桶中的文件列表以及有关从列表中选择的任何文件的更多详细信息。为此，您将执行以下操作：

1. 创建表格组件以显示文件列表。您需要将表的行配置为使用之前创建的 **getFiles** 自动化的输出进行填充。

1. 创建 PDF 查看器组件以显示单个 PDF。您将使用之前创建的 ViewFile 自动化功能将组件配置为**查看从表中选择的文件**，从存储桶中提取文件。

**向**FileList**页面添加组件**

1. 选择画布顶部的 “**页面**” 选项卡。

1. 在左侧的 “**页面**” 面板中，选择**FileList**页面。

1. 在右侧的 “**组件**” 页面上，找到**表格**组件并将其拖动到画布的中央。

1. 选择您刚刚添加到页面的表格组件。

1. 在右侧的 “**属性**” 菜单上，选择 “**来源**” 下拉列表并选择 “**自动化**”。

1. 选择 “**自动化**” 下拉列表并选择 **GetFiles** 自动化。该表将使用 **getFiles** 自动化的输出作为其内容。

1. 添加一列，用文件名填充。

   1. 在右侧的 “**属性**” 菜单上，选择 “**列**” 旁边，选择 “**\$1 添加**”。

   1. 选择刚刚添加的 **Column1** 列右侧的箭头图标。

   1. 对于**列标签**，将列重命名为**Filename**。

   1. 对于**值**，请输入 **\$1\$1currentRow.Key\$1\$1**。

   1. 选择面板顶部的箭头图标可返回主**属性**面板。

1. 添加表格操作以连续删除文件。

   1. 在右侧的 “**属性**” 菜单上，选择 “**操作**” 旁边的 “**\$1 添加**”。

   1. 在 “**操作**” 中，将 **“按钮”** 重命名为**Delete**。

   1. 选择刚刚重命名的 “**删除”** 操作右侧的箭头图标。

   1. 在 **“点击时”** 中，选择 “**\$1 添加操作**”，然后选择 “**调用自动化**”。

   1. 选择为对其进行配置而添加的操作。

   1. 对于**操作名称**，输入 **DeleteRecord**。

   1. 在 “**调用自动化**” 中，选择**deleteFile**。

   1. 在参数文本框中，输入**\$1\$1currentRow.Key\$1\$1**。

   1. 对于**值**，请输入 **\$1\$1currentRow.Key\$1\$1**。

1. 在右侧面板中，选择 “**组件**” 以查看组件菜单。显示文件有两种选择：
   + **图像查看器**，用于查看`.jpg`扩展名为`.png``.jpeg`、或的文件。
   + 用于查看 **PDF 文件的 PDF 查看器**组件。

   在本教程中，您将添加和配置 **PDF 查看器**组件。

1. 添加 **PDF 查看器**组件。

   1. 在右侧的 “**组件**” 页面上，找到 **PDF 查看器**组件，然后将其拖到表格组件下方的画布上。

   1. 选择刚刚添加的 **PDF 查看器**组件。

   1. 在右侧的 “**属性**” 菜单上，选择 “**来源**” 下拉列表并选择 “**自动化**”。

   1. 选择 “**自动化**” 下拉列表并选择 **ViewFile** 自动化。该表将使用 **ViewFile** 自动化的输出作为其内容。

   1. 在参数文本框中，输入**\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**。

   1. 在右侧面板中，还有一个 “**文件名” 字**段。此字段的值用作 PDF 查看器组件的标题。输入与上一步相同的文本:**\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**.

### 向**UploadFile**页面添加组件
<a name="automations-s3-components-uploadfile-page"></a>

该**UploadFile**页面将包含一个文件选择器，可用于选择文件并将其上传到已配置的 Amazon S3 存储桶。您将在页面中添加 **S3 上传**组件，用户可以使用该组件来选择和上传文件。

1. 在左侧的 “**页面**” 面板中，选择**UploadFile**页面。

1. 在右侧的 “**组件**” 页面上，找**到 S3 上传**组件并将其拖到画布中央。

1. 选择您刚刚添加到页面的 S3 上传组件。

1. 在右侧的 “**属性**” 菜单上，配置组件：

   1. 在**连接器**下拉列表中，选择先决条件中创建的 Amazon S3 连接器。

   1. 在**存储桶中**，输入您的 Amazon S3 存储桶的名称。

   1. 对于**文件名**，输入 **\$1\$1ui.s3Upload1.files[0]?.nameWithExtension\$1\$1**。

   1. 对于 “**最大文件大小**”，**5**在文本框中输入，并确保**MB**在下拉列表中将其选中。

   1. 在 “**触发器**” 部分，通过执行以下步骤添加在上传成功或失败后运行的操作：

      要添加在成功上传后运行的操作，请执行以下操作：

      1. **在 “成功**时” 中，选择 “**\$1 添加操作**”，然后选择 “**导航**”。

      1. 选择为对其进行配置而添加的操作。

      1. 对于**导航类型**，请选择**页面**。

      1. **在 “导航到”** 中，选择**FileList**。

      1. 选择面板顶部的箭头图标可返回主**属性**面板。

      要添加在上传失败后运行的操作，请执行以下操作：

      1. **在 “失败**时” 中，选择 “**\$1 添加操作**”，然后选择 “**导航**”。

      1. 选择为对其进行配置而添加的操作。

      1. 对于**导航类型**，请选择**页面**。

      1. **在 “导航到”** 中，选择**FailUpload**。

      1. 选择面板顶部的箭头图标可返回主**属性**面板。

### 向**FailUpload**页面添加组件
<a name="automations-s3-components-failupload-page"></a>

该**FailUpload**页面是一个简单的页面，其中包含一个文本框，用于通知用户其上传失败。

1. 在左侧的 “**页面**” 面板中，选择**FailUpload**页面。

1. 在右侧的 “**组件**” 页面上，找到**文本**组件并将其拖动到画布的中央。

1. 选择您刚刚添加到页面的文本组件。

1. 在右侧的 “**属性**” 菜单上，在 “**值**” 中输入**Failed to upload, try again**。

## 更新您的应用程序安全设置
<a name="automations-s3-components-app-security-settings"></a>

App Studio 中的每个应用程序都有内容安全设置，您可以使用这些设置来限制外部媒体或资源，或者限制您可以向 Amazon S3 中的哪些域上传对象。默认设置是屏蔽所有域名。要从您的应用程序将对象上传到 Amazon S3，您必须更新设置以允许您要向其上传对象的域。

**允许域名将对象上传到 Amazon S3**

1. 选择**应用程序设置**选项卡。

1. 选择 “**内容安全设置**” 选项卡。

1. 对于 **Connect 来源**，选择 “**允许所有连接**”。

1. 选择**保存**。

## 后续步骤：预览并发布应用程序以供测试
<a name="automations-s3-preview-publish-test"></a>

该应用程序现已准备就绪，可以进行测试了。有关预览和发布应用程序的更多信息，请参阅[预览、发布和共享应用程序](applications-preview-publish-share.md)。

# 在 App Studio 应用程序中调用 Lambda 函数
<a name="tutorial-lambda"></a>

本教程向您展示如何将 App Studio 连接到 Lambda 以及如何从您的应用程序调用 Lambda 函数。

## 先决条件
<a name="tutorial-lambda-prerequisites"></a>

本指南假设您已完成以下先决条件：

1. 已创建 App Studio 应用程序。如果没有，则可以创建一个空的应用程序以在本教程中使用。有关更多信息，请参阅 [创建 应用程序](applications-create.md)。

**注意**  
虽然您不需要 Lambda 函数即可按照本教程学习如何对其进行配置，但拥有一个 Lambda 函数可能会有所帮助，以确保您已正确配置应用程序。[本教程不包含有关创建 Lambda 函数的信息。有关更多信息，请参阅开发人员指南。AWS Lambda](https://docs.aws.amazon.com/lambda/latest/dg/)

## 创建 Lambda 连接器
<a name="tutorial-lambda-create-connector"></a>

要在您的 App Studio 应用程序中使用 Lambda 函数，您必须使用连接器将 App Studio 连接到 Lambda，以提供对您的函数的访问权限。只有管理员才能在 App Studio 中创建连接器。有关创建 Lambda 连接器的更多信息，包括创建连接器的步骤，请参阅。[连接到 AWS Lambda](connectors-lambda.md)

## 创建和配置自动化
<a name="tutorial-lambda-automation"></a>

自动化用于定义应用程序的逻辑，由操作组成。要在应用程序中调用 Lambda 函数，您需要先向自动化添加并配置 “调用 *Lambda*” 操作。使用以下步骤创建自动化并向其添加 “*调用 Lambda*” 操作。

1. 编辑应用程序时，选择 “**自动化” 选项卡。**

1. 选择 **\$1 添加自动化**。

1. 在右侧的 “**操作**” 菜单中，选择 “**调用 Lambd** a”，将该步骤添加到您的自动化中。

1. 在画布中选择新的 Lambda 步骤以查看和配置其属性。

1. 在右侧的 “**属性**” 菜单中，通过执行以下步骤来配置该步骤：

   1. 在 **C** onnector 中，选择为将 App Studio 连接到您的 Lambda 函数而创建的连接器。

   1. 在**函数名称**中，输入您的 Lambda 函数的名称。

   1. 在**函数事件**中，输入要传递给 Lambda 函数的事件。以下列表提供了一些常见的用例示例：
      + 传递自动化参数的值，例如文件名或其他字符串：`varName: params.paramName`
      + 传递先前操作的结果：`varName: results.actionName1.data[0].fieldName`
      + 如果您在 L *oop* 操作中*添加 Invoke Lambda* 操作，则可以从每个迭代项目中发送与参数类似的字段：`varName: currentItem.fieldName`

   1. **Mocked ou** tput 字段可用于提供模拟输出，以便在预览时测试应用程序，其中连接器未处于活动状态。

## 配置用户界面元素以运行自动化
<a name="tutorial-lambda-create-pages"></a>

现在，您的自动化配置了调用您的 Lambda 函数的操作，您可以配置一个用户界面元素来运行自动化。在本教程中，您将创建一个按钮，单击该按钮即可运行自动化。

**提示**  
您还可以使用 “*调用自动化” 操作从其他自动化*中运行自动化。

**通过按钮运行自动化**

1. 编辑应用程序时，选择 “**页面**” 选项卡。

1. 在右侧菜单中，选择 B **ut** ton 组件以向页面添加按钮。

1. 选择新按钮进行配置。

1. 在右侧的 “**属性**” 菜单的 “**触发器**” 中，选择 “**\$1 添加**”，然后选择 “**调用自动化**”。

1. 选择新的自动化调用触发器进行配置。

1. 在**调用自动化**中，选择调用您的 Lambda 函数的自动化，并配置要发送给自动化的任何参数。

现在，任何在您的应用程序中选择此按钮的用户都将使配置的自动化运行。

## 后续步骤：预览并发布应用程序以供测试
<a name="tutorial-lambda-preview-publish-test"></a>

您的应用程序现已准备好进行测试。在开发环境中预览应用程序时，连接器处于非活动状态，因此您无法在预览时测试自动化，因为它使用连接器进行连接。 AWS Lambda要测试您的应用程序依赖于连接器的功能，您必须将应用程序发布到测试环境。有关预览和发布应用程序的更多信息，请参阅[预览、发布和共享应用程序](applications-preview-publish-share.md)。

# 使用生成式 AI 构建你的 App Studio 应用程序
<a name="generative-ai"></a>

AWS App Studio 提供集成的生成式 AI 功能，可加快开发速度并简化常见任务。你可以利用生成式 AI 来生成和编辑应用程序、数据模型、样本数据，甚至可以在构建应用程序时获得情境帮助。

## 正在生成您的应用程序
<a name="generative-ai-generate-app"></a>

为了加快启动速度，您可以使用由 AI 支持的自然语言提示生成整个应用程序。此功能允许您描述所需的应用程序功能，AI 将自动构建数据模型、用户界面、工作流程和连接器。有关使用 AI 生成应用程序的更多信息，请参阅[创建 应用程序](applications-create.md)。

## 构建或编辑您的应用程序
<a name="generative-ai-build-app"></a>

在编辑应用程序时，您可以使用聊天来描述您要进行的更改，并且您的应用程序会自动更新。您可以从现有的示例提示中进行选择，也可以输入自己的提示。聊天可用于添加、编辑和删除支持的组件，还可以创建和配置自动化和操作。使用以下步骤使用 AI 编辑或构建您的应用程序。

**使用 AI 编辑您的应用程序**

1. 如有必要，请编辑您的应用程序以导航到应用程序工作室。

1. （可选）选择要使用 AI 编辑的页面或组件。

1. 选择左下角的 “**使用 AI 构建**” 以打开聊天。

1. 输入要进行的更改，或从示例提示中进行选择。

1. 查看要进行的更改。如果要进行更改，请选择 “**确认**”。否则，请输入另一个提示。

1. 查看变更摘要。

## 生成您的数据模型
<a name="generative-ai-data-model"></a>

您可以根据提供的实体名称自动生成包含字段、数据类型和数据操作的实体。有关创建实体（包括使用创建实体）的更多信息 GenAi，请参阅[在 App Studio 应用程序中创建实体](data-entities-create.md)。

您也可以通过以下方式更新现有实体：
+ 向实体添加更多字段。有关更多信息，请参阅 [添加、编辑或删除实体字段](data-entities-edit-fields.md)。
+ 向实体添加数据操作。有关更多信息，请参阅 [创建数据操作](data-entities-edit-data-actions.md#data-entities-data-action-add)。

## 生成样本数据
<a name="generative-ai-generate-sample-data"></a>

您可以根据实体的字段为实体生成示例数据。这对于在连接外部数据源之前测试您的应用程序，或者在不与外部数据源通信的开发环境中测试您的应用程序非常有用。有关更多信息，请参阅 [添加或删除示例数据](data-entities-edit-sample-data.md)。

将应用程序发布到测试或生产环境后，您的实时数据源和连接器将在这些环境中使用。

## 为 AWS 服务配置操作
<a name="generative-ai-aws-actions-configuration"></a>

在与 Amazon Simple Email Service 等 AWS 服务集成时，您可以使用 AI 生成示例配置，其中包含基于所选服务的预填字段。要尝试一下，请在 “**调用 AWS** 自动化” 操作的 “**属性**” 菜单中，选择双面箭头展开 “**配置**” 字段。然后，选择 “**生成示例配置”**。

## 嘲笑的回应
<a name="generative-ai-mock-responses"></a>

您可以为 AWS 服务操作生成模拟响应。这有助于在开发环境中测试您的应用程序，因为开发环境不与外部数据源通信。

## 在建造时向 AI 寻求帮助
<a name="generative-ai-ask-ai"></a>

在应用程序工作室中，你可以在支持的资源或属性上找到 **AI 寻求帮助**按钮。使用它来获取与当前视图或所选组件相关的上下文建议、文档和指导。询问有关 App Studio、应用程序构建最佳实践或您的特定应用程序用例的一般问题，以获得量身定制的信息和建议。

# 创建、编辑和删除应用程序
<a name="applications-create-edit-delete"></a>

**Contents**
+ [创建 应用程序](applications-create.md)
+ [导入应用程序](applications-import.md)
  + [App Studio 提供的可导入应用程序](applications-import.md#app-catalog)
+ [复制应用程序](applications-duplicate.md)
+ [编辑或构建应用程序](applications-edit.md)
+ [编辑之前发布的应用程序版本](applications-edit-previously-published-version.md)
+ [重命名应用程序](applications-rename.md)
+ [删除 应用程序](applications-delete.md)

# 创建 应用程序
<a name="applications-create"></a>

按照以下步骤在 App Studio 中创建应用程序。

**创建应用程序**

1. 在导航窗格中，在 “**构建**” 部分中选择 “**我的应用程序**”，以导航到您的应用程序列表。

1. 选择 **\$1 创建应用程序**。

1. 在**创建应用程序**对话框中，为您的应用程序命名，然后选择以下应用程序创建方法之一：
   + **使用 AI 生成应用程序**：选择此选项可使用自然语言描述您的应用程序，然后让 AI 为您生成应用程序及其资源。
   + **从头开始**：选择此选项可从空应用程序开始构建。

1. 选择**下一步**。

1. 如果您选择了 “**使用 AI 生成应用程序**”：

   1. 在 “**连接到现有数据**” 对话框中，通过选择提供 App Studio 数据源访问权限的**连接器**，将任何现有数据源添加到您的应用程序，然后选择**表**，然后选择**下一步**。在此处添加数据源有助于 AI 为您生成经过优化的应用程序。您可以跳过此步骤，稍后通过选择 “**跳过**” 来添加数据源。

   1. 短暂延迟（几分钟）后，您将被带到**使用 AI 生成您的应用程序**页面，您可以在其中描述要创建的应用程序。

   1. 您可以开始在聊天中描述您的应用程序，也可以选择和自定义提供的示例提示。

   1. 对您的提示进行分析后，请查看应用程序要求和概述。使用聊天请求任何更改，或者选择**重新开始**，从空白的提示开始。

   1. 准备就绪后，选择 “**生成应用程序**”。

   1. 生成后，选择预览应用程序，在另一个选项卡中**预览您的应用程序**。准备好开始编辑时，可以选择 “**编辑应用程序”**。浏览应用程序的页面、自动化和数据，以熟悉它。在底部的调试面板中查看所有错误或警告。要了解如何使用 AI 生成应用程序，请参阅[教程：使用 AI 生成应用程序](getting-started-tutorial-ai.md)。有关如何在 App Studio 中进行构建的一般信息，请参阅[AWS 应用工作室的工作原理](how-it-works.md)。

1. 如果您选择了**从头开始**：

   1. 在 “**连接到现有数据**” 对话框中，通过选择提供 App Studio 数据源访问权限的**连接器**，将任何现有数据源添加到您的应用程序，然后选择**表**，然后选择**下一步**。您可以跳过此步骤，稍后通过选择 “**跳过**” 来添加数据源。

   1. 创建应用程序后，选择 “**编辑应用程序”** 以开始编辑您的应用程序。要了解如何使用空应用程序进行构建，请参阅[教程：从一个空的应用程序开始构建](getting-started-tutorial-empty.md)。有关如何在 App Studio 中进行构建的一般信息，请参阅[AWS 应用工作室的工作原理](how-it-works.md)。

# 导入应用程序
<a name="applications-import"></a>

您可以将导出的应用程序的副本导入到您的 App Studio 实例。您可以导入从其他 App Studio 实例导出的应用程序，也可以导入从 App Studio 提供的目录中导出的应用程序。从 App Studio 应用程序目录中导入应用程序可以帮助您开始使用具有类似功能的应用程序，或者通过浏览导入的应用程序来帮助您了解 App Studio 中的应用程序构建。

当您将应用程序导入实例时，将在您的实例中创建原始应用程序的副本。创建新应用程序后，您将导航到该应用程序的开发环境，您可以在其中预览该应用程序并浏览应用程序的功能。

**警告**  
导入应用程序时，您正在从应用程序中导入所有逻辑，这可能会导致意外或意外的行为。例如，可能存在破坏性查询，这些查询会从您连接到应用程序的数据库中删除数据。我们建议在将生产数据连接到应用程序之前，彻底审查应用程序及其配置，并在非生产资产上对其进行测试。

**导入应用程序**

1. 在导航窗格中，在 “**构建**” 部分中选择 “**我的应用程序**”，以导航到您的应用程序列表。

1. 选择 **\$1 创建应用程序**旁边的下拉箭头。

1. 选择 “**导入应用程序**”。

1. 在**导入应用程序**对话框的**导入代码**中，输入要导入的应用程序的导入代码。有关 App Studio 提供的可以导入的应用程序列表，包括应用程序描述和导入代码，请参阅[App Studio 提供的可导入应用程序](#app-catalog)。

1. 选择**导入**以导入应用程序，然后转到导入的应用程序的开发环境进行查看或编辑。有关在 App Studio 中构建应用程序的信息，请参阅 [AWS 应用工作室的工作原理](how-it-works.md)

## App Studio 提供的可导入应用程序
<a name="app-catalog"></a>

App Studio 提供了可以导入到您的实例中的应用程序，以帮助您了解应用程序构建。要了解 App Studio 中如何实现特定的应用程序功能，您可以预览应用程序，然后在开发环境中浏览其配置。

下表包含应用程序列表、其导入代码以及应用程序的简要描述。每个应用程序都包含一个`README`页面，其中包含有关该应用程序的信息，您可以在导入应用程序后查看这些信息。


| 应用程序名称 | 说明 | 导入代码 | 
| --- | --- | --- | 
|  **Swag 申请调查**  |  一款内部礼品申请应用程序，专为员工订购公司品牌商品而设计。员工可以选择物品并指定尺寸，然后通过简单的表格提交申请。该应用程序通过内置存储处理所有数据，无需外部连接。  |  Swag Request survey/ec4f5faf-e2f8-42ee-ab8d-6723d8ca21B2  | 
|  **冲刺跟踪**  |  一款冲刺管理应用程序，团队可以使用它来组织和跟踪软件开发工作。用户可以通过专用的冲刺、跟踪和任务视图创建冲刺、添加任务、分配工作以及监控进度。该应用程序通过内置存储处理所有数据，无需外部连接。  |  Sprint tracking/8f31e160-771f-48d7-87b0-374e285e2fbc  | 
|  **亚马逊评论情绪追踪器**  |  此应用程序是一种客户反馈分析工具，可从产品评论中生成情绪分数，以帮助企业了解客户满意度。该应用程序包括用于快速测试的示例数据生成工具，需要使用 Amazon Bedrock 连接器来获得人工智能驱动的见解，同时将所有其他数据保存在内置存储系统中。  |  亚马逊评论情绪追踪器/60f0dae4-f8e2-4c20-9583-fa456f5ebFab  | 
|  **发票和收据处理**  |  这款收据处理应用程序通过自动进行手动数据输入和简化文件审批工作流程，节省时间并减少错误。该解决方案需要亚马逊 Textract、Amazon S3 和 Amazon SES 连接器。它使用 Amazon Textract 来分析存储在 Amazon S3 中的收据并从中提取数据，然后使用 Amazon SES 处理提取的信息并将其通过电子邮件发送给审批人。  |  发票和收据处理/98bde3ae-e454-4b18-a1e6-6f23e8b2a4F1  | 
|  **检验和库存审计**  |  用于管理仓库检查和设备跟踪的应用程序。用户可以按房间位置进行 pass/fail 设备评估，监控库存水平并查看检查历史记录。该应用程序提供了一个用于跟踪设施检查和设备状态的集中系统。该应用程序通过内置存储处理所有数据，无需外部连接。  |  检验和库存审计/cf570a06-1c5e-4dd7-9ea8-5c04723d687F  | 
|  **产品采用追踪器**  |  一款用于管理产品开发的综合应用程序，可集中客户反馈、功能请求和客户会议记录。团队可以跟踪客户互动，组织需求，并生成基于人工智能的报告，用于季度路线图规划。该应用程序包括示例数据实用程序，利用亚马逊贝德罗克获取人工智能见解，利用 Amazon Aurora PostgreSQL 进行数据管理。  |  产品采用追踪器/9b3a4437-bb50-467f-ae9e-d108776b7ca1  | 
|  **快速嵌入**  |  一款演示应用程序，使用户能够在处理底层数据的同时查看分析。该应用程序包含两种在 App Studio 中嵌入 Amazon Quick 控制面板的方法：一种针对注册用户和匿名用户的基于 API 的方法（需要快速连接器），以及用于公共仪表板的 iFrame 集成。  |  Quicksight embedding/0cdc15fc-ca8b-41b7-869e-ed13c9072bc8  | 
|  **厨房水槽**  |  一款展示高级 App Studio 开发技巧和最佳实践的参考应用程序。包括状态管理、CSV 数据处理、浏览器 API 集成以及构建者可以在自己的应用程序中研究和实现的 UI 模式的工作示例。所有示例都不需要外部连接。  |  App Studio Kitchen sink/1cfe6b2f-544c-4611-b82c-80eadc76a0c8  | 

# 复制应用程序
<a name="applications-duplicate"></a>

应用程序所有者和共同所有者可以复制其应用程序，以创建应用程序的精确副本。如果您想保留当前状态以用于测试目的，或者将复制的应用程序用作创建新应用程序的入门工具，则复制应用程序会很有用。

**复制应用程序**

1. 在导航窗格的 “**构建**” 部分中，选择 “**我的应用程序**”。您将被带到一个页面，其中显示了您可以访问的应用程序列表。

1. 选择要复制的应用程序的 “**操作**” 列中的下拉列表。

1. 选择**复制**。如果**复制**（Duplicate）选项不可用，则您可能不是该应用程序的所有者或共同所有者。

1. （可选）提供重复应用程序的名称。默认名称为 *Current\$1App\$1Name COPY*。

1. 选择**复制**。

# 编辑或构建应用程序
<a name="applications-edit"></a>

使用以下步骤在 App Studio 中编辑应用程序。

**编辑（构建）应用程序**

1. 在导航窗格的 “**构建**” 部分中，选择 “**我的应用程序**”。您将被带到一个页面，其中显示了您可以访问的应用程序列表。

1. 在要编辑的应用程序的 “**操作**” 列中，选择 “**编辑”**。这将带您进入开发环境，在那里您可以使用组件、自动化和数据来配置应用程序的外观和功能。有关构建应用程序的信息，请参见[AWS App Studio 入门](getting-started.md)。

# 编辑之前发布的应用程序版本
<a name="applications-edit-previously-published-version"></a>

使用以下步骤编辑先前发布的 App Studio 应用程序版本。选择编辑先前发布的版本后，可以在开发环境中编辑该应用程序，或者将其发布到测试版然后发布到正式版。

**警告**  
在开发环境中，先前发布的版本取代了正在开发的应用程序版本。对您的应用程序所做的任何未发布更改都将丢失。

如果您不小心发布了不想要的更改或对用户造成应用程序损坏的更改，并且您想在以前的应用程序版本的基础上进一步构建或编辑，则编辑先前发布的版本非常有用。

**注意**  
如果您发现已发布的应用程序存在问题并需要立即发布以前运行的版本，或者您想在开发环境中发布先前版本但保留该应用程序的最新更新，则应改为回滚该应用程序。有关更多信息，请参阅 [回滚到之前发布的版本](application-rollback-version.md)。

**编辑之前发布的应用程序版本**

1. 如有必要，请导航到应用程序的应用程序工作室。

1. 选择 “**发布**” 按钮旁边的下拉箭头，然后选择 “**发布中心**”。

1. 选择 “**版本历史记录**” 以查看应用程序先前发布的版本列表。

1. 找到要编辑的版本，然后选择**编辑**。

1. 查看信息，然后选择 “**恢复**”。

1. 您选择编辑的版本现在是开发环境中的当前版本。您可以对其进行更改，也可以通过选择 “发布” 将其按原样**发布**到测试环境。发布到 Testing 后，如果需要，您可以再次发布到生产环境。

# 重命名应用程序
<a name="applications-rename"></a>

使用以下步骤在 App Studio 中重命名应用程序。在构建应用程序时，您可以从应用程序列表或开发环境中重命名应用程序。

**重命名应用程序**

1. 在导航窗格的 “**构建**” 部分中，选择 “**我的应用程序**”。您将被带到一个页面，其中显示了您可以访问的应用程序列表。

1. 可以在编辑时重命名此列表中的应用程序，也可以在开发环境中重命名应用程序。
   + 要从此列表中重命名：

     1. 选择要重命名的应用程序的 “**操作**” 列中的下拉列表，然后选择 “重**命名**”。

     1. 为您的应用程序指定一个新名称，然后选择 “**重命名**”。
   + 要在开发环境中重命名，请执行以下操作：

     1. 在要编辑的应用程序的 “**操作**” 列中，选择 “**编辑”**。

     1. 在开发环境中，选择应用程序名称并对其进行更新，然后按 Enter 键或离开文本字段以保存更改。

# 删除 应用程序
<a name="applications-delete"></a>

使用以下步骤在 App Studio 中删除应用程序。

**删除 应用程序**

1. 在导航窗格的 “**构建**” 部分中，选择 “**我的应用程序**”。您将被带到一个页面，其中显示了您可以访问的应用程序列表。

1. 选择要删除的应用程序的 “**操作**” 列中的下拉列表。

1. 选择**删除**。

1. 在**删除应用程序**对话框中，仔细查看有关删除应用程序的信息。如果要删除应用程序，请选择**删除**。

# 预览、发布和共享应用程序
<a name="applications-preview-publish-share"></a>

**Topics**
+ [预览应用程序](applications-preview.md)
+ [发布应用程序](applications-publish.md)
+ [共享已发布的应用程序](application-share.md)
+ [回滚到之前发布的版本](application-rollback-version.md)
+ [导出应用程序](applications-export.md)

# 预览应用程序
<a name="applications-preview"></a>

您可以在 App Studio 中预览应用程序，以了解它们在用户面前的显示效果，还可以通过使用它和在调试面板中查看日志来测试其功能。

应用程序预览环境不支持显示实时数据或使用连接器与外部资源（例如数据源）的连接。要在预览环境中测试功能，可以在自动化中使用模拟输出，在实体中使用示例数据。要使用实时数据查看应用程序，必须发布应用程序。有关更多信息，请参阅 [发布应用程序](applications-publish.md)。

预览或开发环境不会更新在其他环境中发布的应用程序。如果应用程序尚未发布，则在发布和共享应用程序之前，用户将无法访问该应用程序。如果应用程序已经发布和共享，则用户仍将访问已发布的版本，而不是预览环境中使用的版本。

**预览您的应用程序**

1. 如有必要，请导航到要预览的应用程序的应用程序工作室：

   1. 在导航窗格的 “**构建**” 部分中，选择 “**我的应用程序**”。

   1. 为应用程序选择**编辑**。

1. 选择 “**预览**” 以打开应用程序的预览环境。

1. （可选）通过选择屏幕底部附近的标题来展开调试面板。通过在 “筛选**日志” 部分选择消息类型，可以按消息类型筛选**面板。您可以通过选择 “清除**控制台” 来清除**面板的日志。

1. 在预览环境中，您可以通过浏览应用程序的页面、使用其组件并选择其按钮来启动传输数据的自动化来测试应用程序。由于预览环境不支持实时数据或与外部源的连接，因此您可以在调试面板中查看正在传输的数据的示例。

# 发布应用程序
<a name="applications-publish"></a>

创建和配置完应用程序后，下一步是将其发布以测试数据传输或与最终用户共享。要了解在 App Studio 中发布应用程序，了解可用环境非常重要。App Studio 提供了三个独立的环境，如下表所述：

1. **开发**：在哪里构建和预览应用程序。您无需发布到开发环境，因为最新版本的应用程序会自动托管在开发环境中。此环境中没有实时数据或第三方服务或资源。

1. **测试**：您可以在其中对应用程序进行全面测试。在测试环境中，您可以连接其他服务，向其发送数据，也可以从中接收数据。

1. **生产**：供最终用户使用的实时操作环境。

您的所有应用程序构建都是在**开发**环境中进行的。然后，发布到**测试环境以测试**其他服务之间的数据传输，并通过向最终用户提供访问网址来测试用户验收测试 (UAT)。之后，将您的应用程序发布到**生产**环境以进行最终测试，然后再与用户共享。有关应用程序环境的更多信息，请参阅[应用程序环境](#application-environments)。

发布应用程序时，只有在共享应用程序后才可供用户使用。这使您有机会在用户访问应用程序之前在测试和生产环境中使用和测试该应用程序。当您将之前发布和共享的应用程序发布到生产环境时，可供用户使用的版本会更新。

## 发布应用程序
<a name="application-publish-procedure"></a>

使用以下步骤将 App Studio 应用程序发布到测试或生产环境。

**将应用程序发布到测试或生产环境**

1. 在导航窗格的 “**构建**” 部分中，选择 “**我的应用程序**”。您将被带到一个页面，其中显示了您可以访问的应用程序列表。

1. 为要发布的应用程序选择 **“编辑**”。

1. 选择右上角的 “**发布**”。

1. 在 “**发布您的更新**” 对话框中：

   1. 查看有关发布应用程序的信息。

   1. （可选）在**版本描述**中，包括此版本应用程序的描述。

   1. 选中复选框以确认有关环境的信息。

   1. 选择**启动**。在实时环境中更新应用程序最多可能需要 15 分钟。

1. 有关在测试或生产环境中查看应用程序的信息，请参阅[查看已发布的应用程序](#application-viewing-published)。
**注意**  
在测试或生产环境中使用该应用程序将导致实时数据传输，例如在已通过连接器连接的数据源表中创建记录。

用户或其他构建者无法使用从未共享过的已发布应用程序。要向用户提供应用程序，必须在发布后共享该应用程序。有关更多信息，请参阅 [共享已发布的应用程序](application-share.md)。

## 查看已发布的应用程序
<a name="application-viewing-published"></a>

您可以查看发布到测试和生产环境的应用程序，以便在与最终用户或其他构建者共享应用程序之前对其进行测试。

**在测试或生产环境中查看已发布的应用程序**

1. 如有必要，请导航到要预览的应用程序的应用程序工作室：

   1. 在导航窗格的 “**构建**” 部分中，选择 “**我的应用程序**”。

   1. 为应用程序选择**编辑**。

1. 选择右上角**发布**旁边的下拉箭头，然后选择**发布中心**。

1. 在发布中心，您可以查看应用程序发布到的环境。如果您的应用程序已发布到测试或生产环境，则可以使用每个环境**的 URL** 链接查看该应用程序。
**注意**  
在测试或生产环境中使用该应用程序将导致实时数据传输，例如在已通过连接器连接的数据源表中创建记录。

## 应用程序环境
<a name="application-environments"></a>

AWS App Studio 通过三个独立的环境（开发、测试和生产）提供应用程序生命周期管理 (ALM) 功能。这可以帮助您更轻松地进行最佳实践，例如在整个应用程序生命周期中维护单独的环境、版本控制、共享和监控。

### 开发环境
<a name="applications-development-environment"></a>

**开发**环境是一个隔离的沙箱，您无需使用应用程序工作室和示例数据连接到任何实时数据源或服务即可构建应用程序。在开发环境中，您可以预览应用程序以查看和测试应用程序，而不会影响生产数据。

尽管您的应用程序无法连接到开发环境中的其他服务，但您可以在应用程序中配置不同的资源以模仿实时数据连接器和自动化。

开发环境中应用程序工作室底部有一个可折叠的调试面板，其中包含错误和警告，可帮助您在构建时检查和调试应用程序。有关应用程序故障排除和调试的更多信息，请参阅[App Studio 故障排除和](troubleshooting-and-debugging.md)。

### 测试环境
<a name="applications-testing-environment"></a>

初始应用程序开发完成后，下一步是发布到**测试**环境。在测试环境中，您的应用程序可以连接到其他服务，也可以向其他服务发送数据，也可以从中接收数据。因此，您可以使用此环境通过向最终用户提供访问网址来执行全面测试，包括用户验收测试 (UAT)。

**注意**  
首次发布到测试环境最多可能需要 15 分钟。

发布到测试环境的应用程序版本将在最终用户处于非活动状态 3 小时后移除。但是，所有版本都将保留，可以从 “**版本历史记录**” 选项卡中恢复。

测试环境的主要功能如下：
+ 与实时数据源的集成测试以及 APIs
+ 通过受控访问简化用户验收测试 (UAT)
+ 收集反馈和解决问题的环境
+ 能够使用浏览器控制台和开发者工具检查和调试客户端和服务器端活动。

有关应用程序故障排除和调试的更多信息，请参阅[App Studio 故障排除和](troubleshooting-and-debugging.md)。

### 生产环境
<a name="applications-production-environment"></a>

在测试并修复了所有问题之后，您可以将应用程序版本从测试环境升级到生产环境以供实际操作。尽管生产环境是供最终用户使用的实时操作环境，但您可以在与用户共享发布的版本之前对其进行测试。

在最终用户处于非活动状态 14 天后，您在生产环境中发布的版本将被删除。但是，所有版本都将保留，可以从 “**版本历史记录**” 选项卡中恢复。

生产环境的主要功能如下：
+ 供最终用户使用的实时操作环境
+ 基于角色的精细访问控制
+ 版本控制和回滚功能
+ 只能检查和调试客户端活动
+ 使用实时连接器、数据、自动化和 APIs

## 版本控制和发布管理
<a name="applications-versioning-release-management"></a>

App Studio 通过其发布**中心的版本控制系统提供版本控制和发布**管理功能。

关键版本控制功能：
+ 发布到测试环境会生成新的版本号（1.0、2.0、3.0...）。
+ 从测试环境升级到生产环境时，版本号不会更改。
+ 您可以从 “版本**历史记录” 中回滚到任何以前的版本**。
+ 发布到测试环境的应用程序将在处于非活动状态 3 小时后暂停。版本会保留，可以从 “**版本历史记录**” 中恢复。
+ 发布到生产环境的应用程序在处于非活动状态 14 天后将被删除。版本会保留，可以从 “**版本历史记录**” 中恢复。

这种版本控制模型允许快速迭代，同时在整个应用程序开发和测试周期中保持可追溯性、回滚功能和最佳性能。

## 维护和运营
<a name="applications-versioning-maintenance-operations"></a>

App Studio 可能需要自动重新发布您的应用程序，以完成某些维护任务、操作活动并整合新的软件库。作为构建者，您无需执行任何操作，但最终用户可能需要重新登录应用程序。在某些情况下，我们可能需要您重新发布您的应用程序，以加入我们无法自动添加的新功能和库。在重新发布之前，您需要解决所有错误并查看警告。

# 共享已发布的应用程序
<a name="application-share"></a>

当您发布尚未发布的应用程序时，只有共享该应用程序才可供用户使用。共享已发布的应用程序后，用户即可使用该应用程序，如果发布了其他版本，则无需再次共享。

**注意**  
本节介绍与最终用户或测试人员共享已发布的应用程序。有关邀请其他用户开发应用程序的信息，请参阅[构建包含多个用户的应用程序](builder-collaboration.md)。

**共享已发布的应用程序**

1. 按照以下说明从应用程序列表或应用程序的应用程序工作室访问**共享**对话框：
   + 要从应用程序列表中访问 “**共享**” 对话框，请执行以下操作：在导航窗格中，在 “**构建**” 部分中选择 “**我的应用程序**”。选择要共享的应用程序的 “**操作**” 列中的下拉列表，然后选择 “**共享**”。
   + 要从应用程序工作室访问**共享**对话框，请执行以下操作：在应用程序的应用程序工作室中，选择顶部标题中的**共享**。

1. 在 “**共享**” 对话框中，选择要共享的环境的选项卡。如果您看不到 “**测试**” 或 “**生产**” 选项卡，则您的应用程序可能无法发布到相应的环境。有关发布的更多信息，请参阅[发布应用程序](applications-publish.md)。

1. 在相应的选项卡中，从下拉菜单中选择要与其共享环境的群组。

1. （可选）为群组分配应用程序级角色以测试或配置有条件的页面可见性。有关更多信息，请参阅 [配置基于角色的页面可见性](app-level-roles.md)。

1. 选择**共享**。

1. （可选）复制链接并与用户共享。只有与之共享应用程序和环境的用户才能访问相应环境中的应用程序。

# 回滚到之前发布的版本
<a name="application-rollback-version"></a>

使用以下步骤将 App Studio 应用程序的生产环境还原到之前发布的版本。您的应用程序最终用户将受到影响，并在应用程序部署后看到其回滚版本。回滚应用程序时，它还会将组件代码回滚到上次发布时的版本，并影响整个应用程序部署堆栈（用户代码、组件配置状态）。这意味着，App Studio 对组件代码所做的任何更新（例如字段或其他配置更改）都将被回滚，以确保回滚的应用程序版本能够像最初发布时一样运行。

回滚已发布版本时，开发环境中正在进行的应用程序版本不会受到影响。

如果您发现已发布的应用程序存在问题并需要立即发布以前运行的版本，或者您想在开发环境中发布先前版本并保留该应用程序的最新更新，则回滚已发布的应用程序版本会很有帮助。

**注意**  
如果要将应用程序的开发环境恢复到之前发布的版本，则应恢复该应用程序。有关更多信息，请参阅 [编辑之前发布的应用程序版本](applications-edit-previously-published-version.md)。

**将生产环境版本回滚到之前发布的应用程序版本**

1. 如有必要，可通过编辑应用程序将其导航到其开发环境。有关更多信息，请参阅 [编辑或构建应用程序](applications-edit.md)。

1. 选择**生产**环境图块顶部的版本下拉箭头，查看可供回滚的可用版本。下拉列表包含过去 30 天内发布的版本。如果禁用此下拉列表，则可能是因为应用程序发布已在进行中，并且只能同时发布一个应用程序。

1. 选择要回滚到的版本。

1. 输入回滚的原因，然后选择**回滚**。回滚发布将开始，完成后，您的应用程序的生产环境将更新为所选版本。
**注意**  
回滚后，您也可以向前滚动到之前发布的应用程序版本。

# 导出应用程序
<a name="applications-export"></a>

您可以导出应用程序的快照，以便与其他 App Studio 实例共享。导出应用程序时，会从该应用程序的开发环境中创建快照，并生成导入代码。然后，可以使用导入代码将应用程序导入其他 App Studio 实例，在那里可以查看和构建该应用程序。

导出的应用程序可以导入到 App Studio AWS 区域 支持的任何实例中。

**导出应用程序**

1. 在导航窗格中，在 “**构建**” 部分中选择 “**我的应用程序**”，以导航到您的应用程序列表。

1. 选择要导出的应用程序的 “**操作**” 列中的下拉列表。

1. 选择**导出**。

1. 生成和共享导入代码的过程会有所不同，具体取决于是否已经为应用程序创建了导入代码。
   + 如果尚未创建导入代码：

     1. 在**应用程序导入权限**中，指定哪些实例可以导入导出的应用程序。您可以向所有实例授予导入权限，也可以通过输入其实例来添加特定的 App Studio 实例 IDs。 IDs 用逗号分隔多个实例。

        要查找您的实例 ID，请在 App Studio 控制台中选择**账户设置**，导航到您的实例的账户设置。

     1. 选择 “**生成导入代码”**。

     1. 复制并共享生成的导入代码。
   + 如果已经创建了导入代码：

     1. 要共享当前导出的应用程序，请复制并共享现有的导入代码。要使用应用程序的最新更改创建新的导出应用程序，请选择**生成新代码**。如果需要，您也可以更新导入权限。

# 页面和组件：构建应用程序的用户界面
<a name="pages-components-ux"></a>

**Topics**
+ [管理页面](pages.md)
+ [管理组件](adding-editing-deleting-components.md)
+ [配置基于角色的页面可见性](app-level-roles.md)
+ [在应用程序导航中对页面进行排序和整理](pages-order.md)
+ [使用应用程序主题更改应用程序中的颜色](app-theme.md)
+ [组件参考](components-reference.md)

# 管理页面
<a name="pages"></a>

使用以下过程在您的 AWS App Studio 应用程序中创建、编辑或删除页面。

**页面**是[组件的容器，这些组件构成](concepts.md#concepts-component) App Studio 中应用程序的用户界面。每个页面代表您的应用程序用户将与之交互的用户界面 (UI) 屏幕。页面是在应用程序工作室的 “**页面**” 选项卡中创建和编辑的。

# 创建页面
<a name="pages-create"></a>

使用以下步骤在 App Studio 的应用程序中创建页面。有关复制现有页面的信息，请参见[复制页面](pages-duplicate.md)。

**创建页面**

1. 如有必要，可通过编辑应用程序将其导航到其开发环境。

1. 导航到 “**页面**” 选项卡。

1. 在左侧的 “**页面**” 菜单中，选择 **\$1 添加**。

# 复制页面
<a name="pages-duplicate"></a>

使用以下步骤在 App Studio 的应用程序中复制页面。

**复制页面**

1. 如有必要，可通过编辑应用程序将其导航到其开发环境。

1. 导航到 “**页面**” 选项卡。

1. **在左侧的 “**页面**” 菜单中，选择要复制的页面名称旁边的省略号菜单，然后选择 “复制”。**复制的页面直接添加到原始页面之后。

# 查看和编辑页面属性
<a name="pages-edit"></a>

使用以下步骤在 App Studio 的应用程序中编辑页面。您可以编辑诸如页面名称、其参数和布局之类的属性。

**查看或编辑页面属性**

1. 如有必要，可通过编辑应用程序将其导航到其开发环境。

1. 导航到 “**页面**” 选项卡。

1. 在左侧的 “**页面**” 菜单中，选择要编辑的页面名称旁边的省略号菜单，然后选择**页面**属性。这将打开右侧的 “**属性**” 菜单。

1. 要编辑页面名称，请执行以下操作：
**注意**  
****有效的页面名称字符：**A-Z**、a **-z**、**0-9、\$1**、\$1****

   1. 选择 “**属性**” 菜单顶部附近名称旁边的铅笔图标。

   1. 输入页面的新名称，然后按 Enter。

1. 要创建、编辑或删除页面参数，请执行以下操作：

   1. 要创建页面参数，请在 “页面**参数”** 部分中选择 “**\$1 新增**”。

   1. 要编辑页面参数的 “**关键字**” 或 “**描述**” 值，请选择要更改的属性的输入字段，然后输入新值。您的更改将在您编辑时保存。

   1. 要删除页面参数，请选择要删除的页面参数的垃圾图标。

1. 要添加、编辑或移除页面的徽标或横幅，请执行以下操作：

   1. 要添加页面徽标或横幅，请启用**样式**部分中的相应选项。配置图像的来源，并可选择提供替代文本。

   1. 要编辑页面徽标或横幅，请更新 “**样式**” 部分中的字段。

   1. 要删除页面徽标或横幅，请禁用 “**样式**” 部分中的相应选项。

1. 要编辑页面的布局，请执行以下操作：

   1. 更新 “**布局**” 部分中的字段。

# 删除页面
<a name="pages-delete"></a>

使用以下步骤从 App Studio 中的应用程序中删除页面。

**删除页面**

1. 如有必要，可通过编辑应用程序将其导航到其开发环境。

1. 导航到 “**页面**” 选项卡。

1. **在左侧的 “**页面**” 菜单中，选择要删除的页面名称旁边的省略号菜单，然后选择删除。**

# 管理组件
<a name="adding-editing-deleting-components"></a>

使用以下过程在 App Studio 应用程序工作室的页面中或页面中添加、编辑和删除组件，为您的应用程序制作所需的用户界面。

# 向页面添加组件
<a name="adding-components"></a>

使用以下步骤向 App Studio 中的页面添加组件。有关复制现有组件的信息，请参见[复制组件](duplicating-components.md)。

1. 如有必要，可通过编辑应用程序将其导航到其开发环境。

1. 导航到 “**页面**” 选项卡。

1. 组件面板位于右侧菜单中，其中包含可用组件。

1. 将所需的组件从面板拖放到画布上。或者，您可以双击面板中的组件，将其自动添加到当前页面的中心。

1. 现在，您已经添加了一个组件，请使用右侧的 “**属性**” 面板来调整其设置，例如数据源、布局和行为。有关配置每种组件类型的详细信息，请参见[组件参考](components-reference.md)。

# 复制组件
<a name="duplicating-components"></a>

使用以下步骤在 App Studio 应用程序中复制组件。复制的组件包含任何链接的自动化或原始组件中的实体。

1. 如有必要，可通过编辑应用程序将其导航到其开发环境。

1. 导航到 “**页面**” 选项卡。

1. 有两种方法可以复制组件：
   + 在左侧的 “**页面**” 菜单中，展开包含要复制的组件的页面。**选择要复制的组件名称旁边的省略号菜单，然后选择 “复制”。**
   + 选择要复制的组件，然后选择复制图标。

   复制的组件直接添加到原始组件之后。
**提示**  
您可以使用 CTRL\$1Z 或 CMD\$1Z 键盘快捷键撤消组件复制以及开发环境中的许多其他操作。

# 查看和编辑组件属性
<a name="editing-component-properties"></a>

1. 如有必要，可通过编辑应用程序将其导航到其开发环境。

1. 导航到 “**页面**” 选项卡。

1. 在左侧的 “**页面**” 菜单中，展开包含该组件的页面，然后选择要查看或编辑的组件。或者，您可以选择页面，然后从画布中选择组件。

1. 右侧的 “**属性**” 面板显示选定组件的可配置设置。

1. 浏览各种可用的属性和选项，并根据需要对其进行更新以配置组件的外观和行为。例如，您可能想要更改数据源、配置布局或启用其他功能。

   有关配置每种组件类型的详细信息，请参见[组件参考](components-reference.md)。

# 删除组件
<a name="deleting-components"></a>

1. 如有必要，可通过编辑应用程序将其导航到其开发环境。

1. 导航到 “**页面**” 选项卡。

1. 在左侧的 “**页面**” 菜单中，选择要删除的组件以将其选中。

1. 在右侧的 “**属性**” 菜单中，选择垃圾桶图标。

1. 在确认对话框中，选择**删除**。

# 配置基于角色的页面可见性
<a name="app-level-roles"></a>

您可以在 App Studio 应用程序中创建角色，并根据这些角色配置页面的可见性。例如，您可以根据用户需求或访问权限级别为提供项目批准或索赔处理等功能的应用程序创建角色，例如管理员、经理或用户，并使某些页面对特定角色可见。在此示例中，管理员可能拥有完全访问权限，经理可能有权查看报告仪表板，而用户可以访问带有输入表单的任务页面。

使用以下步骤在 App Studio 应用程序中配置基于角色的页面可见性。

1. 如有必要，请导航到应用程序的应用程序工作室。从左侧导航菜单中，选择**我的应用程序**，找到您的应用程序，然后选择**编辑**。

1. 在应用程序工作室中创建应用程序级角色。

   1. 选择**应用程序工作室顶部的应用程序设置**选项卡。

   1. 选择 **\$1 添加角色**

   1. 在**角色名称**中，提供一个名称来标识您的角色。我们建议使用能够描述群组访问级别或职责的名称，因为您将使用该名称来设置页面可见性。

   1. 或者，在**描述**中，添加角色的描述。

   1. 重复这些步骤，根据需要创建任意数量的角色。

1. 配置页面的可见性

   1. 选择应用程序工作室顶部的 “**页面**” 选项卡。

   1. 从左侧的 “**页面**” 菜单中，选择要为其配置基于角色的可见性的页面。

   1. 在右侧菜单中，选择 “**属性**” 选项卡。

   1. 在 “**可见性**” 中，禁用 **“向所有最终用户开放**”。

   1. 选择 “**角色**” 以从您在上一步中创建的角色列表中进行选择。选择 “**自定义**”，为更复杂的可见性配置编写 JavaScript 表达式。

      1. 选择 “**角色**” 后，选中要显示页面的应用程序角色的复选框。

      1. 选择 “**自定义**” 后，输入解析为 “真” 或 “假” 的 JavaScript 表达式。使用以下示例来检查当前用户是否具有*管理员*的角色:`{{currentUser.roles.includes('manager')}}`.

1. 现在，您的可见性已配置，您可以通过预览应用程序来测试页面的可见性。

   1. 选择 “**预览**” 以打开应用程序的预览。

   1. 在预览的右上角，选择 “**预览为**” 菜单，然后选中要测试的角色的复选框。可见的页面应反映所选的角色。

1. 现在，将群组分配给已发布应用程序的应用程序角色。必须为每个环境分别配置组和角色分配。有关应用程序环境的更多信息，请参阅[应用程序环境](applications-publish.md#application-environments)。
**注意**  
您的应用程序必须发布到测试或生产环境，才能将 App Studio 群组分配给您创建和配置的角色。如有必要，请发布您的应用程序，为角色分配群组。有关发布的更多信息，请参阅[发布应用程序](applications-publish.md)。

   1. 在应用程序工作室的右上角，选择**共享**。

   1. 选择要配置页面可见性的环境的选项卡。

   1. 选择**搜索群组**输入框，然后选择要与之共享应用程序版本的群组。您可以输入文本来搜索群组。

   1. 在下拉菜单中，选择要分配给群组的角色。您可以选择 “**无角色**” 来共享应用程序版本，也可以不为群组分配角色。只有所有用户都可见的页面才会对没有角色的群组可见。

   1. 选择**共享**。重复这些步骤，根据需要添加任意数量的群组。

# 在应用程序导航中对页面进行排序和整理
<a name="pages-order"></a>

本主题包括有关在 App Studio 应用程序中重新排序和组织页面的信息。在产品的两个区域可以看到应用程序页面：在应用程序工作室编辑应用程序时在左侧的 “**页面**” 菜单中，以及在已发布应用程序预览的左侧导航栏中。

## 编辑应用程序时在左侧的 “**页面**” 菜单中对页面进行排序
<a name="pages-order-editing-app"></a>

在应用程序工作室编辑应用程序时，页面在左侧的 “**页面**” 菜单中按创建时间排序。您无法重新排序此菜单中的页面。

## 在预览或已发布的应用程序的导航中排序、显示或隐藏页面
<a name="pages-order-editing-app"></a>

您可以编辑预览或已发布应用程序左侧导航的以下设置：
+ 整个导航的可见性
+ 特定页面在导航中的可见性
+ 导航中页面的顺序

**编辑预览或已发布应用程序的左侧导航**

1. 如有必要，请导航到应用程序的应用程序工作室进行编辑。

1. 在左侧的 “**页面**” 菜单中，选择 “**标题和导航**”。

1. 在右侧的**标题和导航**菜单中，查看或编辑以下内容：

   1. 要隐藏或显示应用程序中的导航，请使用**应用程序导航**开关。

   1. 要在应用程序导航中隐藏页面，请将页面拖到 “**未链接页面**” 部分。 ****

   1. 要对应用程序导航中的页面进行重新排序，请在 “**链接页面**” 部分中将它们拖到所需的顺序。

# 使用应用程序主题更改应用程序中的颜色
<a name="app-theme"></a>

使用以下步骤通过配置应用程序主题来更新应用程序中的颜色。

1. 如有必要，请导航到应用程序的应用程序工作室进行编辑。

1. 在应用程序工作室中，导航到**页面**选项卡。

1. 在左侧导航栏中，选择**应用程序主题**以打开右侧的应用程序主题设置。

1. 在**基础主题**中，选择**浅色模式**或**深色模式**。

1. 要向应用程序添加自定义颜色，请启用 “**自定义**” 开关并更新以下设置：

   1. 在 **Prim** ary color 中，选择应用于某些组件和应用程序导航的颜色。您可以使用颜色选择器、RGB、HSL 或 HEX 代码选择颜色。
**注意**  
App Studio 将自动确保你的颜色易于访问。例如，如果您在灯光模式下选择浅色，则会对其进行更新以使其更易于访问。

   1. 在**标题颜色**中，选择应用于应用程序标题的颜色。您可以使用颜色选择器、RGB、HSL 或 HEX 代码选择颜色。

   1. 选择 “**默认主题**” 以查看预定义主题并从中进行选择，或者选择 “**随机化**” 以生成随机主色和标题颜色。

1. 选择 “**保存更改**” 以更新您的应用程序主题。

# 组件参考
<a name="components-reference"></a>

本主题详细介绍了 App Studio 的每个组件及其属性，并包括配置示例。

## 常用组件属性
<a name="common-properties"></a>

本节概述了应用程序工作室中多个组件共享的一般属性和功能。每种属性类型的具体实现细节和用例可能因组件而异，但这些属性的总体概念在 App Studio 中保持一致。

### Name
<a name="common-properties-component-name"></a>

将为每个组件生成一个默认名称；但是，您可以进行编辑以更改为每个组件的唯一名称。您将使用此名称从同一页面中的其他组件或表达式中引用该组件及其数据。限制：不要在组件名称中包含空格；它只能包含字母、数字、下划线和美元符号。示例：`userNameInput`、`ordersTable`、`metricCard1`。

### 主要值、次要值和值
<a name="common-properties-component-values"></a>

Application Studio 中的许多组件都提供了用于指定值或表达式的字段，这些值或表达式决定了组件中显示的内容或数据。根据组件类型和用途 `Primary value``Secondary value`，这些字段通常被标记为`Value`、或简单标记。

该`Primary value`字段通常用于定义应在组件中突出显示的主值、数据点或内容。

该`Secondary value`字段（如果可用）用于在主要值旁边显示附加值或支持值或信息。

该`Value`字段允许您指定应在组件中显示的值或表达式。

这些字段支持静态文本输入和动态表达式。通过使用表达式，您可以引用应用程序中其他组件、数据源或变量的数据，从而实现动态和数据驱动的内容显示。

#### 表达式的语法
<a name="common-properties-component-values-expression-syntax"></a>

在这些字段中输入表达式的语法遵循一致的模式：

```
{{expression}}
```

其中，*expression*是计算结果为所需值或要显示的数据的有效表达式。

##### 示例：静态文本
<a name="common-properties-component-values-static-text-examples"></a>
+ 主要值：您可以直接输入静态数字或值，例如`"123"`或`"$1,999.99"`。
+ 次要值：您可以输入静态文本标签，例如`"Goal"`或`"Projected Revenue"`。
+ 值：您可以输入静态字符串，例如`"since last month"`或`"Total Quantity"`。

##### 示例：表达式
<a name="common-properties-component-values-expression-examples"></a>
+ `Hello, {{currentUser.firstName}}`：显示带有当前登录用户的名字的问候语。
+ `{{currentUser.role === 'Admin' ? 'Admin Dashboard' : 'User Dashboard'}}`：根据用户的角色有条件地显示不同的仪表板标题。
+ `{{ui.componentName.data?.[0]?.fieldName}}`：从 ID 为 ID `componentName` 的组件数据中的第一项中检索该`fieldName`字段的值。
+ `{{ui.componentName.value * 100}}`：对带有 ID 的组件的值进行计算`componentName`。
+ `{{ui.componentName.value + ' items'}}`：将组件的值与 ID `componentName` 和字符串连接起来。`' items'`
+ `{{ui.ordersTable.data?.[0]?.orderNumber}}`：从`ordersTable`组件的第一行数据中检索订单号。
+ `{{ui.salesMetrics.data?.[0]?.totalRevenue * 1.15}}`：通过将`salesMetrics`组件中第一行数据的总收入增加 15% 来计算预计收入。
+ `{{ui.customerProfile.data?.[0]?.firstName + ' ' + ui.customerProfile.data?.lastName}}`：连接组件中数据的名字和姓氏。`customerProfile`
+ `{{new Date(ui.orderDetails.data?.orderDate).toLocaleDateString()}}`：将`orderDetails`组件中的订单日期格式化为更具可读性的日期字符串。
+ `{{ui.productList.data?.length}}`：显示连接到`productList`组件的数据中的产品总数。
+ `{{ui.discountPercentage.value * ui.orderTotal.value}}`：根据折扣百分比和订单总额计算折扣金额。
+ `{{ui.cartItemCount.value + ' items in cart'}}`：显示购物车中的商品数量以及标签`items in cart`。

通过使用这些表达式字段，可以在应用程序中创建动态和数据驱动的内容，从而显示根据用户上下文或应用程序状态量身定制的信息。这可以实现更加个性化和交互性的用户体验。

### 标签
<a name="common-properties-label"></a>

L **abel** 属性允许您为组件指定标题或标题。此标签通常显示在组件旁边或上方，以帮助用户了解其用途。

您可以使用静态文本和表达式来定义标签。

#### 示例：静态文本
<a name="label-static-example"></a>

如果您在 “标签” 字段中输入文本 “名字”，则组件的标签将显示 “名字”。

#### 示例：表达式
<a name="label-expression-examples"></a>

##### 示例：零售店
<a name="label-expression-examples-retail-store-label"></a>

以下示例为每位用户个性化标签，使界面更适合个人：

```
{{currentUser.firstName}} {{currentUser.lastName}}'s Account
```

##### 示例：SaaS 项目管理
<a name="label-expression-examples-project-management-label"></a>

以下示例从选定项目中提取数据以提供特定于上下文的标签，从而帮助用户在应用程序中保持定向：

```
Project {{ui.projectsTable.selectedRow.id}} - {{ui.projectsTable.selectedRow.name}}
```

##### 示例：医疗诊所
<a name="label-expression-examples-healthcare-clinic-label"></a>

以下示例引用了当前用户的个人资料和医生的信息，为患者提供了更加个性化的体验。

```
Dr. {{ui.doctorProfileTable.data.firstName}}
       {{ui.doctorProfileTable.data.lastName}}
```

### Placeholder
<a name="common-properties-placeholder"></a>

Placeholder 属性允许您指定当组件为空时显示的提示或指导文本。这可以帮助用户理解预期的输入格式或提供其他上下文。

您可以使用静态文本和表达式来定义占位符。

#### 示例：静态文本
<a name="placeholder-static-example"></a>

如果在 “**占位符**” 字段`Enter your name`中输入文本，则该组件将显示`Enter your name`为占位符文本。

#### 示例：表达式
<a name="placeholder-expression-examples"></a>

##### 示例：金融服务
<a name="placeholder-expression-examples-financial-services-placeholder"></a>

 `Enter the amount you'd like to deposit into your {{ui.accountsTable.selectedRow.balance}} account`这些示例从所选账户中提取数据以显示相关提示，从而使银行客户的界面变得直观。

##### 示例：电子商务
<a name="placeholder-expression-examples-ecommerce-placeholder"></a>

 `Enter the coupon code for {{ui.cartTable.data.currency}} total`此处的占位符会根据用户的购物车内容动态更新，从而提供无缝的结账体验。

##### 示例：医疗诊所
<a name="placeholder-expression-examples-healthcare-clinic-placeholder"></a>

 `Enter your {{ui.patientProfile.data.age}}-year-old patient's symptoms`通过使用引用患者年龄的表达式，应用程序可以创建更加个性化和有用的占位符。

### 来源
<a name="common-properties-source"></a>

S **ourc** e 属性允许您为组件选择数据源。选择后，您可以从以下数据源类型中进行选择：`entity``expression`、或`automation`。

#### 实体
<a name="common-properties-source-entity"></a>

选择 “**实体**” 作为数据源可以将组件连接到应用程序中的现有数据实体或模型。如果您想在整个应用程序中使用定义明确的数据结构或架构，则此功能非常有用。

何时使用实体数据源：
+ 当您的数据模型或实体包含要在组件中显示的信息时（例如，带有 “名称”、“描述”、“价格” 等字段的 “产品” 实体）。
+ 当您需要从数据库、API 或其他外部数据源动态获取数据并将其呈现在组件中时。
+ 当您想利用应用程序的数据模型中定义的关系和关联时。

##### 选择对实体的查询
<a name="common-properties-source-selecting-entity-query"></a>

有时，您可能希望将组件连接到从实体而不是整个实体检索数据的特定查询。在实体数据源中，您可以选择从现有查询中进行选择或创建新查询。

通过选择查询，您可以：
+ 根据特定条件筛选组件中显示的数据。
+ 向查询传递参数以动态筛选或排序数据。
+ 利用查询中定义的复杂联接、聚合或其他数据操作技术。

例如，如果您的应用程序中有一个`Customers`实体，其中包含诸如`Name``Email`、和之类的字段`PhoneNumber`。您可以将表格组件连接到该实体，然后选择一个预定义`ActiveCustomers`的数据操作，根据客户的状态筛选客户。这允许您仅显示表格中的活跃客户，而不是整个客户数据库。

##### 向实体数据源添加参数
<a name="common-properties-source-adding-entity-parameters"></a>

使用实体作为数据源时，也可以向组件添加参数。这些参数可用于筛选、排序或转换组件中显示的数据。

例如，如果您的`Products`实体包含诸如`Name`、`Description``Price`、和之类的字段`Category`。您可以将名为`category`的参数添加到显示产品列表的表格组件。当用户从下拉列表中选择类别时，表格将自动更新为仅显示属于所选类别的产品，使用数据操作中的`{{params.category}}`表达式。

#### Expression
<a name="common-properties-source-expression"></a>

选择 E **x** pression 作为数据源，输入自定义表达式或计算，为组件动态生成数据。当您需要执行转换、合并来自多个源的数据或根据特定的业务逻辑生成数据时，这非常有用。

何时使用**表达式**数据源：
+ 当您需要计算或导出数据模型中无法直接提供的数据时（例如，根据数量和价格计算订单总价值）。
+ 当您想要合并来自多个实体或数据源的数据以创建复合视图时（例如，显示客户的订单历史记录及其联系信息）。
+ 当您需要根据特定规则或条件生成数据时（例如，根据用户的浏览历史显示 “推荐产品” 列表）。

例如，如果您有一个*Metrics*组件需要显示当月的总收入，则可以使用类似以下的表达式来计算和显示每月收入：

```
{{ui.table1.orders.concat(ui.table1.orderDetails).filter(o => o.orderDate.getMonth() === new Date().getMonth()).reduce((a, b) => a + (b.quantity * b.unitPrice), 0)}}
```

##### 自动化
<a name="common-properties-source-automation"></a>

选择 **Automation** 作为数据源，将组件连接到应用程序中的现有自动化或工作流程。当组件的数据或功能是作为特定流程或工作流的一部分生成或更新时，这很有用。

何时使用**自动化**数据源：
+ 当组件中显示的数据是特定自动化或工作流程的结果时（例如，作为批准流程一部分更新的 “待批准” 表）。
+ 当您想根据自动化中的事件或条件触发组件的操作或更新时（例如，使用某个 SKU 的最新销售数据更新指标）。
+ 当您需要通过自动化将组件与应用程序中的其他服务或系统集成时（例如，从第三方 API 获取数据并将其显示在表格中）。

例如，如果您有一个用于指导用户完成求职流程的 stepflow 组件。stepflow 组件可以连接到处理求职申请提交、背景调查和录用生成自动化。随着这些步骤的自动化，stepflow 组件可以动态更新以反映应用程序的当前状态。

通过为每个组件仔细选择适当的数据源，您可以确保应用程序的用户界面由正确的数据和逻辑提供支持，从而为用户提供无缝且引人入胜的体验。

### 在以下情况下可见
<a name="visible-if"></a>

使用 V **isible if** 属性根据特定条件或数据值显示或隐藏组件或元素。当您想要动态控制应用程序用户界面某些部分的可见性时，这很有用。

Visi **ble if** 属性使用以下语法：

```
{{expression ? true : false}}
```

或者

```
{{expression}}
```

其中*expression*，是计算结果为`true`或`false`的布尔表达式。

如果表达式的计算结果为`true`，则该组件将可见。如果表达式的计算结果为`false`，则该组件将被隐藏。该表达式可以引用应用程序中其他组件、数据源或变量的值。

#### if 表达式示例可见
<a name="visible-if-examples"></a>

##### 示例：根据电子邮件输入显示或隐藏密码输入字段
<a name="visible-if-example-password-email"></a>

想象一下，你有一个带有电子邮件输入字段和密码输入字段的登录表单。只有当用户输入了电子邮件地址时，才需要显示密码输入字段。你可以使用以下 Visible if 表达式：

```
{{ui.emailInput.value !== ""}}
```

此表达式检查`emailInput`组件的值是否不是空字符串。如果用户输入了电子邮件地址，则表达式的计算结果为`true`，密码输入字段将可见。如果电子邮件字段为空，则表达式的计算结果为`false`，密码输入字段将被隐藏。

##### 示例：根据下拉列表选择显示其他表单域
<a name="visible-if-example-form-fields-dropdown"></a>

假设你有一个表单，用户可以在其中从下拉列表中选择一个类别。根据所选类别，您想要显示或隐藏其他表单域以收集更具体的信息。

例如，如果用户选择*Products*类别，则可以使用以下表达式来显示其他*Product Details*字段：

```
{{ui.categoryDropdown.value === "Products"}}
```

如果用户选择*Services*或*Consulting*类别，则可以使用此表达式来显示一组不同的附加字段：

```
{{ui.categoryDropdown.value === "Services" || ui.categoryDropdown.value === "Consulting"}}
```

##### 示例：其他
<a name="visible-if-example-other"></a>

要使组件在`textInput1`组件的值不是空字符串时可见，请执行以下操作：

```
{{ui.textInput1.value === "" ? false : true}}
```

要使组件始终可见，请执行以下操作：

```
{{true}}
```

要使组件在`emailInput`组件的值不是空字符串时可见，请执行以下操作：

```
{{ui.emailInput.value !== ""}}
```

### 在以下情况下禁用
<a name="disabled-if"></a>

“**如果** Disabled if” 功能允许您根据特定条件或数据值有条件地启用或禁用组件。这是通过使用 Disabled i **f** 属性来实现的，该属性接受一个布尔表达式，用于确定应启用还是禁用组件。

**如果 Disab** led if 属性使用以下语法：

```
{{expression ? true : false}}
```

或者

```
{{expression}}
```

#### 如果表达式示例，则禁用
<a name="disabled-if-examples"></a>

##### 示例：根据表单验证禁用提交按钮
<a name="disabled-if-example-disable-submit-button"></a>

如果您的表单包含多个输入字段，并且想要在正确填写所有必填字段之前禁用提交按钮，则可以使用以下 Disabled I **f** 表达式：

```
{{ui.nameInput.value === "" || ui.emailInput.value === "" || ui.passwordInput.value === ""}}
```

此表达式检查必填的输入字段（`nameInput`、`emailInput`、`passwordInput`）是否为空。如果任何字段为空，则表达式的计算结果为`true`，提交按钮将被禁用。填写完所有必填字段后，表达式的计算结果为`false`，提交按钮将启用。

通过在 Visib **le** if 和 Dis **abled ff** 属性中使用这些类型的条件表达式，您可以创建适应用户输入的动态响应式用户界面，从而为应用程序的用户提供更加精简和相关的体验。

其中*expression*，是计算结果为真或假的布尔表达式。

示例：

```
{{ui.textInput1.value === "" ? true : false}}: The component will be Disabled if the textInput1 component's value is an empty string.
{{!ui.nameInput.isValid || !ui.emailInput.isValid || !ui.passwordInput.isValid}}: The component will be Disabled if any of the named input fields are invalid.
```

#### 容器布局
<a name="container-layouts"></a>

布局属性决定了组件中一个或多个内容的排列和定位方式。有几个布局选项可供选择，每个选项都由一个图标表示：
+ **列布局**：此布局将内容或元素垂直排列在一列中。
+ **双列布局**：此布局将组件分成两个等宽的列，允许您并排放置内容或元素。
+ **行布局**：此布局将内容或元素水平排列在一行中。

##### 方向
<a name="container-layouts-orientation"></a>
+ **横向**：此布局将内容或元素水平排列成一行。
+ **垂直**：此布局将内容或元素垂直排列在一列中。
+ **内联换**行：此布局将内容或元素水平排列，但如果元素超过可用宽度，则换行到下一行。

##### 一致性
<a name="container-layouts-alignment"></a>
+ **左**：将一个或多个内容与组件的左侧对齐。
+ **居**中：将内容或元素在组件内水平居中。
+ **右**：将一个或多个内容与组件的右侧对齐。

##### 宽度
<a name="container-layouts-width"></a>

**宽**度属性指定组件的水平大小。您可以输入介于 0% 和 100% 之间的百分比值，表示组件相对于其父容器或可用空间的宽度。

##### 高度
<a name="container-layouts-height"></a>

He **ig** ht 属性指定组件的垂直大小。“auto” 值会根据组件的内容或可用空间自动调整组件的高度。

##### 两者之间的间隔
<a name="container-layouts-space-between"></a>

**“间距” 属性决定组件内内容或元素之间的间距或间距。**你可以选择一个从 0px（无间距）到 64px 的值，增量为 4px（例如，4px、8px、12px 等）。

##### Padding
<a name="container-layouts-padding"></a>

**Paddin** g 属性控制一个或多个内容与组件边缘之间的空间。你可以选择一个从 0px（无填充）到 64px 的值，增量为 4px（例如 4px、8px、12px 等）。

##### 背景
<a name="container-layouts-background"></a>

**背景**启用或禁用组件的背景颜色或样式。

这些布局属性可以灵活地排列和定位组件内的内容，以及控制组件本身的大小、间距和视觉外观。

## 数据组件
<a name="data-components"></a>

本节介绍应用程序工作室中可用的各种数据组件，包括**表**、**详细信息**、**指标**、**表单**和**中继器**组件。这些组件用于在应用程序中显示、收集和操作数据。

### 表
<a name="table-component"></a>

**表格**组件以表格格式显示数据，包括行和列。它用于以有条理 easy-to-read的方式呈现结构化数据，例如数据库中的项目列表或记录。

#### 表属性
<a name="table-component-properties"></a>

**表**组件与其他组件共享多个共同属性，例如`Name``Source`、和`Actions`。有关这些属性的更多信息，请参阅[常用组件属性](#common-properties)。

除了常用属性外，**表**组件还具有特定的属性和配置选项，包括`Columns``Search and export`、和`Expressions`。

##### 列
<a name="table-component-properties-columns"></a>

在本节中，您可以定义要在表格中显示的列。可以为每列配置以下属性：
+ **格式**：字段的数据类型，例如：文本、数字、日期。
+ **列标签**：列的标题文本。
+ **值**：应在此列中显示的数据源字段。

  此字段允许您指定应在列单元格中显示的值或表达式。您可以使用表达式来引用来自连接源或其他组件的数据。

  示例：`{{currentRow.title}}`-此表达式将在列单元格中显示当前行的*title*字段值。
+ **启用排序**：此开关允许您启用或禁用特定列的排序功能。启用后，用户可以根据此列中的值对表格数据进行排序。

##### 搜索和导出
<a name="table-component-properties-search-and-export"></a>

**表格**组件提供以下开关，用于启用或禁用搜索和导出功能：
+ **显示搜索**启用后，此开关会向表格中添加搜索输入字段，允许用户搜索和筛选显示的数据。
+ **显示导出**启用后，此开关会向表格添加导出选项，允许用户下载各种格式的表格数据，例如：CSV。

**注意**  
默认情况下，搜索功能仅限于已加载到表中的数据。要全面使用搜索，您需要加载所有页面的数据。

##### 每页行数
<a name="table-component-properties-rows-per-page"></a>

您可以指定表格中每页要显示的行数。然后，用户可以在页面之间导航以查看完整的数据集。

##### 预取限制
<a name="table-component-properties-pre-fetch-limit"></a>

指定每个查询请求中要预取的最大记录数。最大值为 3000。

##### 操作
<a name="table-component-properties-actions"></a>

在 “**操作**” 部分中，配置以下属性：
+ **操作位置**：启用 “**固定到右侧**” 后，无论用户如何滚动，任何添加的操作都将始终显示在表格的右侧。
+ **操作**：向表格中添加操作按钮。您可以将这些按钮配置为在用户单击时执行指定的操作，例如：
  + 运行组件操作
  + 导航到其他页面
  + 调用数据操作
  + 运行自定义 JavaScript
  + 调用自动化

##### Expressions
<a name="table-component-properties-expressions"></a>

**表格**组件提供了多个使用表达式和行级操作功能的区域，允许您自定义和增强表格的功能和交互性。它们允许您在表格中动态引用和显示数据。通过利用这些表达式字段，您可以创建动态列，将数据传递给行级操作，以及引用应用程序中其他组件或表达式中的表数据。

##### 示例：引用行值
<a name="table-component-properties-examples-referencing-row-values"></a>

`{{currentRow.columnName}}`或者`{{currentRow["Column Name"]}}`这些表达式允许您为正在呈现的当前行引用特定列的值。*Column Name*用要引用的列的实际名称替换*columnName*或。

示例：
+ `{{currentRow.productName}}`显示当前行的产品名称。
+ `{{currentRow["Supplier Name"]}}`显示当前行（列标题所在行）的供应商名称*Supplier Name*。
+ `{{currentRow.orderDate}}`显示当前行的订购日期。

##### 示例：引用所选行
<a name="table-component-properties-examples-referencing-selected-row"></a>

`{{ui.table1.selectedRow["columnName"]}}`此表达式允许您使用 ID 引用表中当前选定行的特定列的值*table1*。*table1*替换为表组件的实际 ID *columnName* 以及要引用的列的名称。

示例：
+ `{{ui.ordersTable.selectedRow["totalAmount"]}}`显示带有 ID 的表中当前选定行的总金额*ordersTable*。
+ `{{ui.customersTable.selectedRow["email"]}}`显示表格中当前选定行的电子邮件地址和 ID *customersTable*。
+ `{{ui.employeesTable.selectedRow["department"]}}`显示表格中当前选定行的部门，标识为 ID *employeesTable*。

##### 示例：创建自定义列
<a name="table-component-properties-examples-creating-custom-columns"></a>

您可以根据从基础数据操作、自动化或表达式返回的数据向表中添加自定义列。您可以使用现有的列值和 JavaScript 表达式来创建新列。

示例：
+ `{{currentRow.quantity * currentRow.unitPrice}}`通过将数量和单价列相乘来创建显示总价的新列。
+ `{{new Date(currentRow.orderDate).toLocaleDateString()}}`创建新列，以更易读的格式显示订单日期。
+ `{{currentRow.firstName + ' ' + currentRow.lastName + ' (' + currentRow.email + ')' }}`创建新列，显示每行的全名和电子邮件地址。

##### 示例：自定义列显示值：
<a name="table-component-properties-examples-customizing-column-display-values"></a>

您可以通过设置列映射的字段来自定义表列中`Value`字段的显示值。这允许您对显示的数据应用自定义格式或转换。

示例：
+ `{{ currentRow.rating >= 4 ? '⭐️'.repeat(currentRow.rating) : currentRow.rating }}`根据每行的评分值显示星形表情符号。
+ `{{ currentRow.category.toLowerCase().replace(/\b\w/g, c => c.toUpperCase()) }}`显示类别值，每行的每个单词都大写。
+ `{{ currentRow.status === 'Active' ? '🟢 Active' : '🔴 Inactive' }}`：根据每行的状态值显示彩色圆圈表情符号和文本。

##### 行级按钮操作
<a name="table-component-properties-examples-row-level-button-actions"></a>

`{{currentRow.columnName}}`或者，`{{currentRow["Column Name"]}}`您可以使用这些表达式在行级操作中传递被引用的行的上下文，例如使用选定行的数据导航到另一页或触发行数据的自动化。

示例：
+ 如果您在行操作列中有一个编辑按钮，则可以`{{currentRow.orderId}}`作为参数传递，以导航到带有所选订单编号的订单编辑页面。
+ 如果您在行操作列中有一个删除按钮，则可以转`{{currentRow.customerName}}`到自动化，该自动化会在删除订单之前向客户发送确认电子邮件。
+ 如果您在行操作列中有 “查看详情” 按钮，则可以转`{{currentRow.employeeId}}`到记录查看订单详细信息的员工的自动化。

通过利用这些表达式字段和行级操作功能，您可以创建高度自定义的交互式表格，根据您的特定要求显示和操作数据。此外，您可以将行级操作与应用程序中的其他组件或自动化连接起来，从而实现无缝的数据流和功能。

### Detail
<a name="detail-component"></a>

**详细**信息组件旨在显示有关特定记录或项目的详细信息。它提供了一个专门的空间，用于展示与单个实体或行相关的全面数据，非常适合展示深入的细节或简化数据输入和编辑任务。

#### 细节属性
<a name="detail-component-properties"></a>

D **et** ail 组件与其他组件共享多个共同属性`Name`，例如`Source`、和`Actions`。有关这些属性的更多信息，请参阅[常用组件属性](#common-properties)。

**细节**组件还具有特定的属性和配置选项，包括`Fields``Layout`、和`Expressions`。

#### 布局
<a name="detail-component-properties-layout"></a>

**布**局部分允许您自定义**详细信息**组件中字段的排列和显示方式。您可以配置选项，例如：
+ **列数**：指定要在其中显示字段的列数。
+ **字段排序**：拖放字段以对其外观进行重新排序。
+ **间距和对齐方式**：调整组件内字段的间距和对齐方式。

#### 表达式和示例
<a name="detail-component-properties-expressions"></a>

D **et** ail 组件提供了各种表达式字段，允许您动态引用和显示组件内的数据。这些表达式使您能够创建与应用程序的数据和逻辑无缝连接的自定义交互式**细节**组件。

##### 示例：引用数据
<a name="detail-component-properties-examples-referencing-data"></a>

`{{ui.details.data[0]?.["colName"]}}`**：此表达式允许您为连接到 Detail 组件的数据数组中的第一项（索引 0）引用名为 “colName” 的列的值，ID 为 “details”。**将 “colName” 替换为要引用的列的实际名称。例如，以下表达式将显示连接到 “详情” 组件的数据数组中第一项的 “CustomerName” 列的值：

```
{{ui.details.data[0]?.["customerName"]}}
```

**注意**  
当**详细信息**组件与被引用的表位于同一页上，并且您想在**详细信息**组件中显示表格第一行的数据时，此表达式很有用。

##### 示例：条件渲染
<a name="detail-component-properties-examples-conditional-rendering"></a>

`{{ui.table1.selectedRow["colName"]}}`：如果表中选定的 ID *table1* 行包含名为的列的数据，则此表达式返回 true *colName*。**它可用于根据表格的选定行是否为空有条件地显示或隐藏 Detail 组件。**

示例：

**您可以在 Detail 组件的`Visible if`属性中使用此表达式，根据表格中的选定行有条件地显示或隐藏该表达式。**

```
{{ui.table1.selectedRow["customerName"]}}
```

如果此表达式的计算结果为 true（*table1*组件中的选定行具有该*customerName*列的值），则**详细信息**组件将可见。**如果表达式的计算结果为 false（即所选行为空或没有 “CustomerName” 的值），则详细信息组件将被隐藏。**

##### 示例：条件显示
<a name="detail-component-properties-examples-conditional-display"></a>

`{{(ui.Component.value === "green" ? "🟢" : ui.Component.value === "yellow" ? "🟡" : ui.detail1.data?.[0]?.CustomerStatus)}}`：此表达式根据组件或数据字段的值有条件地显示表情符号。

细分：
+ `ui.Component.value`：引用带有 ID 的组件的值*Component*。
+ `=== "green"`：检查组件的值是否等于字符串 “green”。
+ `? "🟢"`: 如果条件为真，则显示绿色圆圈表情符号。
+ `: ui.Component.value === "yellow" ? "🟡"`: 如果第一个条件为 false，则检查组件的值是否等于字符串 “yellow”。
+ `? "🟡"`: 如果第二个条件为真，则显示黄色方块表情符号。
+ `: ui.detail1.data?.[0]?.CustomerStatus`：如果两个条件都为假，则它会引用连接到 Detail 组件的数据数组中第一个项目的 “CustomerStatus” 值，ID 为 “detail1”。

此表达式可用于根据**详细信息**组件中的组件或数据字段的值显示表情符号或特定值。

### 指标
<a name="metrics-component"></a>

**M** etrics 组件是一个可视元素，它以类似卡片的格式显示关键指标或数据点。它旨在提供一种简洁且具有视觉吸引力的方式来呈现重要信息或绩效指标。

#### 指标属性
<a name="metrics-properties"></a>

**Metrics** 组件与其他组件共享几个共同属性`Name`，例如`Source`、和`Actions`。有关这些属性的更多信息，请参阅[常用组件属性](#common-properties)。

#### 趋势
<a name="metrics-properties-trend"></a>

指标的趋势功能允许您显示绩效的可视指标，或者显示的指标会随着时间的推移而发生变化。

##### 趋势值
<a name="metrics-properties-trend-value"></a>

此字段允许您指定用于确定趋势方向和幅度的值或表达式。通常，这是一个代表特定时间段内的变化或性能的值。

示例：

```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}
```

此表达式检索与 “SalesMetrics” 指标关联的数据中第一项的 month-over-month收入值。

##### 积极的趋势
<a name="metrics-properties-positive-trend"></a>

此字段允许您输入定义正向趋势条件的表达式。表达式的计算结果应为真或假。

示例：

```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}
```

此表达式检查 month-over-month收入值是否大于 0，表示呈正趋势。

##### 负面趋势
<a name="metrics-properties-negative-trend"></a>

此字段允许您输入定义负趋势条件的表达式。表达式的计算结果应为真或假。

示例：

```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}
```

此表达式检查 month-over-month收入值是否小于 0，表示呈负趋势。

##### 色条
<a name="metrics-properties-color-bar"></a>

此切换允许您启用或禁用彩条的显示，以直观地指示趋势状态。

##### 颜色条示例：
<a name="metrics-properties-color-bar-examples"></a>

##### 示例：销售指标趋势
<a name="metrics-properties-color-bar-examples-sales-metrics-trend"></a>
+ **趋势值**：`{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}`
+ **积极趋势**：`{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}`
+ **负面趋势**：`{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}`
+ **颜色栏**：已启用

##### 示例：库存指标趋势
<a name="metrics-properties-color-bar-examples-inventory-metrics-trend"></a>
+ **趋势值**：`{{ui.inventoryMetrics.data?.[0]?.currentInventory - ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **积极趋势**：`{{ui.inventoryMetrics.data?.[0]?.currentInventory > ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **负面趋势**：`{{ui.inventoryMetrics.data?.[0]?.currentInventory < ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **颜色栏**：已启用

##### 示例：客户满意度趋势
<a name="metrics-properties-color-bar-examples-customer-satisfaction-trend"></a>
+ **趋势值**：`{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore}}`
+ **积极趋势**：`{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore >= 8}}`
+ **负面趋势**：`{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore < 7}}`
+ **颜色栏**：已启用

通过配置这些与趋势相关的属性，您可以创建**指标**组件，这些组件可以直观地呈现所显示的指标的性能或随时间推移而发生的变化。

通过利用这些表达式，您可以创建高度自定义的交互式指标组件，这些组件可以动态引用和显示数据，从而允许您在应用程序中展示关键指标、绩效指标和数据驱动的可视化效果。

#### 指标表达式示例
<a name="metrics-expression-examples"></a>

在属性面板中，您可以输入表达式来显示标题、主要值、辅助值和值标题以动态显示值。

##### 示例：引用主值
<a name="metrics-expression-examples-referencing-primary-value"></a>

`{{ui.metric1.primaryValue}}`：此表达式允许您使用*metric1*来自同一页面中其他组件或表达式的 ID 来引用 M **etrics** 组件的主要值。

示例：`{{ui.salesMetrics.primaryValue}}`将显示*salesMetrics***指标**组件的主要值。

##### 示例：引用次要值
<a name="metrics-expression-examples-referencing-secondary-value"></a>

`{{ui.metric1.secondaryValue}}`：此表达式允许您使用*metric1*来自同一页面中其他组件或表达式的 ID 来引用 M **etrics** 组件的辅助值。

示例：`{{ui.revenueMetrics.secondaryValue}}`将显示*revenueMetrics***指标**组件的次要值。

##### 示例：引用数据
<a name="metrics-expression-examples-referencing-data"></a>

`{{ui.metric1.data}}`：此表达式允许您使用*metric1*来自同一页面中其他组件或表达式的 ID 来引用 M **etrics** 组件的数据。

示例：`{{ui.kpiMetrics.data}}`将引用与*kpiMetrics***指标**组件相关的数据。

##### 示例：显示特定的数据值：
<a name="metrics-expression-examples-displaying-specific-data-values"></a>

`{{ui.metric1.data?.[0]?.id}}`：此表达式是一个示例，说明如何显示连接到 M **etrics** 组件的数据中的特定信息，ID 为*metric1*。当您想要显示数据中第一项的特定属性时，它很有用。

细分：
+ `ui.metric1`：引用带有 ID 的**指标**组件*metric1*。
+ `data`：指与该组件相关的信息或数据集。
+ `?.[0]`: 表示该数据集中的第一个项目或条目。
+ `?.id`：显示第一个项目或条目的*id*值或标识符。

示例：`{{ui.orderMetrics.data?.[0]?.orderId}}`将显示连接到 M *orderMetrics* **etrics** 组件的数据中第一项的*orderId*值。

##### 示例：显示数据长度
<a name="metrics-expression-examples-displaying-data-length"></a>

`{{ui.metric1.data?.length}}`：此表达式演示如何显示与 ID 为 M **etrics** 组件关联的数据中的长度（项目数）*metric1*。当您想要显示数据中的项目数时，它很有用。

细分：
+ `ui.metric1.data`：引用连接到组件的数据集。
+ `?.length`：访问该数据集中项目或条目的总数或数量。

示例：`{{ui.productMetrics.data?.length}}`将显示数据中与 M *productMetrics* **etrics** 组件关联的项目数。

### 中继器
<a name="repeater-component"></a>

**Repeater** 组件是一个动态组件，允许您根据提供的数据源生成和显示元素集合。它旨在便于在应用程序的用户界面中创建列表、网格或重复模式。一些示例用例包括：
+ 为账户中的每位用户显示一张卡片
+ 显示包含图片的产品列表和将其添加到购物车的按钮
+ 显示用户可以访问的文件列表

**Repeater** 组件与内容丰富的**表格**组件区分开来。**表**组件具有严格的行和列格式。中**继器**可以更灵活地显示您的数据。

#### 中继器属性
<a name="repeater-component-properties"></a>

**Repeater** 组件与其他组件共享多个共同属性，例如`Name``Source`、和。`Actions`有关这些属性的更多信息，请参阅[常用组件属性](#common-properties)。

除了常用属性外，**Repeater** 组件还具有以下其他属性和配置选项。

#### 商品模板
<a name="repeater-component-properties-item-template"></a>

**项目模板**是一个容器，您可以在其中定义结构和组件，这些结构和组件将为数据源中的每个项目重复使用。您可以将其他组件拖放到此容器中，例如**文本**、**图像**、**按钮**或表示每个项目所需的任何其他组件。

在**项目模板**中，您可以使用格式中的表达式引用当前项目的属性或值`{{currentItem.propertyName}}`。

例如，如果您的数据源包含一个`itemName`属性，则可以使用`{{currentItem.itemName}}`来显示当前项目的项目名称。

#### 布局
<a name="repeater-component-properties-layout"></a>

**布**局部分允许您配置中继器组件中重复元素的排列方式。

##### 方向
<a name="repeater-component-properties-orientation"></a>
+ **列表**：将重复的元素垂直排列在一列中。
+ **网格**：在具有多列的网格布局中排列重复的元素。

##### 每页行数
<a name="repeater-component-properties-rows-per-page"></a>

指定列表布局中每页显示的行数。为溢出指定行数的项目提供分页功能。

##### 每页列数和每页行数（网格）
<a name="columns-and-rows-per-page-grid"></a>
+ **列**：指定网格布局中的列数。
+ **每页行**数：指定网格布局中每页显示的行数。为超出指定网格尺寸的项目提供分页。

#### 表达式和示例
<a name="repeater-component-properties-expressions"></a>

**Repeater** 组件提供了各种表达式字段，允许您动态引用和显示组件内的数据。这些表达式使您能够创建与应用程序的数据和逻辑无缝连接的自定义交互式 **Re** peater组件。

##### 示例：引用项目
<a name="repeater-component-properties-expressions-examples-referencing-items"></a>
+ `{{currentItem.propertyName}}`：引用项目**模板**中当前项目的属性或值。
+ `{{ui.repeaterID[index]}}`：通过索引引用 Repeater 组件中的特定项目。

##### 示例：呈现产品列表
<a name="repeater-component-properties-expressions-examples-rendering-product-list"></a>
+ **来源**：选择*Products*实体作为数据源。
+ **商品模板**：添加一个**容器**组件，里面有一个**文本**组件来显示产品名称 (`{{currentItem.productName}}`)，一个**图片**组件来显示产品图片 (`{{currentItem.productImageUrl}}`)。
+ **布局**：将设置为`Orientation`，`List`然后根据`Rows per Page`需要进行调整。

##### 示例：生成用户头像网格
<a name="repeater-component-properties-expressions-examples-generating-user-avatar-grid"></a>
+ **来源**：使用表达式生成用户数据数组（例如`[{name: 'John', avatarUrl: '...'}, {...}, {...}]`）。
+ **项目模板**：添加**图像**组件并将其`Source`属性设置为`{{currentItem.avatarUrl}}`。
+ **布局**：`Orientation`将设置为`Grid`，指定`Columns`和的数量`Rows per Page`，然后根据需要调整`Space Between`和`Padding`。

通过使用该`Repeater`组件，您可以创建动态和数据驱动的用户界面，从而简化元素集合的渲染过程并减少手动重复或硬编码的需求。

### 表单
<a name="form-component"></a>

表单组件旨在捕获用户输入并简化应用程序中的数据输入任务。它提供了用于显示输入字段、下拉菜单、复选框和其他表单控件的结构化布局，允许用户无缝输入或修改数据。可以在表单组件（例如表格）中嵌套其他组件。

#### 表单属性
<a name="form-component-properties"></a>

**表单**组件与其他组件共享多个共同属性，例如`Name``Source`、和`Actions`。有关这些属性的更多信息，请参阅[常用组件属性](#common-properties)。

#### 生成表单
<a name="form-component-properties-generate-form"></a>

**使用生成表单**功能，可以根据所选数据源自动填充表单域，从而轻松快速创建表单域。在构建需要显示大量字段的表单时，这可以节省时间和精力。

**要使用 “**生成表单**” 功能，请执行以下操作：**

1. 在**表单**组件的属性中，找到 “**生成表单**” 部分。

1. 选择要用于生成表单域的数据源。这可以是您的应用程序中可用的实体、工作流程或任何其他数据源。

1. 表单字段将根据所选数据源自动生成，包括字段标签、类型和数据映射。

1. 查看生成的字段并进行任何必要的自定义，例如添加验证规则或更改字段顺序。

1. 对表单配置感到满意后，选择 “**提交**”，将生成的字段应用于您的**表单**组件。

当应用程序中有一个定义明确的数据模型或一组需要捕获用户输入的实体时，**生成表单**功能特别有用。通过自动生成表单字段，您可以节省时间并确保应用程序表单之间的一致性。

使用 “**生成表单**” 功能后，您可以进一步自定义**表单**组件的布局、操作和表达式以满足您的特定要求。

#### 表达式和示例
<a name="form-component-properties-expressions"></a>

与其他组件一样，您可以使用表达式来引用和显示**表单**组件中的数据。例如：
+ `{{ui.userForm.data.email}}`：引用连接到 ID 为 **Form** 组件的数据源中的`email`字段值`userForm`。

**注意**  
有关常[常用组件属性](#common-properties)用属性的更多表达式示例，请参阅。

通过配置这些属性并利用表达式，您可以创建与应用程序数据源和逻辑无缝集成的自定义交互式表单组件。这些组件可用于捕获用户输入、显示预填充的数据以及根据表单提交或用户互动触发操作。

### 步骤流
<a name="stepflow-component"></a>

**Stepflow** 组件旨在指导用户完成应用程序中的多步骤流程或工作流程。它提供了一个结构化且直观的界面，用于呈现一系列步骤，每个步骤都有自己的输入、验证和操作集。

Stepflow 组件与其他组件共享多个共同属性，例如`Name``Source`、和。`Actions`有关这些属性的更多信息，请参阅[常用组件属性](#common-properties)。

**Stepflow** 组件具有其他属性和配置选项，例如`Step Navigation``Validation`、和。`Expressions`

## AI 组件
<a name="ai-components"></a>

### 人工智能世代
<a name="genai-component"></a>

**Gen AI** 组件是一个分组容器，用于对组件及其随附的逻辑进行分组，以便在应用程序工作室中使用聊天功能使用 AI 轻松编辑它们。当你使用聊天创建组件时，它们将被分组到一个 **Gen AI** 容器中。有关编辑或使用此组件的信息，请参见[构建或编辑您的应用程序](generative-ai.md#generative-ai-build-app)。

## 文本和数字组件
<a name="text-and-number-components"></a>

### 文本输入
<a name="text-input-component"></a>

**文本输入**组件允许用户在您的应用程序中输入和提交文本数据。它提供了一种简单直观的方式来捕获用户输入，例如姓名、地址或任何其他文本信息。
+ `{{ui.inputTextID.value}}`：返回输入字段中提供的值。
+ `{{ui.inputTextID.isValid}}`：返回输入字段中提供的值的有效性。

### 文本
<a name="text-component"></a>

**文本**组件用于显示应用程序中的文本信息。它可用于显示静态文本、动态值或由表达式生成的内容。

### 文字区域
<a name="text-area-component"></a>

**文本区域**组件旨在捕获用户的多行文本输入。它提供了更大的输入字段区域，供用户输入更长的文本条目，例如描述、注释或注释。
+ `{{ui.textAreaID.value}}`：返回文本区域中提供的值。
+ `{{ui.textAreaID.isValid}}`：返回文本区域中提供的值的有效性。

### 电子邮件
<a name="email-component"></a>

**电子邮件**组件是一个专门的输入字段，旨在捕获用户的电子邮件地址。它可以强制执行特定的验证规则，以确保输入的值符合正确的电子邮件格式。
+ `{{ui.emailID.value}}`：返回电子邮件输入字段中提供的值。
+ `{{ui.emailID.isValid}}`：返回电子邮件输入字段中提供的值的有效性。

### 密码
<a name="password-component"></a>

P **as** sword 组件是一个专门为用户输入敏感信息（例如密码或 PIN 码）而设计的输入字段。它会屏蔽输入的字符以维护隐私和安全。
+ `{{ui.passwordID.value}}`：返回密码输入字段中提供的值。
+ `{{ui.passwordID.isValid}}`：返回密码输入字段中提供的值的有效性。

### Search
<a name="search-component"></a>

**搜索**组件为用户提供了一个专用的输入字段，用于在应用程序中填充的数据中执行搜索查询或输入搜索词。
+ `{{ui.searchID.value}}`：返回搜索字段中提供的值。

### Phone
<a name="phone-component"></a>

“**电话**” 组件是一个输入字段，专为捕获用户的电话号码或其他联系信息而量身定制。它可以包括特定的验证规则和格式选项，以确保输入的值符合正确的电话号码格式。
+ `{{ui.phoneID.value}}`：返回电话输入字段中提供的值。
+ `{{ui.phoneID.isValid}}`：返回电话输入字段中提供的值的有效性。

### 数字
<a name="number-component"></a>

**数字分量**是一个专门为用户输入数值而设计的输入字段。它可以强制执行验证规则，以确保输入的值是指定范围或格式内的有效数字。
+ `{{ui.numberID.value}}`：返回数字输入字段中提供的值。
+ `{{ui.numberID.isValid}}`：返回数字输入字段中提供的值的有效性。

### 货币
<a name="currency-component"></a>

**货币**部分是一个专门的输入字段，用于捕获货币价值或金额。它可以包括用于显示货币符号的格式化选项、十进制分隔符，并强制执行特定于货币输入的验证规则。
+ `{{ui.currencyID.value}}`：返回货币输入字段中提供的值。
+ `{{ui.currencyID.isValid}}`：返回货币输入字段中提供的值的有效性。

### 细节对
<a name="detail-pair-component"></a>

D **etail pair** 组件用于以结构化和可读的格式显示键值对或相关信息对。它通常用于显示与特定项目或实体相关的详细信息或元数据。

## 选择组件
<a name="selection-components"></a>

### Switch
<a name="switch-component"></a>

S **witch** 组件是一个用户界面控件，允许用户在两种状态或选项之间切换，例如on/off, true/false, or enabled/disabled。它提供了当前状态的可视化表示，并允许用户通过单击或点击进行更改。

### 交换机组
<a name="switch-group-component"></a>

**开关组**组件是单个开关控件的集合，允许用户从预定义的集合中选择一个或多个选项。它提供了所选选项和未选中选项的可视化表示，使用户更容易理解可用选项并与之交互。

#### 切换群组表达式字段
<a name="switch-group-expression-fields"></a>
+ `{{ui.switchGroupID.value}}`：返回一个字符串数组，其中包含应用程序用户启用的每个开关的值。

### 复选框组
<a name="checkbox-group-component"></a>

复**选框组**组件为用户提供一组复选框，允许他们同时选择多个选项。当您想让用户能够从选项列表中选择一个或多个项目时，它很有用。

#### 复选框组表达式字段
<a name="checkbox-group-expression-fields"></a>
+ `{{ui.checkboxGroupID.value}}`：返回一个字符串数组，其中包含应用程序用户选择的每个复选框的值。

### 电台小组
<a name="radio-group-component"></a>

**Radio group 组件是一组**单选按钮，允许用户从多个互斥的选项中选择一个选项。它确保一次只能选择一个选项，从而为用户提供了一种清晰而明确的选择方式。

#### 无线电群组表达式字段
<a name="radio-group-expression-fields"></a>

以下字段可以在表达式中使用。
+ `{{ui.radioGroupID.value}}`：返回应用程序用户选择的单选按钮的值。

### 单选
<a name="single-select-component"></a>

S **ingle selec** t 组件为用户提供了一系列选项，用户可以从中选择单个项目。它通常用于用户需要从一组预定义的选项中进行选择的场景，例如选择类别、位置或首选项。

#### 单选表达式字段
<a name="single-select-expression-fields"></a>
+ `{{ui.singleSelectID.value}}`：返回应用程序用户选择的列表项的值。

### 多选
<a name="multi-select-component"></a>

**多选**组件与**单选**组件类似，但允许用户从选项列表中同时选择多个选项。当用户需要从一组预定义的选项中进行多个选择（例如选择多个标签、兴趣或偏好）时，它很有用。

#### 多选表达式字段
<a name="multi-select-expression-fields"></a>
+ `{{ui.multiSelectID.value}}`：返回一个字符串数组，其中包含应用程序用户选择的每个列表项的值。

## 按钮和导航组件
<a name="buttons-and-navigation-components"></a>

应用程序工作室提供了各种按钮和导航组件，允许用户触发操作并在您的应用程序中导航。

### 按钮组件
<a name="button-components"></a>

可用的按钮组件有：
+ 按钮
+ 带轮廓的按钮
+ 图标按钮
+ “文本” 按钮

这些按钮组件具有以下共同属性：

#### 内容
<a name="button-content"></a>
+ **按钮标签**：要在按钮上显示的文本。

#### Type
<a name="button-type"></a>
+ **按钮**：标准按钮。
+ **轮廓**：带有轮廓样式的纽扣。
+ **图标**：带有图标的按钮。
+ **文本**：纯文字按钮。

#### Size
<a name="button-size"></a>

按钮的大小。可能的值为 `Small`、`Medium` 和 `Large`。

#### 图标
<a name="button-icon"></a>

您可以从按钮上显示的各种图标中进行选择，包括：
+ 信封已关闭
+ Bell
+ 人员
+ 汉堡菜单
+ Search
+ 信息圈出
+ 装备
+ V 形左
+ V 形右
+ 水平圆点
+ 垃圾桶
+ 编辑
+ Check
+ Close
+ 主页
+ Plus

#### 触发器
<a name="button-triggers"></a>

单击按钮时，您可以配置一个或多个要触发的操作。可用的操作类型有：
+ **基本**
  + 运行组件操作：在组件内执行特定操作。
  + 导航：导航到其他页面或视图。
  + 调用数据操作：触发与数据相关的操作，例如创建、更新或删除记录。
+ **高级**
  + JavaScript: 运行自定义 JavaScript 代码。
  + 调用自动化：启动现有的自动化或工作流程。

#### JavaScript 操作按钮属性
<a name="button-examples-javascript"></a>

选择`JavaScript`操作类型以在单击按钮时运行自定义 JavaScript 代码。

##### 源代码
<a name="button-source-code"></a>

在该`Source code`字段中，您可以输入您的 JavaScript 表达式或函数。例如：

```
return "Hello World";
```

这只会在点击按钮`Hello World`时返回字符串。

##### 条件：如果 “运行”
<a name="button-run-if"></a>

您还可以提供一个布尔表达式来确定是否应执行 JavaScript 操作。它使用以下语法：

```
{{ui.textinput1.value !== ""}}
```

在此示例中，只有当`textinput1`组件的值不是空字符串时，该 JavaScript 操作才会运行。

通过使用这些高级触发器选项，您可以创建高度自定义的按钮行为，这些行为直接与应用程序的逻辑和数据集成。这使您可以扩展按钮的内置功能，并根据您的特定要求定制用户体验。

**注意**  
务必彻底测试您的 JavaScript 操作，确保它们按预期运行。

### 超链接
<a name="hyperlink-component"></a>

**Hyperlink** 组件提供了一个可点击的链接，用于导航到外部 URLs 或内部应用程序路由。

#### 超链接属性
<a name="hyperlink-properties"></a>

##### 内容
<a name="hyperlink-properties-content"></a>
+ **超链接标签**：要显示为超链接标签的文本。

##### URL
<a name="hyperlink-properties-url"></a>

超链接的目标 URL，可以是外部网站或内部应用程序路由。

##### 触发器
<a name="hyperlink-properties-triggers"></a>

单击超链接时，您可以配置一个或多个要触发的操作。可用的操作类型与按钮组件的操作类型相同。

## 日期和时间组件
<a name="date-and-time-components"></a>

### 日期
<a name="date-component"></a>

**日期**组件允许用户选择和输入日期。

**日期**组件与其他组件共享多个共同属性，例如`Name``Source`、和`Validation`。有关这些属性的更多信息，请参阅[常用组件属性](#common-properties)。

除了常用属性外，**Dat** e 组件还具有以下特定属性：

#### 日期属性
<a name="date-component-properties"></a>

##### Format
<a name="date-component-properties-format"></a>
+ **YYYY/MM/DD**、**DD/MM/YYYY**、**YYYY/MM/DD**、**YYYY/DD/MM**、**MM/DD**、**DD/MM**：显示日期的格式。

##### 值
<a name="date-component-properties-value"></a>
+ **YYYY-MM-DD**：内部存储日期值的格式。

##### 最小日期
<a name="date-component-properties-min-date"></a>
+ **YYYY-MM-DD**：可以选择的最小日期。
**注意**  
此值必须与的格式匹配`YYYY-MM-DD`。

##### 最大日期
<a name="date-component-properties-max-date"></a>
+ **YYYY-MM-DD**：可以选择的最大日期。
**注意**  
此值必须与的格式匹配`YYYY-MM-DD`。

##### 日历类型
<a name="date-component-properties-calendar-type"></a>
+ **1 个月**，**2 个月**：要显示的日历用户界面的类型。

##### 禁用日期
<a name="date-component-properties-disabled-dates"></a>
+ **来源**：应禁用的日期的数据源。例如：无，表达式。
+ **禁用日期**：用于确定应禁用哪些日期的表达式，例如：
  + `{{currentRow.column}}`: 禁用与此表达式计算结果相匹配的日期。
  + `{{new Date(currentRow.dateColumn) < new Date("2023-01-01")}}`: 禁用 2023 年 1 月 1 日之前的日期
  + `{{new Date(currentRow.dateColumn).getDay() === 0 || new Date(currentRow.dateColumn).getDay() === 6}}`: 禁用周末。

##### 行为
<a name="date-component-properties-behavior"></a>
+ 在以下@@ **条件下可见**：确定**日期**组件可见性的表达式。
+ i@@ **f 禁用**：用于确定是否应禁用 **Dat** e 组件的表达式。

#### 验证
<a name="date-component-properties-validation"></a>

“**验证**” 部分允许您为日期输入定义其他规则和约束。通过配置这些验证规则，可以确保用户输入的日期值符合应用程序的特定要求。您可以添加以下类型的验证：
+ **必填**：此开关可确保用户在提交表单之前必须输入日期值。
+ **自定义**：您可以使用 JavaScript表达式创建自定义验证规则。例如：

  ```
  {{new Date(ui.dateInput.value) < new Date("2023-01-01")}}
  ```

  此表达式检查输入的日期是否在 2023 年 1 月 1 日之前。如果条件为真，则验证将失败。

  您还可以提供一条自定义验证消息，以便在不满足验证时显示：

  ```
  "Validation not met. The date must be on or after January 1, 2023."
  ```

通过配置这些验证规则，可以确保用户输入的日期值符合应用程序的特定要求。

#### 表达式和示例
<a name="date-component-expressions"></a>

**日期**组件提供以下表达式字段：
+ `{{ui.dateID.value}}`：返回用户以格式输入的日期值`YYYY-MM-DD`。

### 时间
<a name="time-component"></a>

**时间**组件允许用户选择和输入时间值。通过配置**时间**组件的各种属性，您可以创建满足应用程序特定要求的时间输入字段，例如限制可选的时间范围、禁用某些时间以及控制组件的可见性和交互性。

#### 时间属性
<a name="time-component-properties"></a>

**时间**组件与其他组件共享几个共同的属性，例如`Name``Source`、和`Validation`。有关这些属性的更多信息，请参阅[常用组件属性](#common-properties)。

除了常用属性外，T **im** e 组件还具有以下特定属性：

##### 时间间隔
<a name="time-component-properties-time-intervals"></a>
+ **5 分钟**、**10 分钟**、**15 分钟**、**20 分钟**、**25 分钟**、**30 分钟**、**60 分钟**：可用于选择时间的时间间隔。

##### 值
<a name="time-component-properties-value"></a>
+ **HH: MM AA**：内部存储时间值的格式。
**注意**  
此值必须与的格式匹配`HH:MM AA`。

##### Placeholder
<a name="time-component-properties-placeholder"></a>
+ **日历设置**：时间字段为空时显示的占位符文本。

##### 最小时间
<a name="time-component-properties-min-time"></a>
+ **HH: MM AA**：可以选择的最短时间。
**注意**  
此值必须与的格式匹配`HH:MM AA`。

##### 最大时间
<a name="time-component-properties-max-time"></a>
+ **HH: MM AA**：可以选择的最长时间。
**注意**  
此值必须与的格式匹配`HH:MM AA`。

##### 禁用时间
<a name="time-component-properties-disabled-times"></a>
+ **来源**：应禁用的时间的数据源（例如 “无”、“表达式”）。
+ **禁用时间**：用于确定应禁用哪些时间的表达式，例如`{{currentRow.column}}`。

##### 禁用时间配置
<a name="disabled-times-configuration"></a>

您可以使用 “**禁用时间**” 部分来指定哪些时间值不可选择。

##### 来源
<a name="disabled-times-configuration-source"></a>
+ **无**：不禁用任何时间。
+ **表达式**：您可以使用 JavaScript 表达式来确定应禁用哪些时间，例如`{{currentRow.column}}`。

##### 表达式示例：
<a name="disabled-times-configuration-expression-example"></a>

```
{{currentRow.column === "Lunch Break"}}
```

当当前行的 “午休时间” 列为真时，此表达式将禁用。

通过配置这些验证规则和禁用的时间表达式，可以确保用户输入的时间值满足应用程序的特定要求。

##### 行为
<a name="time-component-properties-behavior"></a>
+ 在以下@@ **条件下可见**：确定时间组件可见性的表达式。
+ i@@ **f 禁用**：用于确定是否应禁用时间组件的表达式。

##### 验证
<a name="time-component-properties-validation"></a>
+ **必需**：一个切换开关，可确保用户在提交表单之前必须输入时间值。
+ **自定义**：允许您使用 JavaScript 表达式创建自定义验证规则。

  **自定义验证消息**：不满足自定义验证时要显示的消息。

例如：

```
{{ui.timeInput.value === "09:00 AM" || ui.timeInput.value === "09:30 AM"}}
```

此表达式检查输入的时间是上午 9:00 还是上午 9:30。如果条件为真，则验证将失败。

您还可以提供一条自定义验证消息，以便在不满足验证时显示：

```
Validation not met. The time must be 9:00 AM or 9:30 AM.
```

#### 表达式和示例
<a name="time-component-expressions"></a>

时间组件提供以下表达式字段：
+ `{{ui.timeID.value}}`：返回用户以 HH: MM AA 格式输入的时间值。

##### 示例：时间值
<a name="time-component-expressions-examples-time-value"></a>
+ `{{ui.timeID.value}}`：返回用户以格式输入的时间值`HH:MM AA`。

##### 示例：时间比较
<a name="time-component-expressions-examples-time-comparison"></a>
+ `{{ui.timeInput.value > "10:00 AM"}}`：检查时间值是否大于上午 10:00。
+ `{{ui.timeInput.value < "05:00 pM"}}`：检查时间值是否小于 05:00 PM。

### 日期范围
<a name="date-range-component"></a>

**日期范围**组件允许用户选择和输入日期范围。通过配置日期范围组件的各种属性，您可以创建满足应用程序特定要求的日期范围输入字段，例如限制可选日期范围、禁用某些日期以及控制组件的可见性和交互性。

#### 日期范围属性
<a name="date-range-component-properties"></a>

**日期范围**组件与其他组件共享多个共同属性，例如`Name``Source`、和`Validation`。有关这些属性的更多信息，请参阅[常用组件属性](#common-properties)。

除了常用属性外，**日期范围**组件还具有以下特定属性：

##### Format
<a name="date-range-component-properties-format"></a>
+ **MM/DD/YYYY**：显示日期范围的格式。

##### 开始日期
<a name="date-range-component-properties-start-date"></a>
+ **YYYY-MM-DD**：可以选择作为范围起点的最小日期。
**注意**  
此值必须与的格式匹配`YYYY-MM-DD`。

##### 结束日期
<a name="date-range-component-properties-end-date"></a>
+ **YYYY-MM-DD**：可以选择作为范围终点的最大日期。
**注意**  
此值必须与的格式匹配`YYYY-MM-DD`。

##### Placeholder
<a name="date-range-component-properties-placeholder"></a>
+ **日历设置**：日期范围字段为空时显示的占位符文本。

##### 最小日期
<a name="date-range-component-properties-min-date"></a>
+ **YYYY-MM-DD**：可以选择的最小日期。
**注意**  
此值必须与的格式匹配`YYYY-MM-DD`。

##### 最大日期
<a name="date-range-component-properties-max-date"></a>
+ **YYYY-MM-DD**：可以选择的最大日期。
**注意**  
此值必须与的格式匹配`YYYY-MM-DD`。

##### 日历类型
<a name="date-range-component-properties-calendar-type"></a>
+ **1 个月**：要显示的日历用户界面的类型。例如，单月。
+ **2 个月**：要显示的日历用户界面的类型。例如，两个月。

##### 已选择必修日期
<a name="date-range-component-properties-mandatory-days-selected"></a>
+ **0**：在日期范围内必须选择的必填天数。

##### 禁用日期
<a name="date-range-component-properties-disabled-dates"></a>
+ **来源**：应禁用的日期（例如 “无”、“表达式”、“实体” 或 “自动”）的数据源。
+ **禁用日期**：用于确定应禁用哪些日期的表达式，例如`{{currentRow.column}}`。

##### 验证
<a name="date-range-component-properties-validation"></a>

“**验证**” 部分允许您为日期范围输入定义其他规则和约束。

#### 表达式和示例
<a name="date-range-component-expressions"></a>

**日期范围**组件提供以下表达式字段：
+ `{{ui.dateRangeID.startDate}}`：以格式返回所选范围的开始日期`YYYY-MM-DD`。
+ `{{ui.dateRangeID.endDate}}`：以格式返回所选范围的结束日期`YYYY-MM-DD`。

##### 示例：计算日期差
<a name="date-range-component-expressions-examples-calculating-date-difference"></a>
+ `{(new Date(ui.dateRangeID.endDate) - new Date(ui.dateRangeID.startDate)) / (1000 * 60 * 60 * 24)}}`计算开始日期和结束日期之间的天数。

##### 示例：基于日期范围的条件可见性
<a name="date-range-component-expressions-examples-conditional-visibility-based-on-date-range"></a>
+ `{{new Date(ui.dateRangeID.startDate) < new Date("2023-01-01") || new Date(ui.dateRangeID.endDate) > new Date("2023-12-31")}}`检查所选日期范围是否在 2023 年之外。

##### 示例：基于当前行数据的禁用日期
<a name="date-range-component-expressions-examples-disabled-dates-based-on-current-row-data"></a>
+ `{{currentRow.isHoliday}}`禁用当前行中 “isHoliday” 列为真的日期。
+ `{{new Date(currentRow.dateColumn) < new Date("2023-01-01")}}`根据当前行中的 “日期列” 禁用 2023 年 1 月 1 日之前的日期。
+ `{{new Date(currentRow.dateColumn).getDay() === 0 || new Date(currentRow.dateColumn).getDay() === 6}}`根据当前行中的 “日期列” 禁用周末。

##### 自定义验证
<a name="date-range-component-expressions-examples-custom-validation"></a>
+ `{{new Date(ui.dateRangeID.startDate) > new Date(ui.dateRangeID.endDate)}}`检查开始日期是否晚于结束日期，这将使自定义验证失败。

## 媒体组件
<a name="media-components"></a>

应用程序工作室提供了多个组件，用于在应用程序中嵌入和显示各种媒体类型。

### iFrame 嵌入
<a name="iframe-embed-component"></a>

**iFrame 嵌入**组件允许您使用 iFrame 在应用程序中嵌入外部 Web 内容或应用程序。

#### iFrame 嵌入属性
<a name="iframe-embed-properties"></a>

##### URL
<a name="iframe-embed-properties-iframe-url"></a>

**注意**  
应用程序的内容安全设置中必须允许使用此组件中显示的媒体来源。有关更多信息，请参阅 [查看或更新应用程序的内容安全设置](app-content-security-settings-csp.md)。

要嵌入的外部内容或应用程序的 URL。

##### 布局
<a name="iframe-embed-properties-iframe-layout"></a>
+ **宽度**：iFrame 的宽度，指定为百分比 (%) 或固定像素值（例如 300 像素）。
+ **高度**：iFrame 的高度，以百分比 (%) 或固定像素值指定。

### S3 上传
<a name="s3-upload-component"></a>

S **3 上传**组件允许用户将文件上传到 Amazon S3 存储桶。通过配置 **S3 上传**组件，您可以让用户轻松地将文件上传到应用程序的 Amazon S3 存储，然后在应用程序的逻辑和用户界面中利用上传的文件信息。

**注意**  
请务必确保具备必要的权限和 Amazon S3 存储桶配置，以支持应用程序的文件上传和存储要求。

#### S3 上传属性
<a name="s3-upload-properties"></a>

##### S3 配置
<a name="s3-upload-component-properties-configuration"></a>
+ **连接器**：选择用于文件上传的预配置的 Amazon S3 连接器。
+ **存储桶**：用于上传文件的 Amazon S3 存储桶。
+ **文件夹**：Amazon S3 存储桶中用于存储文件的文件夹。
+ **文件名**：上传文件的命名惯例。

##### 文件上传配置
<a name="s3-upload-component-properties-file-upload-configuration"></a>
+ **标签**：文件上传区域上方显示的标签或说明。
+ **描述**：有关文件上传的其他说明或信息。
+ **文件类型**：允许上传的文件类型。例如：图像、文档或视频。
+ **大小**：可以上传的单个文件的最大大小。
+ **按钮标签**：文件选择按钮上显示的文本。
+ **按钮样式**：文件选择按钮的样式。例如，勾勒或填充。
+ **按钮大小**：文件选择按钮的大小。

##### 验证
<a name="s3-upload-component-properties-validation"></a>
+ **最大文件数**：一次可以上传的最大文件数。
+ **最大文件大小**：每个文件允许的最大大小。

##### 触发器
<a name="s3-upload-component-properties-triggers"></a>
+ **成功**时：文件上传成功时要触发的操作。
+ **失败**时：文件上传失败时要触发的操作。

#### S3 上传表达式字段
<a name="s3-upload-expression-fields"></a>

S **3 上传**组件提供以下表达式字段：
+ `{{ui.s3uploadID.files}}`：返回已上传文件的数组。
+ `{{ui.s3uploadID.files[0]?.size}}`：返回指定索引处文件的大小。
+ `{{ui.s3uploadID.files[0]?.type}}`：返回指定索引处的文件类型。
+ `{{ui.s3uploadID.files[0]?.nameOnly}}`: 返回指定索引处的文件名，不带扩展名后缀。
+ `{{ui.s3uploadID.files[0]?.nameWithExtension}}`: 返回文件名及其扩展名后缀位于指定索引处。

#### 表达式和示例
<a name="s3-upload-component-expression-examples"></a>

##### 示例：访问上传的文件
<a name="s3-upload-component-expression-examples-accessing-uploaded-files"></a>
+ `{{ui.s3uploadID.files.length}}`：返回已上传的文件数。
+ `{{ui.s3uploadID.files.map(f => f.name).join(', ')}}`：返回以逗号分隔的已上传文件名列表。
+ `{{ui.s3uploadID.files.filter(f => f.type.startsWith('image/'))}}`：返回仅包含已上传图像文件的数组。

##### 示例：验证文件上传
<a name="s3-upload-component-expression-examples-validating-file-uploads"></a>
+ `{{ui.s3uploadID.files.some(f => f.size > 5 * 1024 * 1024)}}`：检查上传的文件大小是否超过 5 MB。
+ `{{ui.s3uploadID.files.every(f => f.type === 'image/png')}}`：检查所有上传的文件是否都是 PNG 图片。
+ `{{ui.s3uploadID.files.length > 3}}`：检查上传的文件是否超过 3 个。

##### 示例：触发动作
<a name="s3-upload-component-expression-examples-triggering-actions"></a>
+ `{{ui.s3uploadID.files.length > 0 ? 'Upload Successful' : 'No files uploaded'}}`：如果至少上传了一个文件，则显示成功消息。
+ `{{ui.s3uploadID.files.some(f => f.type.startsWith('video/')) ? triggerVideoProcessing() : null}}`：如果已上传任何视频文件，则触发视频处理自动化。
+ `{{ui.s3uploadID.files.map(f => f.url)}}`：检索已上传 URLs 的文件，这些文件可用于显示或进一步处理这些文件。

这些表达式允许您访问上传的文件、验证文件上传以及根据文件上传结果触发操作。通过利用这些表达式，您可以在应用程序的文件上传功能中创建更加动态和智能的行为。

**注意**  
*s3uploadID*替换为您的 **S3 上传**组件的 ID。

### PDF 查看器组件
<a name="pdf-viewer-component"></a>

**PDF 查看器**组件允许用户在您的应用程序中查看 PDF 文档并与之交互。App Studio 支持这些不同的 PDF 源输入类型，**PDF 查看器**组件让您可以灵活地将 PDF 文档集成到应用程序中，无论是来自静态 URL、内联数据 URI 还是动态生成的内容。

#### PDF 查看器属性
<a name="pdf-viewer-properties"></a>

##### 来源
<a name="pdf-viewer-properties-source"></a>

**注意**  
应用程序的内容安全设置中必须允许使用此组件中显示的媒体来源。有关更多信息，请参阅 [查看或更新应用程序的内容安全设置](app-content-security-settings-csp.md)。

PDF 文档的来源，可以是表达式、实体、URL 或自动化。

##### Expression
<a name="pdf-viewer-properties-source-expression"></a>

使用表达式动态生成 PDF 源。

##### 实体
<a name="pdf-viewer-properties-source-entity"></a>

将 **PDF 查看器**组件连接到包含 PDF 文档的数据实体。

##### URL
<a name="pdf-viewer-properties-source-url"></a>

指定 PDF 文档的网址。

##### URL
<a name="pdf-viewer-properties-source-url-example"></a>

您可以输入指向要显示的 PDF 文档的 URL。这可以是公共网址，也可以是您自己的应用程序中的网址。

示例：`https://example.com/document.pdf`

##### 数据 URI
<a name="pdf-viewer-properties-source-url-data-uri"></a>

**数据 URI** 是一种在应用程序中嵌入小型数据文件（如图像或 PDFs）的紧凑方法。PDF 文档被编码为 base64 字符串，并直接包含在组件的配置中。

##### Blob 或 ArrayBuffer
<a name="pdf-viewer-properties-source-url-blob-or-arraybuffer"></a>

您还可以以 Blob 或 ArrayBuffer 对象的形式提供 PDF 文档，这样您就可以在应用程序中动态生成或检索 PDF 数据。

##### 自动化
<a name="pdf-viewer-properties-source-automation"></a>

将 **PDF 查看器**组件连接到提供 PDF 文档的自动化系统。

##### 操作
<a name="pdf-viewer-properties-actions"></a>
+ **下载**：添加允许用户下载 PDF 文档的按钮或链接。

##### 布局
<a name="pdf-viewer-properties-layout"></a>
+ **宽度**：PDF 查看器的宽度，指定为百分比 (%) 或固定像素值（例如 600 像素）。
+ **高度**：PDF 查看器的高度，指定为固定像素值。

### 图像查看器
<a name="image-viewer-component"></a>

**图像查看器**组件允许用户在应用程序中查看图像文件并与之交互。

#### 图像查看器属性
<a name="image-viewer-properties"></a>

##### 来源
<a name="image-viewer-properties-source"></a>

**注意**  
应用程序的内容安全设置中必须允许使用此组件中显示的媒体来源。有关更多信息，请参阅 [查看或更新应用程序的内容安全设置](app-content-security-settings-csp.md)。
+ **实体**：将**图像查看器**组件连接到包含图像文件的数据实体。
+ **URL**：指定图像文件的 URL。
+ **表达式**：使用表达式动态生成图像源。
+ **自动化**：将**图像查看器**组件连接到提供图像文件的自动化。

##### 替代文本
<a name="image-viewer-properties-alt-text"></a>

图片的替代文字描述，用于无障碍访问目的。

##### 布局
<a name="image-viewer-properties-layout"></a>
+ **图像拟合**：确定应如何调整图像大小并在组件中显示图像。例如，`Contain`、`Cover` 或 `Fill`。
+ **宽度**：**图像查看器**组件的宽度，指定为百分比 (%) 或固定像素值（例如 300px）。
+ **高度**：**图像查看器**组件的高度，指定为固定像素值。
+ **背景**：允许您为图像**查看器组件设置背景颜色或图像**。

# 自动化和操作：定义应用程序的业务逻辑
<a name="automations"></a>

**自动化**是您定义应用程序业务逻辑的方式。自动化的主要组成部分是：启动自动化的触发器、一个或多个操作的序列、用于向自动化传递数据的输入参数以及输出。

**Topics**
+ [自动化概念](automations-concepts.md)
+ [创建、编辑和删除自动化](automations-create-edit-delete.md)
+ [添加、编辑和删除自动化操作](automations-actions-add-edit-delete.md)
+ [自动化操作参考](automations-actions-reference.md)

# 自动化概念
<a name="automations-concepts"></a>

以下是在 App Studio 中使用自动化来定义和配置应用程序的业务逻辑时需要了解的一些概念和术语。

## 自动化
<a name="automations-concepts-automations"></a>

**自动化**是您定义应用程序业务逻辑的方式。自动化的主要组成部分是：启动自动化的触发器、一个或多个操作的序列、用于向自动化传递数据的输入参数以及输出。

## 操作
<a name="automations-concepts-actions"></a>

自动化操作，通常称为**操作**，是构成自动化的单个逻辑步骤。每个操作都会执行特定的任务，无论是发送电子邮件、创建数据记录、调用 Lambda 函数还是调用。 APIs操作通过操作库添加到自动化中，并且可以分组为条件语句或循环。

## 自动化输入参数
<a name="automations-concepts-parameters"></a>

**自动化输入参数**是动态输入值，您可以将其从组件传递给自动化，以使其灵活且可重复使用。将参数视为自动化的变量，您可以定义参数并在需要时提供不同的值，而不是将值硬编码到自动化中。参数允许您在每次运行时使用具有不同输入的相同自动化。

## 模拟输出
<a name="automations-concepts-mocked-output"></a>

某些操作使用连接器与外部资源或服务进行交互。使用预览环境时，应用程序不与外部服务交互。要测试在预览环境中使用连接器的操作，可以使用**模拟输出**来模拟连接器的行为和输出。模拟输出是使用配置的 JavaScript，结果存储在操作的结果中，就像连接器的响应存储在已发布的应用程序中一样。

通过使用模拟，您可以使用预览环境测试各种场景及其对自动化操作的影响，例如模拟不同的结果值、错误场景、边缘情况或不愉快的路径，而无需通过连接器调用外部服务。

## 自动化输出
<a name="automations-concepts-automation-output"></a>

**自动化输出**用于将值从一个自动化传递到应用程序的其他资源，例如组件或其他自动化。自动化输出配置为表达式，表达式可以返回静态值或根据自动化参数和操作计算出的动态值。默认情况下，自动化不返回任何数据，包括自动化中的操作结果。

以下是如何使用自动化输出的几个示例：
+ 您可以将自动化输出配置为返回数组，然后传递该数组以填充数据组件。
+ 您可以使用自动化来计算一个值，并将该值传递给其他多个自动化，以此作为集中和重复使用业务逻辑的一种方式。

## 触发器
<a name="automations-concepts-triggers"></a>

**触发器**决定何时以及在什么条件下运行自动化。触发器的一些`On click`示例包括按钮和`On select`文本输入。组件的类型决定了该组件的可用触发器列表。触发器被添加到[组件](concepts.md#concepts-component)中，并在应用程序工作室中进行配置。

# 创建、编辑和删除自动化
<a name="automations-create-edit-delete"></a>

**Contents**
+ [创建自动化](#automations-create)
+ [查看或编辑自动化属性](#automations-edit)
+ [删除自动化](#automations-delete)

## 创建自动化
<a name="automations-create"></a>

使用以下步骤在 App Studio 应用程序中创建自动化。创建自动化后，必须通过编辑其属性并向其添加操作来对其进行配置。

**创建自动化**

1. 如有必要，请导航到应用程序的应用程序工作室。

1. 选择**自动化**选项卡。

1. 如果您没有自动化，请在画布中选择 **\$1 添加自动化**。否则，在左侧的 “**自动化**” 菜单中，选择 **\$1** 添加。

1. 将创建一个新的自动化，您可以开始编辑其属性或添加和配置操作来定义应用程序的业务逻辑。

## 查看或编辑自动化属性
<a name="automations-edit"></a>

使用以下步骤查看或编辑自动化属性。

**查看或编辑自动化属性**

1. 如有必要，请导航到应用程序的应用程序工作室。

1. 选择**自动化**选项卡。

1. **在左侧的 “**自动化**” 菜单中，选择要查看或编辑其属性的自动化以打开右侧的 “属性” 菜单。**

1. 在 “**属性**” 菜单中，您可以查看以下属性：
   + **自动化标识符**：自动化的唯一名称。要对其进行编辑，请在文本字段中输入新的标识符。
   + **自动化参数**：自动化参数用于将动态值从应用程序的界面传递给自动化和数据操作。要添加参数，请选择 **\$1 添加**。选择铅笔图标可更改参数的名称、描述或类型。要移除参数，请选择垃圾桶图标。
**提示**  
您也可以直接从画布添加自动化参数。
   + **自动化输出**：自动化输出用于配置哪些自动化数据可以在其他自动化或组件中引用。默认情况下，自动化不会创建输出。要添加自动化输出，请选择 **\$1 添加**。要删除输出，请选择垃圾桶图标。

1. 您可以通过添加和配置操作来定义自动化的用途。有关操作的更多信息，请参阅[添加、编辑和删除自动化操作](automations-actions-add-edit-delete.md)和[自动化操作参考](automations-actions-reference.md)。

## 删除自动化
<a name="automations-delete"></a>

使用以下步骤删除 App Studio 应用程序中的自动化。

**删除自动化**

1. 如有必要，请导航到应用程序的应用程序工作室。

1. 选择**自动化**选项卡。

1. **在左侧的 “**自动化**” 菜单中，选择要删除的自动化的省略号菜单，然后选择 “删除”。**或者，您可以从自动化右侧的 “**属性**” 菜单中选择垃圾桶图标。

1. 在确认对话框中，选择**删除**。

# 添加、编辑和删除自动化操作
<a name="automations-actions-add-edit-delete"></a>

自动化操作，通常称为**操作**，是构成自动化的单个逻辑步骤。每个操作都会执行特定的任务，无论是发送电子邮件、创建数据记录、调用 Lambda 函数还是调用。 APIs操作可通过操作库添加到自动化中，并且可以分组为条件语句或循环。

**Contents**
+ [添加自动化操作](#automations-actions-add)
+ [查看和编辑自动化操作属性](#automations-actions-edit)
+ [删除自动化操作](#automations-actions-delete)

## 添加自动化操作
<a name="automations-actions-add"></a>

使用以下步骤向 App Studio 应用程序中的自动化添加操作。

**添加自动化操作**

1. 如有必要，请导航到应用程序的应用程序工作室。

1. 选择**自动化**选项卡。

1. 在左侧的 “**自动化**” 菜单中，选择要向其添加操作的自动化。

1. 在右侧的 “**操作**” 菜单中，选择要添加的动作，或者将该动作拖放到画布中。创建动作后，您可以选择动作来配置动作属性以定义动作的功能。有关操作属性及其配置的更多信息，请参阅[自动化操作参考](automations-actions-reference.md)。

## 查看和编辑自动化操作属性
<a name="automations-actions-edit"></a>

使用以下步骤在 App Studio 应用程序中查看或编辑自动化操作的属性。

**查看或编辑自动化操作属性**

1. 如有必要，请导航到应用程序的应用程序工作室。

1. 选择**自动化**选项卡。

1. 在左侧的 “**自动化**” 菜单中，选择要查看或编辑属性的操作。或者，您可以在查看包含该操作的自动化时在画布中选择操作。

1. 可以在右侧的 “属性” 菜单中查看或编辑操作**属性**。每种动作类型的动作属性都不同。有关操作属性及其配置的更多信息，请参阅[自动化操作参考](automations-actions-reference.md)。

## 删除自动化操作
<a name="automations-actions-delete"></a>

使用以下步骤从 App Studio 应用程序的自动化中删除操作。

**删除自动化操作**

1. 如有必要，请导航到应用程序的应用程序工作室。

1. 选择**自动化**选项卡。

1. 在左侧的 “**自动化**” 菜单中，选择包含要删除的操作的自动化。

1. 在画布中，选择要删除的动作中的垃圾桶图标，然后选择**删除**。

# 自动化操作参考
<a name="automations-actions-reference"></a>

以下是 App Studio 中使用的自动化操作的参考文档。

自动化操作，通常称为**操作**，是构成自动化的单个逻辑步骤。每个操作都会执行特定的任务，无论是发送电子邮件、创建数据记录、调用 Lambda 函数还是调用。 APIs操作通过操作库添加到自动化中，并且可以分组为条件语句或循环。

有关创建和配置自动化及其操作的信息，请参阅中的主题。[自动化和操作：定义应用程序的业务逻辑](automations.md)

## 调用 API
<a name="automations-actions-reference-invoke-API"></a>

调用 HTTP REST API 请求。构建者可以使用此操作将请求从 App Studio 发送到其他系统或服务 APIs。例如，您可以使用它连接到第三方系统或本土应用程序以访问关键业务数据，或者调用 App Studio 专用 App Studio 操作无法调用的 API 端点。

有关 REST 的更多信息 APIs，请参阅[什么是 RESTful API？](https://aws.amazon.com/what-is/restful-api/) 。

### Properties
<a name="automations-actions-reference-invoke-API-properties"></a>

#### Connector
<a name="automations-actions-reference-invoke-API-properties-connector"></a>

用于此操作发出的 API 请求的**连接器**。连接器下拉列表仅包含以下类型的连接器：`API Connector`和`OpenAPI Connector`。根据连接器的配置方式，它可能包含重要信息，例如凭据和默认标头或查询参数。

有关 API 连接器的更多信息，包括使用`API Connector`和之间的比较`OpenAPI Connector`，请参阅[Connect 连接到第三方服务](add-connector-third-party.md)。

#### API 请求配置属性
<a name="automations-actions-reference-invoke-API-properties-request-config"></a>

从属性面板中选择**配置 API 请求**以打开请求配置对话框。如果选择了 **API 连接器**，则对话框将包含连接器信息。

**方法：**API 调用的方法。可能值如下所示：
+ `DELETE`：删除指定资源。
+ `GET`：检索信息或数据。
+ `HEAD`：仅检索不带正文的响应标头。
+ `POST`：提交待处理的数据。
+ `PUSH`：提交待处理的数据。
+ `PATCH`：部分更新指定资源。

**路径：**资源的相对路径。

**标头：**与 API 请求一起发送的键值对形式的任何标头。如果选择了连接器，则其配置的标头将自动添加且无法删除。无法编辑配置的标题，但您可以通过添加另一个同名的标题来覆盖它们。

**查询参数：**任何要与 API 请求一起发送的键值对形式的查询参数。如果选择了连接器，则会自动添加其配置的查询参数，且无法对其进行编辑或删除。

**正文：**与 API 请求一起发送的信息，采用 JSON 格式。没有受理`GET`请求的机构。

#### 模拟输出
<a name="automations-actions-reference-invoke-API-properties-mocked-output"></a>

在预览环境中，操作不会与外部服务或资源交互。**Mocked 输出**字段用于提供一个 JSON 表达式，该表达式可模拟连接器在预览环境中的行为，以用于测试目的。此代码段存储在操作`results`的地图中，就像连接器响应在实时环境中发布的应用程序一样。

使用此字段，您可以测试各种场景及其对自动化中其他操作的影响，例如模拟不同的结果值、错误场景、边缘案例或不愉快的路径，而无需通过连接器与外部服务进行通信。

## 调用 AWS
<a name="automations-actions-reference-invoke-aws"></a>

从服务调用操作。 AWS 这是调用 AWS 服务或操作的一般操作，如果没有针对所需 AWS 服务或操作的专用操作，则应使用此操作。

### Properties
<a name="automations-actions-reference-invoke-aws-properties"></a>

#### 服务
<a name="automations-actions-reference-invoke-aws-properties-service"></a>

包含要运行的操作的 AWS 服务。

#### 操作
<a name="automations-actions-reference-invoke-aws-properties-operation"></a>

要运行的操作。

#### Connector
<a name="automations-actions-reference-invoke-aws-properties-connector"></a>

用于此操作运行的操作的连接器。配置的连接器应使用运行操作的正确凭据以及其他配置信息（例如包含操作中引用的任何资源的 AWS 区域）进行设置。

#### 配置
<a name="automations-actions-reference-invoke-aws-properties-configuration"></a>

运行指定操作时的 JSON 输入。有关配置 AWS 操作输入的更多信息，请参阅[适用于 JavaScript 的 AWS SDK](https://docs.aws.amazon.com/sdk-for-javascript)。

## 调用 Lambda
<a name="automations-actions-reference-invoke-lambda"></a>

调用现有的 Lambda 函数。

### Properties
<a name="automations-actions-reference-invoke-lambda-properties"></a>

#### Connector
<a name="automations-actions-reference-invoke-lambda-properties-connector"></a>

用于此操作运行的 Lambda 函数的连接器。配置的连接器应使用访问 Lambda 函数的正确凭证以及其他配置信息（例如包含 Lambda 函数的 AWS 区域）进行设置。有关为 Lambda 配置连接器的更多信息，请参阅。[步骤 3：创建 Lambda 连接器](connectors-lambda.md#connectors-lambda-create-connector)

#### 函数名称
<a name="automations-actions-reference-invoke-lambda-properties-function-name"></a>

要运行的 Lambda 函数的名称。请注意，这是函数名称，而不是函数 ARN（Amazon 资源名称）。

#### 函数事件
<a name="automations-actions-reference-invoke-lambda-properties-function-event"></a>

要作为事件负载传递给 Lambda 函数的键值对。

#### 模拟输出
<a name="automations-actions-reference-invoke-lambda-properties-mocked-output"></a>

在预览环境中，操作不会与外部服务或资源交互。**Mocked 输出**字段用于提供一个 JSON 表达式，该表达式可模拟连接器在预览环境中的行为，以用于测试目的。此代码段存储在操作`results`的地图中，就像连接器响应在实时环境中发布的应用程序一样。

使用此字段，您可以测试各种场景及其对自动化中其他操作的影响，例如模拟不同的结果值、错误场景、边缘案例或不愉快的路径，而无需通过连接器与外部服务进行通信。

## 循环
<a name="automations-actions-reference-loop"></a>

重复运行嵌套操作以遍历项目列表，一次只能遍历一个项目。例如，将该[创建记录](#automations-actions-reference-create-record)操作添加到循环操作中以创建多条记录。

循环操作可以嵌套在其他循环或条件动作中。循环操作是按顺序运行的，而不是并行运行的。循环中每个操作的结果只能访问同一循环迭代中的后续操作。不能在循环之外或循环的不同迭代中访问它们。

### Properties
<a name="automations-actions-reference-loop-properties"></a>

#### 来源
<a name="automations-actions-reference-loop-properties-source"></a>

要迭代的项目列表，一次只能遍历一项。源可以是先前操作的结果，也可以是您可以使用 JavaScript 表达式提供的字符串、数字或对象的静态列表。

##### 示例
<a name="automations-actions-reference-loop-properties-source-examples"></a>

以下列表包含源输入的示例。
+ 先前操作的结果：`{{results.actionName.data}}`
+ 数字清单：`{{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}}`
+ 字符串列表：`{{["apple", "banana", "orange", "grape", "kiwi"]}}`
+ 计算值：`{{params.actionName.split("\n")}}`

#### 当前项目名称
<a name="automations-actions-reference-loop-properties-function-name"></a>

可用于引用当前正在迭代的项目的变量名称。当前项目名称是可配置的，因此您可以嵌套两个或多个循环并访问每个循环中的变量。例如，如果您要使用两个环路循环遍历国家和城市，则可以配置并引用`currentCountry`和`currentCity`。

## 条件
<a name="automations-actions-reference-condition"></a>

根据自动化运行时评估的一个或多个指定逻辑条件的结果运行操作。条件动作由以下组件组成：
+ 一个*条件*字段，用于提供计算结果为`true`或`false`的 JavaScript 表达式。
+ 一个*真正的分支*，其中包含条件计算结果为时运行的操作。`true`
+ 一个 *false 分支*，其中包含条件计算结果为时运行的操作。`false`

通过将动作拖动到条件动作中，为真分支和假分支添加动作。

### Properties
<a name="automations-actions-reference-condition-properties"></a>

#### 条件
<a name="automations-actions-reference-condition-properties-condition"></a>

操作运行时要评估的 JavaScript 表达式。

## 创建记录
<a name="automations-actions-reference-create-record"></a>

在现有 App Studio 实体中创建一条记录。

### Properties
<a name="automations-actions-reference-create-record-properties"></a>

#### 实体
<a name="automations-actions-reference-create-record-properties-entity"></a>

要在其中创建记录的实体。选择实体后，必须向该实体的字段中添加值才能创建记录。字段的类型以及字段是必填字段还是可选字段都是在实体中定义的。

## 更新记录
<a name="automations-actions-reference-update-record"></a>

更新 App Studio 实体中的现有记录。

### Properties
<a name="automations-actions-reference-update-record-properties"></a>

#### 实体
<a name="automations-actions-reference-update-record-properties-entity"></a>

包含要更新的记录的实体。

#### Conditions
<a name="automations-actions-reference-update-record-properties-conditions"></a>

定义操作更新哪些记录的标准。您可以对条件进行分组以创建一条逻辑语句。您可以将组或条件与`AND`或`OR`语句合并。

#### 字段
<a name="automations-actions-reference-update-record-properties-fields"></a>

条件指定的记录中要更新的字段。

#### 值
<a name="automations-actions-reference-update-record-properties-values"></a>

指定字段中要更新的值。

## 删除记录
<a name="automations-actions-reference-delete-record"></a>

从 App Studio 实体中删除一条记录。

### Properties
<a name="automations-actions-reference-delete-record-properties"></a>

#### 实体
<a name="automations-actions-reference-delete-record-properties-entity"></a>

包含要删除的记录的实体。

#### Conditions
<a name="automations-actions-reference-delete-record-properties-conditions"></a>

定义操作删除哪些记录的标准。您可以对条件进行分组以创建一条逻辑语句。您可以将组或条件与`AND`或`OR`语句合并。

## 调用数据操作
<a name="automations-actions-reference-invoke-data-action"></a>

使用可选参数运行数据操作。

### Properties
<a name="automations-actions-reference-invoke-data-action-properties"></a>

#### 数据操作
<a name="automations-actions-reference-invoke-data-action-properties-data-action"></a>

该操作要运行的数据操作。

#### 参数
<a name="automations-actions-reference-invoke-data-action-properties-parameters"></a>

数据操作要使用的数据操作参数。数据操作参数用于发送用作数据操作输入的值。配置自动化操作时可以添加数据操作参数，但必须在 “**数据**” 选项卡中进行编辑。

#### 高级设置
<a name="automations-actions-reference-invoke-data-action-properties-advanced-settings"></a>

该`Invoke data action`操作包含以下高级设置：
+ **页面大小：**每次查询中要提取的最大记录数。默认值为 500，最大值为 3000。
+ **分页令牌：**用于从查询中获取其他记录的标记。例如，如果设置`Page size`为 500，但有超过 500 条记录，则将分页令牌传递给后续查询将获取接下来的 500 条记录。如果不再存在记录或页面，则标记将处于未定义状态。

## 亚马逊 S3：放置对象
<a name="automations-actions-reference-s3-put-object"></a>

使用`Amazon S3 PutObject`操作将由密钥（文件路径）标识的对象添加到指定的 Amazon S3 存储桶。

### Properties
<a name="automations-actions-reference-s3-put-object-properties"></a>

#### Connector
<a name="automations-actions-reference-s3-put-object-properties-connector"></a>

用于此操作运行的操作的连接器。应使用运行操作的相应凭据以及其他配置信息（例如包含操作中引用的任何资源的 AWS 区域）来设置已配置的连接器。

#### 配置
<a name="automations-actions-reference-s3-put-object-properties-configuration"></a>

要在`PutObject`命令中使用的必需选项。这些方法如下所示：

**注意**  
有关`Amazon S3 PutObject`操作的更多信息，请参阅[PutObject](https://docs.aws.amazon.com/AmazonS3/latest/API/API_PutObject.html)《*亚马逊简单存储服务 API 参考*》。
+ **存储桶：**用于放置对象的 Amazon S3 存储桶的名称。
+ **密钥：**要放入 Amazon S3 存储桶的对象的唯一名称。
+ **正文：**要放入 Amazon S3 存储桶的数据元的内容。

#### 模拟输出
<a name="automations-actions-reference-s3-put-object-properties-mocked-output"></a>

在预览环境中，操作不会与外部服务或资源交互。**Mocked 输出**字段用于提供一个 JSON 表达式，该表达式可模拟连接器在预览环境中的行为，以用于测试目的。此代码段存储在操作`results`的地图中，就像连接器响应在实时环境中发布的应用程序一样。

使用此字段，您可以测试各种场景及其对自动化中其他操作的影响，例如模拟不同的结果值、错误场景、边缘案例或不愉快的路径，而无需通过连接器与外部服务进行通信。

## 亚马逊 S3：删除对象
<a name="automations-actions-reference-s3-delete-object"></a>

使用`Amazon S3 DeleteObject`操作从指定的 Amazon S3 存储桶中删除由密钥（文件路径）标识的对象。

### Properties
<a name="automations-actions-reference-s3-delete-object-properties"></a>

#### Connector
<a name="automations-actions-reference-s3-delete-object-properties-connector"></a>

用于此操作运行的操作的连接器。配置的连接器应使用运行操作的正确凭据以及其他配置信息（例如包含操作中引用的任何资源的 AWS 区域）进行设置。

#### 配置
<a name="automations-actions-reference-s3-delete-object-properties-configuration"></a>

要在`DeleteObject`命令中使用的必需选项。这些方法如下所示：

**注意**  
有关`Amazon S3 DeleteObject`操作的更多信息，请参阅[DeleteObject](https://docs.aws.amazon.com/AmazonS3/latest/API/API_DeleteObject.html)《*亚马逊简单存储服务 API 参考*》。
+ **存储桶：**要从中删除对象的 Amazon S3 存储桶的名称。
+ **密钥：**要从 Amazon S3 存储桶中删除的对象的唯一名称。

#### 模拟输出
<a name="automations-actions-reference-s3-delete-object-properties-mocked-output"></a>

在预览环境中，操作不会与外部服务或资源交互。**Mocked 输出**字段用于提供一个 JSON 表达式，该表达式可模拟连接器在预览环境中的行为，以用于测试目的。此代码段存储在操作`results`的地图中，就像连接器响应在实时环境中发布的应用程序一样。

使用此字段，您可以测试各种场景及其对自动化中其他操作的影响，例如模拟不同的结果值、错误场景、边缘案例或不愉快的路径，而无需通过连接器与外部服务进行通信。

## 亚马逊 S3：获取对象
<a name="automations-actions-reference-s3-get-object"></a>

使用`Amazon S3 GetObject`操作从指定的 Amazon S3 存储桶中检索由密钥（文件路径）标识的对象。

### Properties
<a name="automations-actions-reference-s3-get-object-properties"></a>

#### Connector
<a name="automations-actions-reference-s3-get-object-properties-connector"></a>

用于此操作运行的操作的连接器。配置的连接器应使用运行操作的正确凭据以及其他配置信息（例如包含操作中引用的任何资源的 AWS 区域）进行设置。

#### 配置
<a name="automations-actions-reference-s3-get-object-properties-configuration"></a>

要在`GetObject`命令中使用的必需选项。这些方法如下所示：

**注意**  
有关`Amazon S3 GetObject`操作的更多信息，请参阅[GetObject](https://docs.aws.amazon.com/AmazonS3/latest/API/API_GetObject.html)《*亚马逊简单存储服务 API 参考*》。
+ **存储桶：**要从中检索对象的 Amazon S3 存储桶的名称。
+ **密钥：**要从 Amazon S3 存储桶中检索的对象的唯一名称。

#### 模拟输出
<a name="automations-actions-reference-s3-get-object-properties-mocked-output"></a>

在预览环境中，操作不会与外部服务或资源交互。**Mocked 输出**字段用于提供一个 JSON 表达式，该表达式可模拟连接器在预览环境中的行为，以用于测试目的。此代码段存储在操作`results`的地图中，就像连接器响应在实时环境中发布的应用程序一样。

使用此字段，您可以测试各种场景及其对自动化中其他操作的影响，例如模拟不同的结果值、错误场景、边缘案例或不愉快的路径，而无需通过连接器与外部服务进行通信。

## 亚马逊 S3：列出对象
<a name="automations-actions-reference-s3-list-objects"></a>

使用`Amazon S3 ListObjects`操作列出指定 Amazon S3 存储桶中的对象。

### Properties
<a name="automations-actions-reference-s3-list-objects-properties"></a>

#### Connector
<a name="automations-actions-reference-s3-list-objects-properties-connector"></a>

用于此操作运行的操作的连接器。配置的连接器应使用运行操作的正确凭据以及其他配置信息（例如包含操作中引用的任何资源的 AWS 区域）进行设置。

#### 配置
<a name="automations-actions-reference-s3-list-objects-properties-configuration"></a>

要在`ListObjects`命令中使用的必需选项。这些方法如下所示：

**注意**  
有关`Amazon S3 ListObjects`操作的更多信息，请参阅[ListObjects](https://docs.aws.amazon.com/AmazonS3/latest/API/API_ListObjects.html)《*亚马逊简单存储服务 API 参考*》。
+ **存储桶：**用于列出对象的 Amazon S3 存储桶的名称。

#### 模拟输出
<a name="automations-actions-reference-s3-list-objects-properties-mocked-output"></a>

在预览环境中，操作不会与外部服务或资源交互。**Mocked 输出**字段用于提供一个 JSON 表达式，该表达式可模拟连接器在预览环境中的行为，以用于测试目的。此代码段存储在操作`results`的地图中，就像连接器响应在实时环境中发布的应用程序一样。

使用此字段，您可以测试各种场景及其对自动化中其他操作的影响，例如模拟不同的结果值、错误场景、边缘案例或不愉快的路径，而无需通过连接器与外部服务进行通信。

## Amazon Textract：分析文档
<a name="automations-actions-reference-textract-analyze-document"></a>

使用`Amazon Textract AnalyzeDocument`操作来分析输入文档中检测到的项目之间的关系。

### Properties
<a name="automations-actions-reference-textract-analyze-document-properties"></a>

#### Connector
<a name="automations-actions-reference-textract-analyze-document-properties-connector"></a>

用于此操作运行的操作的连接器。配置的连接器应使用运行操作的正确凭据以及其他配置信息（例如包含操作中引用的任何资源的 AWS 区域）进行设置。

#### 配置
<a name="automations-actions-reference-textract-analyze-document-properties-configuration"></a>

要在`AnalyzeDocument`命令中使用的请求内容。这些方法如下所示：

**注意**  
有关`Amazon Textract AnalyzeDocument`操作的更多信息，请参阅 [AnalyzeDocument](https://docs.aws.amazon.com/textract/latest/dg/API_AnalyzeDocument.html)*Amazon Textract 开发者指南*。
+ **文档/S3Object/Bucket：亚马逊 S3 存储桶**的名称。如果使用 **S3 上传**组件将文件传递给操作，则此参数可以留空。
+ **文档/S3Object/名称：**输入文档的文件名。如果使用 **S3 上传**组件将文件传递给操作，则此参数可以留空。
+ **文档/S3Object/版本：**如果 Amazon S3 存储桶启用了版本控制，则可以指定对象的版本。如果使用 **S3 上传**组件将文件传递给操作，则此参数可以留空。
+ **FeatureTypes：**要执行的分析类型列表。有效值为：`TABLES`、`FORMS`、`QUERIES`、`SIGNATURES` 和 `LAYOUT`。

#### 模拟输出
<a name="automations-actions-reference-textract-analyze-document-properties-mocked-output"></a>

在预览环境中，操作不会与外部服务或资源交互。**Mocked 输出**字段用于提供一个 JSON 表达式，该表达式可模拟连接器在预览环境中的行为，以用于测试目的。此代码段存储在操作`results`的地图中，就像连接器响应在实时环境中发布的应用程序一样。

使用此字段，您可以测试各种场景及其对自动化中其他操作的影响，例如模拟不同的结果值、错误场景、边缘案例或不愉快的路径，而无需通过连接器与外部服务进行通信。

## Amazon Textract：分析支出
<a name="automations-actions-reference-textract-analyze-expense"></a>

使用`Amazon Textract AnalyzeExpense`操作来分析输入文档，了解文本之间与财务相关的关系。

### Properties
<a name="automations-actions-reference-textract-analyze-expense-properties"></a>

#### Connector
<a name="automations-actions-reference-textract-analyze-expense-properties-connector"></a>

用于此操作运行的操作的连接器。配置的连接器应使用运行操作的正确凭据以及其他配置信息（例如包含操作中引用的任何资源的 AWS 区域）进行设置。

#### 配置
<a name="automations-actions-reference-textract-analyze-expense-properties-configuration"></a>

要在`AnalyzeExpense`命令中使用的请求内容。这些方法如下所示：

**注意**  
有关`Amazon Textract AnalyzeExpense`操作的更多信息，请参阅 [AnalyzeExpense](https://docs.aws.amazon.com/textract/latest/dg/API_AnalyzeExpense.html)*Amazon Textract 开发者指南*。
+ **文档/S3Object/Bucket：亚马逊 S3 存储桶**的名称。如果使用 **S3 上传**组件将文件传递给操作，则此参数可以留空。
+ **文档/S3Object/名称：**输入文档的文件名。如果使用 **S3 上传**组件将文件传递给操作，则此参数可以留空。
+ **文档/S3Object/版本：**如果 Amazon S3 存储桶启用了版本控制，则可以指定对象的版本。如果使用 **S3 上传**组件将文件传递给操作，则此参数可以留空。

#### 模拟输出
<a name="automations-actions-reference-textract-analyze-expense-properties-mocked-output"></a>

在预览环境中，操作不会与外部服务或资源交互。**Mocked 输出**字段用于提供一个 JSON 表达式，该表达式可模拟连接器在预览环境中的行为，以用于测试目的。此代码段存储在操作`results`的地图中，就像连接器响应在实时环境中发布的应用程序一样。

使用此字段，您可以测试各种场景及其对自动化中其他操作的影响，例如模拟不同的结果值、错误场景、边缘案例或不愉快的路径，而无需通过连接器与外部服务进行通信。

## Amazon Textract：分析身份证
<a name="automations-actions-reference-textract-analyze-id"></a>

使用该`Amazon Textract AnalyzeID`操作来分析身份证件以获取相关信息。

### Properties
<a name="automations-actions-reference-textract-analyze-id-properties"></a>

#### Connector
<a name="automations-actions-reference-textract-analyze-id-properties-connector"></a>

用于此操作运行的操作的连接器。配置的连接器应使用运行操作的正确凭据以及其他配置信息（例如包含操作中引用的任何资源的 AWS 区域）进行设置。

#### 配置
<a name="automations-actions-reference-textract-analyze-id-properties-configuration"></a>

要在`AnalyzeID`命令中使用的请求内容。这些方法如下所示：

**注意**  
有关该`Amazon Textract AnalyzeID`操作的更多信息，请参阅*亚马逊 Textrac* t 开发者[指南中的 analyzeID](https://docs.aws.amazon.com/textract/latest/dg/API_AnalyzeID.html)。
+ **文档/S3Object/Bucket：亚马逊 S3 存储桶**的名称。如果使用 **S3 上传**组件将文件传递给操作，则此参数可以留空。
+ **文档/S3Object/名称：**输入文档的文件名。如果使用 **S3 上传**组件将文件传递给操作，则此参数可以留空。
+ **文档/S3Object/版本：**如果 Amazon S3 存储桶启用了版本控制，则可以指定对象的版本。如果使用 **S3 上传**组件将文件传递给操作，则此参数可以留空。

#### 模拟输出
<a name="automations-actions-reference-textract-analyze-id-properties-mocked-output"></a>

在预览环境中，操作不会与外部服务或资源交互。**Mocked 输出**字段用于提供一个 JSON 表达式，该表达式可模拟连接器在预览环境中的行为，以用于测试目的。此代码段存储在操作`results`的地图中，就像连接器响应在实时环境中发布的应用程序一样。

使用此字段，您可以测试各种场景及其对自动化中其他操作的影响，例如模拟不同的结果值、错误场景、边缘案例或不愉快的路径，而无需通过连接器与外部服务进行通信。

## Amazon Textract：检测文档文本
<a name="automations-actions-reference-textract-detect-document-text"></a>

使用该`Amazon Textract DetectDocumentText`操作来检测输入文档中的文本行和构成一行文本的单词。

### Properties
<a name="automations-actions-reference-textract-detect-document-text-properties"></a>

#### Connector
<a name="automations-actions-reference-textract-detect-document-text-properties-connector"></a>

用于此操作运行的操作的连接器。配置的连接器应使用运行操作的正确凭据以及其他配置信息（例如包含操作中引用的任何资源的 AWS 区域）进行设置。

#### 配置
<a name="automations-actions-reference-textract-detect-document-text-properties-configuration"></a>

要在`DetectDocumentText`命令中使用的请求内容。这些方法如下所示：

**注意**  
有关`Amazon Textract DetectDocumentText`操作的更多信息，请参阅 [DetectDocumentText](https://docs.aws.amazon.com/textract/latest/dg/API_DetectDocumentText.html)*Amazon Textract 开发者指南*。
+ **文档/S3Object/Bucket：亚马逊 S3 存储桶**的名称。如果使用 **S3 上传**组件将文件传递给操作，则此参数可以留空。
+ **文档/S3Object/名称：**输入文档的文件名。如果使用 **S3 上传**组件将文件传递给操作，则此参数可以留空。
+ **文档/S3Object/版本：**如果 Amazon S3 存储桶启用了版本控制，则可以指定对象的版本。如果使用 **S3 上传**组件将文件传递给操作，则此参数可以留空。

#### 模拟输出
<a name="automations-actions-reference-textract-detect-document-text-properties-mocked-output"></a>

在预览环境中，操作不会与外部服务或资源交互。**Mocked 输出**字段用于提供一个 JSON 表达式，该表达式可模拟连接器在预览环境中的行为，以用于测试目的。此代码段存储在操作`results`的地图中，就像连接器响应在实时环境中发布的应用程序一样。

使用此字段，您可以测试各种场景及其对自动化中其他操作的影响，例如模拟不同的结果值、错误场景、边缘案例或不愉快的路径，而无需通过连接器与外部服务进行通信。

## 亚马逊 Bedrock：GenAI Prompt
<a name="automations-actions-reference-bedrock-prompt"></a>

使用 [Amazon Bedrock InvokeModel](https://docs.aws.amazon.com/bedrock/latest/APIReference/API_runtime_InvokeModel.html) 操作使用操作属性中提供的提示和推理参数运行推理。该操作可以生成文本、图像和嵌入内容。

### Properties
<a name="automations-actions-reference-bedrock-prompt-properties"></a>

#### Connector
<a name="automations-actions-reference-bedrock-prompt-properties-connector"></a>

用于此操作运行的操作的连接器。要成功使用此操作，必须将连接器配置为 **Amazon Bedrock Runtime** 作为服务。配置的连接器应使用运行操作的正确凭据以及其他配置信息（例如包含操作中引用的任何资源的 AWS 区域）进行设置。

#### 模型
<a name="automations-actions-reference-bedrock-prompt-properties-model"></a>

Amazon Bedrock 用于处理请求的基础模型。有关亚马逊 Bedrock 中模型的更多信息，请参阅[亚马逊 Bedrock 用户指南中的*亚马逊 Bedrock* 基础模型信息](https://docs.aws.amazon.com/bedrock/latest/userguide/foundation-models-reference.html)。

#### 输入类型
<a name="automations-actions-reference-bedrock-prompt-properties-input-type"></a>

输入的输入类型将发送到 Amazon Bedrock 模型。可能的值为 “**文本**”、“**文档**” 和 “**图像**”。如果输入类型不可选，则配置的模型可能不支持该类型。

#### 用户提示
<a name="automations-actions-reference-bedrock-prompt-properties-user-prompt"></a>

要发送给 Amazon Bedrock 模型的提示，以进行处理以生成响应。您可以输入静态文本，也可以传入来自应用程序其他部分的输入，例如使用参数的组件、自动化中的先前操作或其他自动化。以下示例说明如何传入来自组件或先前操作的值：
+ 要使用参数从组件传递值，请执行以下操作：`{{params.paramName}}`
+ 要传递先前操作中的值，请执行以下操作：`{{results.actionName}}`

#### 系统提示符（克劳德模型）
<a name="automations-actions-reference-bedrock-prompt-properties-system-prompt"></a>

Amazon Bedrock 模型在处理请求时要使用的系统提示。系统提示符用于为 Claude 模型提供上下文、说明或指南。

#### 请求设置
<a name="automations-actions-reference-bedrock-prompt-properties-request-settings"></a>

配置各种请求设置和模型推理参数。您可以配置以下设置：
+ **温度**：Amazon Bedrock 模型在处理请求时使用的温度。温度决定了 Bedrock 模型输出的随机性或创造力。温度越高，反应的创造性就越强，分析性就越低。可能的值是`[0-10]`。
+ **最大代币**数量：限制 Amazon Bedrock 模型的输出长度。
+ **TopP****：在 nucleus 采样中，模型按概率递减顺序计算每个后续代币在所有期权上的累积分布，并在其达到 TopP 指定的特定概率后将其切断。**你应该改变**温度**或 **TopP**，但不能两者兼而有之
+ **停止序**列：导致模型停止处理请求和生成输出的序列。

有关更多信息，请参阅 *Amazon Bedrock 用户*指南中的[基础模型的推理请求参数和响应字段](https://docs.aws.amazon.com/bedrock/latest/userguide/model-parameters.html)。

#### 停止序列
<a name="automations-actions-reference-bedrock-prompt-properties-guardrail"></a>

**输入 Amazon Bedrock Guardrail **ID** 和版本。**护栏用于根据您的用例和负责任的人工智能政策实施保障措施。*有关更多信息，请参阅《亚马逊 Bedrock [用户指南》中的使用 Amazon Bedrock Guardrails 阻止模型中的有害内容](https://docs.aws.amazon.com/bedrock/latest/userguide/guardrails.html)。*

#### 模拟输出
<a name="automations-actions-reference-bedrock-prompt-properties-mocked-output"></a>

在预览环境中，操作不会与外部服务或资源交互。**Mocked 输出**字段用于提供一个 JSON 表达式，该表达式可模拟连接器在预览环境中的行为，以用于测试目的。此代码段存储在操作`results`的地图中，就像连接器响应在实时环境中发布的应用程序一样。

使用此字段，您可以测试各种场景及其对自动化中其他操作的影响，例如模拟不同的结果值、错误场景、边缘案例或不愉快的路径，而无需通过连接器与外部服务进行通信。

## Amazon Bedrock：调用模型
<a name="automations-actions-reference-bedrock-invoke-model"></a>

使用 [Amazon Bedrock InvokeModel](https://docs.aws.amazon.com/bedrock/latest/APIReference/API_runtime_InvokeModel.html) 操作使用请求正文中提供的提示和推理参数运行推理。您可以使用模型推理来生成文本、图像和嵌入内容。

### Properties
<a name="automations-actions-reference-bedrock-invoke-model-properties"></a>

#### Connector
<a name="automations-actions-reference-bedrock-invoke-model-properties-connector"></a>

用于此操作运行的操作的连接器。要成功使用此操作，必须将连接器配置为 **Amazon Bedrock Runtime** 作为服务。配置的连接器应使用运行操作的正确凭据以及其他配置信息（例如包含操作中引用的任何资源的 AWS 区域）进行设置。

#### 配置
<a name="automations-actions-reference-bedrock-invoke-model-properties-configuration"></a>

要在`InvokeModel`命令中使用的请求内容。

**注意**  
有关`Amazon Bedrock InvokeModel`操作的更多信息，包括示例命令，请参阅 *Amazon Bedrock API 参考[InvokeModel](https://docs.aws.amazon.com/textract/latest/dg/API_DetectDocumentText.html)*中的。

#### 模拟输出
<a name="automations-actions-reference-bedrock-invoke-model-properties-mocked-output"></a>

在预览环境中，操作不会与外部服务或资源交互。**Mocked 输出**字段用于提供一个 JSON 表达式，该表达式可模拟连接器在预览环境中的行为，以用于测试目的。此代码段存储在操作`results`的地图中，就像连接器响应在实时环境中发布的应用程序一样。

使用此字段，您可以测试各种场景及其对自动化中其他操作的影响，例如模拟不同的结果值、错误场景、边缘案例或不愉快的路径，而无需通过连接器与外部服务进行通信。

## JavaScript
<a name="automations-actions-reference-javascript"></a>

运行自定义 JavaScript 函数以返回指定值。

**重要**  
App Studio 不支持使用第三方库或自定义 JavaScript 库。

### Properties
<a name="automations-actions-reference-javascript-properties"></a>

#### 源代码
<a name="automations-actions-reference-javascript-properties-source-code"></a>

操作要运行的 JavaScript 代码片段。

**提示**  
您可以通过执行以下步骤使用 AI 来帮助您生成 JavaScript ：  
选择展开图标以打开展开的 JavaScript 编辑器。
（可选）：启用**修改代码**开关以修改任何现有代码 JavaScript。否则，人工智能将取代任何现有 JavaScript的。
在 “**生成**” 中 JavaScript，描述你要用什么来做 JavaScript，例如：**Add two numbers**。
选择发送图标以生成您的 JavaScript.

## 调用自动化
<a name="automations-actions-reference-invoke-automation"></a>

运行指定的自动化。

### Properties
<a name="automations-actions-reference-invoke-automation-properties"></a>

#### 调用自动化
<a name="automations-actions-reference-invoke-automation-properties-invoke-automation"></a>

要由操作运行的自动化。

## 发送电子邮件
<a name="automations-actions-reference-send-email"></a>

使用`Amazon SES SendEmail`操作发送电子邮件。

### Properties
<a name="automations-actions-reference-send-email-properties"></a>

#### Connector
<a name="automations-actions-reference-send-email-properties-connector"></a>

用于此操作运行的操作的连接器。配置的连接器应使用运行操作的正确凭据以及其他配置信息（例如包含操作中引用的任何资源的 AWS 区域）进行设置。

#### 配置
<a name="automations-actions-reference-send-email-properties-configuration"></a>

要在`SendEmail`命令中使用的请求内容。这些方法如下所示：

**注意**  
有关该`Amazon SES SendEmail`操作的更多信息，请参阅[SendEmail](https://docs.aws.amazon.com/ses/latest/APIReference-V2/API_SendEmail.html)《*亚马逊简单电子邮件服务 API 参考*》。

#### 模拟输出
<a name="automations-actions-reference-send-email-properties-mocked-output"></a>

在预览环境中，操作不会与外部服务或资源交互。**Mocked 输出**字段用于提供一个 JSON 表达式，该表达式可模拟连接器在预览环境中的行为，以用于测试目的。此代码段存储在操作`results`的地图中，就像连接器响应在实时环境中发布的应用程序一样。

使用此字段，您可以测试各种场景及其对自动化中其他操作的影响，例如模拟不同的结果值、错误场景、边缘案例或不愉快的路径，而无需通过连接器与外部服务进行通信。

# 实体和数据操作：配置应用程序的数据模型
<a name="data"></a>

**实体**是 App Studio 中的数据表。实体直接与数据源中的表交互。实体包括用于描述其中的数据的字段、用于查找和返回数据的查询以及用于将实体字段连接到数据源列的映射。

**Topics**
+ [设计数据模型时的最佳实践](data-model-best-practices.md)
+ [在 App Studio 应用程序中创建实体](data-entities-create.md)
+ [在 App Studio 应用程序中配置或编辑实体](data-entities-edit.md)
+ [删除实体](data-entities-delete.md)
+ [AWS App Studio 中的管理数据实体](managed-data-entities.md)

# 设计数据模型时的最佳实践
<a name="data-model-best-practices"></a>

使用以下最佳实践在中创建强大、可扩展且安全的关系数据模型， AWS 以便在 App Studio 应用程序中使用，该模型既要满足应用程序的要求，又能确保数据基础架构的长期可靠性和性能。
+ **选择正确 AWS 的数据服务：**根据您的要求，选择合适 AWS 的数据服务。例如，对于在线事务处理 (OLTP) 应用程序，您可以考虑使用诸如 Amazon Aurora 之类的数据库 (DB)，它是一种云原生、关系型和完全托管的数据库服务，支持 MySQL 和 PostgreSQL 等各种数据库引擎。有关 App Studio 支持的 Aurora 版本的完整列表，请参阅[连接亚马逊 Aurora](connectors-aurora.md)。另一方面，对于在线分析处理 (OLAP) 用例，可以考虑使用 Amazon Redshift，这是一个云数据仓库，可让您对非常大的数据集运行复杂查询。这些查询通常需要时间（数秒）才能完成，这使得 Amazon Redshift 不太适合需要低延迟数据访问的 OLTP 应用程序。
+ **为可扩展性而设计：**在规划数据模型时考虑未来的增长和可扩展性。在选择适当的数据服务以及数据库实例类型和配置（例如预配置容量）时，请考虑预期数据量、访问模式和性能要求等因素。
  + 有关使用 Aurora 无服务器进行扩展的更多信息，请参阅 Aurora Server [less V2 的性能和扩展](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/aurora-serverless-v2.setting-capacity.html)。
+ **标准化数据：**遵循数据库标准化原则，最大限度地减少数据冗余并提高数据完整性。这包括创建相应的表、定义主键和外键以及在实体之间建立关系。在 App Studio 中，在查询来自一个实体的数据时，您可以通过在查询中指定`join`子句来从另一个实体检索相关数据。
+ **实施适当的索引：**确定最重要的查询和访问模式，并创建适当的索引以优化性能。
+ **利用 AWS 数据服务功能：**利用您选择 AWS 的数据服务提供的功能，例如自动备份、多可用区部署和自动软件更新。
+ **保护您的数据：**实施强大的安全措施，例如 IAM (AWS Identity and Access Management) 策略，创建对表和架构具有有限权限的数据库用户，以及在静态和传输中强制加密。
+ **监控和优化性能：**持续监控数据库的性能并根据需要进行调整，例如扩展资源、优化查询或调整数据库配置。
+ **自动管理数据库：**利用 AWS Aurora Autoscaling、Performance Insights for Aurora 和 AWS Database Migration Service 等服务来自动执行数据库管理任务并减少运营开销。
+ **实施灾难恢复和备份策略：**利用 Aurora 自动备份、恢复和跨区域副本配置等功能，确保您有一个明确定义的备份和 point-in-time恢复计划。
+ **遵循 AWS 最佳实践和文档：**随时 up-to-date了解所选数据服务的最新 AWS 最佳实践、指南和文档，以确保您的数据模型和实施与 AWS 建议保持一致。

有关每种 AWS 数据服务的更多详细指导，请参阅以下主题：
+ [亚马逊 Aurora 的最佳实践](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/Aurora.BestPractices.html)
+ [亚马逊 Aurora MySQL 的最佳实践](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/AuroraMySQL.BestPractices.html)
+ [亚马逊 Redshift 查询性能调整](https://docs.aws.amazon.com/redshift/latest/dg/c-optimizing-query-performance.html)
+ [在 Amazon DynamoDB 中查询和扫描数据的最佳实践](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/bp-query-scan.html)

# 在 App Studio 应用程序中创建实体
<a name="data-entities-create"></a>

在 App Studio 应用程序中创建实体的方法有四种。以下列表包含每种方法及其优点，以及使用该方法创建和配置实体的说明的链接。
+ [从现有数据源创建实体](#data-entities-create-existing-data-source)：根据现有数据源表自动创建实体及其字段，并将这些字段映射到数据源表的列。如果您有要在 App Studio 应用程序中使用的现有数据源，则最好使用此选项。
+ [使用 App Studio 托管数据源创建实体](#data-entities-create-managed-data-source)：创建由 App Studio 为您管理的实体和一个 DynamoDB 表。当你更新实体时，DynamoDB 表会自动更新。使用此选项，您无需手动创建、管理或连接第三方数据源，也不必指定从实体字段到表列的映射。您的应用程序的所有数据建模和配置都在 App Studio 中完成。如果您不想管理自己的数据源和 DynamoDB 表，并且其功能足以满足您的应用程序的需求，则最好使用此选项。
+ [创建空实体](#data-entities-create-empty): 完全从头开始创建一个空实体。如果您没有任何由管理员创建的现有数据源或连接器，并且您想在不受外部数据源限制的情况下灵活设计应用程序的数据模型，则最好使用此选项。创建实体后，您可以将实体连接到数据源。
+ [使用 AI 创建实体](#data-entities-create-with-ai)：根据指定的实体名称生成实体、字段、数据操作和示例数据。如果您对应用程序的数据模型有所了解，但需要帮助将其转换为实体，则最好使用此选项。

## 从现有数据源创建实体
<a name="data-entities-create-existing-data-source"></a>

使用数据源中的表自动创建实体及其字段，并将实体字段映射到表的列。如果您有要在 App Studio 应用程序中使用的现有数据源，则最好使用此选项。

1. 如有必要，请导航到您的应用程序。

1. 选择画布顶部的 “**数据**” 选项卡。

1. 如果您的应用程序中没有实体，请选择 **\$1 创建实体**。否则，在左侧的**实体**菜单中，选择 **\$1 添加**。

1. 选择 “**使用现有数据源中的表**”。

1. 在 **C** onnector 中，选择包含要用于创建实体的表格的连接器。

1. 在**表格**中，选择要用于创建实体的表。

1. 选中 “**创建数据操作**” 复选框以创建数据操作。

1. 选择 **Create entity (创建实体)**。您的实体现已创建，您可以在左侧的**实体**面板中看到它。

1. 按照中的步骤配置您的新实体[在 App Studio 应用程序中配置或编辑实体](data-entities-edit.md)。请注意，由于您的实体是使用现有数据源创建的，因此已经创建了一些属性或资源，例如字段、连接的数据源和字段映射。此外，如果您在创建过程中选中了**创建数据操作复选框，则您的实体将包含数据操作**。

## 使用 App Studio 托管数据源创建实体
<a name="data-entities-create-managed-data-source"></a>

创建由 App Studio 管理的托管实体和相应的 DynamoDB 表。虽然 DynamoDB 表存在于 AWS 关联账户中，但在 App Studio 应用程序中对该实体进行更改时，DynamoDB 表会自动更新。使用此选项，您无需手动创建、管理或连接第三方数据源，也不必指定从实体字段到表列的映射。如果您不想管理自己的数据源和 DynamoDB 表，并且其功能足以满足您的应用程序的需求，则最好使用此选项。有关托管实体的更多信息，请参阅[AWS App Studio 中的管理数据实体](managed-data-entities.md)。

您可以在多个应用程序中使用相同的托管实体。有关说明，请参阅[从现有数据源创建实体](#data-entities-create-existing-data-source)。

1. 如有必要，请导航到您的应用程序。

1. 选择画布顶部的 “**数据**” 选项卡。

1. 如果您的应用程序中没有实体，请选择 **\$1 创建实体**。否则，在左侧的**实体**菜单中，选择 **\$1 添加**。

1. 选择**创建 App Studio 管理实体**。

1. 在**实体名称**中，为您的实体提供一个名称。

1. 在**主键**中，提供实体的主键的名称。主键是实体的唯一标识符，在创建实体后无法更改。

1. 在**主键数据类型**中，选择实体主键的数据类型。实体创建后无法更改数据类型。

1. 选择 **Create entity (创建实体)**。您的实体现已创建，您可以在左侧的**实体**面板中看到它。

1. 按照中的步骤配置您的新实体[在 App Studio 应用程序中配置或编辑实体](data-entities-edit.md)。请注意，由于您的实体是使用托管数据创建的，因此已经创建了一些属性或资源，例如主键字段和连接的数据源。

## 创建空实体
<a name="data-entities-create-empty"></a>

完全从头开始创建一个空实体。如果您没有任何由管理员创建的现有数据源或连接器，则最好使用此选项。创建空实体提供了灵活性，因为您可以在 App Studio 应用程序中设计实体，而不受外部数据源的限制。在设计应用程序的数据模型并相应地配置实体之后，您仍然可以将其连接到外部数据源。

1. 如有必要，请导航到您的应用程序。

1. 选择画布顶部的 “**数据**” 选项卡。

1. 如果您的应用程序中没有实体，请选择 **\$1 创建实体**。否则，在左侧的**实体**菜单中，选择 **\$1 添加**。

1. 选择 “**创建实体**”。

1. 选择 **Create entity (创建实体)**。您的实体现已创建，您可以在左侧的**实体**面板中看到它。

1. 按照中的步骤配置您的新实体[在 App Studio 应用程序中配置或编辑实体](data-entities-edit.md)。

## 使用 AI 创建实体
<a name="data-entities-create-with-ai"></a>

根据指定的实体名称生成实体、字段、数据操作和示例数据。如果您对应用程序的数据模型有所了解，但需要帮助将其转换为实体，则最好使用此选项。

1. 如有必要，请导航到您的应用程序。

1. 选择画布顶部的 “**数据**” 选项卡。

1. 如果您的应用程序中没有实体，请选择 **\$1 创建实体**。否则，在左侧的**实体**菜单中，选择 **\$1 添加**。

1. 选择 “**使用 AI 创建实体**”。

1. 在**实体名称**中，为您的实体提供一个名称。此名称用于生成实体的字段、数据操作和示例数据。

1. 选中 “**创建数据操作**” 复选框以创建数据操作。

1. 选择 “**生成实体**”。您的实体现已创建，您可以在左侧的**实体**面板中看到它。

1. 按照中的步骤配置您的新实体[在 App Studio 应用程序中配置或编辑实体](data-entities-edit.md)。请注意，由于您的实体是使用 AI 创建的，因此您的实体将已经包含生成的字段。此外，如果您在创建过程中选中了**创建数据操作复选框，则您的实体将包含数据操作**。

# 在 App Studio 应用程序中配置或编辑实体
<a name="data-entities-edit"></a>

使用以下主题在 App Studio 应用程序中配置实体。

**Topics**
+ [编辑实体名称](data-entities-edit-name.md)
+ [添加、编辑或删除实体字段](data-entities-edit-fields.md)
+ [创建、编辑或删除数据操作](data-entities-edit-data-actions.md)
+ [添加或删除示例数据](data-entities-edit-sample-data.md)
+ [添加或编辑连接的数据源和地图字段](data-entities-edit-connection.md)

# 编辑实体名称
<a name="data-entities-edit-name"></a>

1. 如有必要，请导航到要编辑的实体。

1. 在 “**配置**” 选项卡的 “**实体名称**” 中，更新实体名称，然后在文本框之外选择以保存更改。

# 添加、编辑或删除实体字段
<a name="data-entities-edit-fields"></a>

**提示**  
您可以按 CTRL\$1Z 撤消最近对实体所做的更改。

1. 如有必要，请导航到要编辑的实体。

1. 在 “**配置**” 选项卡的 “**字段**” 中，您可以查看实体字段的表。实体字段包含以下列：
   + **显示名称：**显示名称类似于表标题或表单域，可供应用程序用户查看。它可以包含空格和特殊字符，但在实体中必须是唯一的。
   + **系统名称：**系统名称是代码中用于引用字段的唯一标识符。映射到亚马逊 Redshift 表中的列时，该列必须与亚马逊 Redshift 表的列名相匹配。
   + **数据类型：**将存储在此字段中的数据类型，例如`Integer``Boolean`、或`String`。

1. 要添加字段：

   1. 要使用 AI 根据实体名称和连接的数据源生成字段，请选择**生成更多字段**。

   1. 要添加单个字段，请选择 **\$1 添加字段**。

1. 要编辑字段，请执行以下操作：

   1. 要编辑显示名称，请在**显示名称**文本框中输入所需的值。如果尚未编辑该字段的系统名称，则会将其更新为显示名称的新值。

   1. 要编辑系统名称，请在**系统名称**文本框中输入所需的值。

   1. 要编辑数据类型，请选择**数据类型**下拉菜单，然后从列表中选择所需的类型。

   1. 要编辑字段的属性，请选择该字段的齿轮图标。以下列表详细说明了字段的属性：
      + **必填**：如果您的数据源需要该字段，请启用此选项。
      + **主键**：如果字段映射到数据源中的主键，请启用此选项。
      + **唯一**：如果此字段的值必须是唯一的，请启用此选项。
      + **使用数据源默认**值：如果字段的值由数据源提供，例如使用自动增量或事件时间戳，则启用此选项。
      + **数据类型选项**：某些数据类型的字段可以配置数据类型选项，例如最小值或最大值。

1. 要删除字段，请选择要删除的字段的垃圾桶图标。

# 创建、编辑或删除数据操作
<a name="data-entities-edit-data-actions"></a>

应用程序中使用数据操作对实体的数据执行操作，例如获取所有记录或按 ID 获取记录。数据操作可用于查找和返回与指定条件相匹配的数据，以便在表格或详细视图等组件中查看。

**Contents**
+ [创建数据操作](#data-entities-data-action-add)
+ [编辑或配置数据操作](#data-entities-data-action-edit)
+ [数据操作条件运算符和示例](#data-entities-data-action-operators)
  + [数据库支持条件运算符](#data-entities-data-action-operators-support)
  + [数据操作条件示例](#data-entities-data-action-operators-examples)
+ [删除数据操作](#data-entities-data-action-delete)

## 创建数据操作
<a name="data-entities-data-action-add"></a>

**提示**  
您可以按 CTRL\$1Z 撤消最近对实体所做的更改。

1. 如有必要，请导航到要为其创建数据操作的实体。

1. 选择 “**数据操作**” 选项卡。

1. 创建数据操作的方法有两种：
   + （推荐）要使用 AI 根据您的实体名称、字段和连接的数据源为您生成数据操作，请选择**生成数据操作**。将生成以下操作：

     1. `getAll`：检索实体的所有记录。当您需要显示记录列表或同时对多条记录执行操作时，此操作非常有用。

     1. `getByID`：根据实体的唯一标识符（ID 或主键）从其检索单个记录。当您需要显示或对特定记录执行操作时，此操作非常有用。
   + 要添加单个数据操作，请选择 **\$1 添加数据操作**。

1. 要查看或配置新的数据操作，请参阅以下部分[编辑或配置数据操作](#data-entities-data-action-edit)。

## 编辑或配置数据操作
<a name="data-entities-data-action-edit"></a>

1. 如有必要，请导航到要为其创建数据操作的实体。

1. 选择 “**数据操作**” 选项卡。

1. 在**字段**中，配置查询要返回的字段。默认情况下，实体中所有已配置的字段都处于选中状态。

   您也可以通过执行以下步骤将**联接**添加到数据操作中：

   1. 选择 **\$1 添加加入**以打开一个对话框。

   1. 在**相关实体**中，选择要与当前实体联接的实体。

   1. 在**别名**中，可以选择输入相关实体的临时别名。

   1. 在**联接类型**中，选择所需的联接类型。

   1. 通过从每个实体中选择字段来定义联接子句。

   1. 选择 “**添加**” 以创建联接。

   创建后，联接将显示在 “**联接**” 部分，从而在 “**要返回的字段” 下拉列表中提供其他字段**。您可以添加多个联接，包括跨实体的链式联接。您还可以按联接实体中的字段进行筛选和排序。

   要删除联接，请选择其旁边的垃圾桶图标。这将从该联接中移除所有字段，并使用这些字段打破任何依赖的联接或约束。

1. 在**条件**中，添加、编辑或删除筛选查询输出的规则。您可以将规则组织成组，也可以使用`AND`或`OR`语句将多个规则链接在一起。有关您可以使用的运算符的更多信息，请参阅[数据操作条件运算符和示例](#data-entities-data-action-operators)。

1. 在**排序**中，通过选择属性并选择升序或降序来配置查询结果的排序方式。您可以通过选择排序规则旁边的垃圾桶图标来删除排序配置。

1. 在**转换结果**中，您可以输入 custom JavaScript 来修改或格式化结果，然后再显示结果或将其发送到自动化。

1. 在**输出预览**中，根据配置的字段、筛选器、排序和查看查询输出的预览表 JavaScript。

## 数据操作条件运算符和示例
<a name="data-entities-data-action-operators"></a>

您可以使用条件运算符将配置的表达式值与实体列进行比较，以返回数据库对象的子集。您可以使用的运算符取决于列的数据类型以及实体所连接的数据库的类型，例如 Amazon Redshift、Amazon Aurora 或 Amazon DynamoDB。

以下条件运算符可用于所有数据库服务：
+ `=`和`!=`：适用于所有数据类型（不包括主键列）。
+ `<=`、`>=``<`、和`>=`：仅适用于数字列。
+ `IS NULL`an `IS NOT NULL` d：用于匹配具有空值或空值的列。在每个数据库中，空值的解释通常有所不同，但是在 App Studio 中，`NULL`运算符匹配并返回连接的数据库表中包含空值的记录。

以下条件运算符只能在连接到支持它们的数据库服务的实体中使用：
+ `LIKE`和`NOT LIKE`（Redshift，Aurora）：用于在连接的数据库中执行基于模式的查询。该`LIKE`运算符为搜索功能提供了灵活性，因为它可以查找并返回符合指定模式的记录。您可以使用与模式中的任何字符或字符序列相匹配的通配符来定义模式。每个数据库管理系统都有一组唯一的通配符，但最常用的两个通配符是`%`表示任意数量的字符（包括 0），以及`_`表示单个字符。
+ `Contains`和 `Not Contains` (DynamoDB)：用于执行区分大小写的搜索以确定是否在列值中找到给定文本。
+ `Starts With`和 `Not Starts With` (DynamoDB)：用于执行区分大小写的搜索，以确定是否在列值的开头找到给定文本。

### 数据库支持条件运算符
<a name="data-entities-data-action-operators-support"></a>

下表显示了每个可以连接到 App Studio 的数据库支持哪些数据操作条件运算符。


|  | =, \$1=, <, >, <=, >= | 喜欢，不喜欢 | 包含，不包含 | 开头为，不开头 | 为空，不为空 | 
| --- | --- | --- | --- | --- | --- | 
|  **DynamoDB**  |  是  |  否  |  是  |  是  |  是  | 
|  **Aurora**  |  支持  |  是  |  否  |  否  |  是  | 
|  **Redshift**  |  支持  |  是  |  否  |  否  |  是  | 

### 数据操作条件示例
<a name="data-entities-data-action-operators-examples"></a>

考虑以下数据库表，其中包含多个带有`name``city`、和`hireDate`字段的项目。


| name | city | HireDate | 
| --- | --- | --- | 
|  亚当  |  Seattle  |  2025-03-01  | 
|  艾德丽安  |  Boston  |  2025-03-05  | 
|  Bob  |  阿尔伯克基  |  2025-03-06  | 
|  Carlos  |  芝加哥  |  2025-03-10  | 
|  卡罗琳  |  NULL  |  2025-03-12  | 
|  丽塔  |  迈阿密  |  2025-03-15  | 

现在，考虑在 App Studio 中创建数据操作，以返回符合指定条件的项目的`name`字段。以下列表包含条件示例以及该表为每个示例返回的值。

**注意**  
这些示例的格式为 SQL 示例，它们可能不像在 App Studio 中那样出现，但用于说明运算符的行为。
+ `WHERE name LIKE 'Adam'`: 退货`Adam`。
+ `WHERE name LIKE 'A%'`: 退货`Adam`和`Adrienne`.
+ `WHERE name NOT LIKE 'B_B'`: 返回`Adam``Adrienne`、`Carlos`、`Caroline`、和`Rita`。
+ `WHERE contains(name, 'ita')`: 退货`Rita`。
+ `WHERE begins_with(name, 'Car')`: 退货`Carlos`和`Caroline`.
+ `WHERE city IS NULL`: 退货`Caroline`。
+ `WHERE hireDate < "2025-03-06"`: 退货`Adam`和`Adrienne`.
+ `WHERE hireDate >= DateTime.now().toISODate()`: 请注意，`DateTime.now().toISODate()`返回当前日期。在当前日期为 2025-03-10 的场景中，表达式返回`Carlos`、和。`Caroline` `Rita`

**提示**  
有关比较表达式中的日期和时间的更多信息，请参阅[日期和时间](expressions.md#expressions-date-time)。

## 删除数据操作
<a name="data-entities-data-action-delete"></a>

使用以下步骤从 App Studio 实体中删除数据操作。

1. 如有必要，请导航到要删除其数据操作的实体。

1. 选择 “**数据操作**” 选项卡。

1. 对于要删除的每个数据操作，请选择 “**编辑**” 旁边的下拉菜单，然后选择 “**删除**”。

1. 在对话框中选择 “**确认**”。

# 添加或删除示例数据
<a name="data-entities-edit-sample-data"></a>

您可以向 App Studio 应用程序中的实体添加示例数据。由于应用程序在发布之前不会与外部服务通信，因此可以使用示例数据在预览环境中测试您的应用程序和实体。

1. 如有必要，请导航到要编辑的实体。

1. 选择 “**样本数据**” 选项卡。

1. 要生成样本数据，请选择**生成更多样本数据**。

1. 要删除样本数据，请选中要删除的数据的复选框，然后按 Delete 或 Backspace 键。选择 “**保存**” 以保存更改。

# 添加或编辑连接的数据源和地图字段
<a name="data-entities-edit-connection"></a>

**提示**  
您可以按 CTRL\$1Z 撤消最近对实体所做的更改。

1. 如有必要，请导航到要编辑的实体。

1. 选择 “**连接**” 选项卡可查看或管理实体与发布应用程序时存储数据的数据源表之间的连接。连接数据源表后，您可以将实体字段映射到表的列。

1. 在**连接器**中，选择包含与所需数据源表的连接的连接器。有关连接器的更多信息，请参见[使用连接器将 App Studio 连接到其他服务](connectors.md)。

1. 在**表**中，选择要用作实体数据源的表。

1. 该表显示了实体的字段以及它们映射到的数据源列。选择 “**自动映射**” 可自动将实体字段与数据源列映射。您也可以通过在每个实体字段的下拉列表中选择数据源列来手动映射表中的字段。

# 删除实体
<a name="data-entities-delete"></a>

使用以下步骤从 App Studio 应用程序中删除实体。

**注意**  
从 App Studio 应用程序中删除实体不会删除连接的数据源表，包括相应的 DynamoDB 托管实体表。数据源表将保留在关联 AWS 账户中，如果需要，需要从相应的服务中删除。

**删除实体**

1. 如有必要，请导航到您的应用程序。

1. 选择**数据**选项卡。

1. **在左侧的 “**实体**” 菜单中，选择要删除的实体旁边的省略号菜单，然后选择 “删除”。**

1. 查看对话框中的信息，输入**confirm**并选择**删除**以删除实体。

# AWS App Studio 中的管理数据实体
<a name="managed-data-entities"></a>

通常，您可以在 App Studio 中为实体配置与外部数据库表的连接，并且必须创建每个实体字段并将其映射到连接的数据库表中的一列。更改数据模型时，必须更新外部数据库表和实体，并且必须重新映射已更改的字段。虽然这种方法很灵活，可以使用不同类型的数据源，但需要更多的前期规划和持续维护。

*托管实体*是 App Studio 为您管理整个数据存储和配置过程的一种实体。创建托管实体时，将在关联账户中创建相应的 DynamoDB 表。 AWS 这确保了内部安全透明的数据管理 AWS。对于托管实体，您可以在 App Studio 中配置该实体的架构，相应的 DynamoDB 表也会自动更新。

## 在多个应用程序中使用托管实体
<a name="managed-data-entities-other-applications"></a>

在 App Studio 应用程序中创建托管实体后，该实体就可以在其他 App Studio 应用程序中使用。通过提供单个底层资源进行维护，这有助于为具有相同数据模型和架构的应用程序配置数据存储。

在多个应用程序中使用托管实体时，必须使用创建托管实体的原始应用程序对相应的 DynamoDB 表进行所有架构更新。在其他应用程序中对该实体所做的任何架构更改都不会更新相应的 DynamoDB 表。

## 托管实体限制
<a name="managed-data-entities-limitations"></a>

**主键更新限制**：创建实体后无法更改其主键名称或类型，因为这是 DynamoDB 中的破坏性更改，会导致现有数据丢失。

重@@ **命名列**：在 DynamoDB 中重命名列时，实际上是在创建新列，而原始列仍保留原始数据。原始数据不会自动复制到新列或从原始列中删除。您可以重命名托管实体字段（称为*系统名称*），但您将无法访问原始列及其数据。重命名显示名称没有限制。

**更改数据类型**：尽管 DynamoDB 允许在创建表后灵活修改列数据类型，但此类更改可能会严重影响现有数据以及查询逻辑和准确性。数据类型更改需要转换所有现有数据以符合新格式，这对于大型活动表来说很复杂。此外，在数据迁移完成之前，数据操作可能会返回意想不到的结果。您可以切换字段的数据类型，但现有数据不会迁移到新的数据类型。

**排序列**：DynamoDB 支持通过排序键检索已排序的数据。排序键必须与分区键一起定义为复合主键的一部分。限制包括强制性的排序键、仅限于一个分区内的排序以及没有跨分区的全局排序。需要对排序键进行仔细的数据建模，以避免出现热分区。我们将不支持排序预览里程碑。

**加入**：DynamoDB 不支持联接。为了避免昂贵的联接操作，表在设计上是非规范化的。为了对 one-to-many关系进行建模，子表包含一个引用父表主键的属性。多表数据查询涉及从父表中查找项目以检索详细信息。作为预览里程碑的一部分，我们将不支持托管实体的本机联接。作为一种解决方法，我们将引入一个自动化步骤，该步骤可以执行 2 个实体的数据合并。这将与一级查询非常相似。我们将不支持排序预览里程碑。

**Env Stag** e：我们将允许发布进行测试，但在两个环境中使用相同的托管存储

# 页面和自动化参数
<a name="paramters"></a>

参数是 AWS App Studio 中的一项强大功能，用于在应用程序中的不同组件、页面和自动化之间传递动态值。使用参数，您可以打造灵活且具有情境感知能力的体验，从而提高应用程序的响应速度和个性化程度。本文涵盖两种类型的参数：页面参数和自动化参数。

**Topics**
+ [页面参数](parameters-page.md)
+ [自动化参数](parameters-automation.md)

# 页面参数
<a name="parameters-page"></a>

页面参数是一种在页面之间发送信息的方式，通常用于在 App Studio 应用程序中从一个页面导航到另一个页面以维护上下文或传递数据。页面参数通常由名称和值组成。

## 页面参数用例
<a name="parameters-pages-use-cases"></a>

页面参数用于在 App Studio 应用程序中的不同页面和组件之间传递数据。它们对以下用例特别有用：

1. **搜索和筛选**：当用户在您的应用程序的主页上搜索时，可以将搜索词作为参数传递给结果页面，从而使其仅显示相关的筛选项目。例如，如果用户搜索*noise-cancelling headphones*，则*noise-cancelling headphones*可以将带有值的参数传递到产品列表页面。

1. **查看商品详情**：如果用户点击商品（例如产品），则该商品的唯一标识符可以作为参数传递到详情页面。这允许详细信息页面显示有关特定项目的所有信息。例如，当用户点击耳机产品时，该产品的唯一 ID 将作为参数传递到产品详情页面。

1. **在页面导航中传递用户上下文**：当用户在页面之间导航时，参数可以传递重要的上下文，例如用户的位置、首选产品类别、购物车内容和其他设置。例如，当用户在您的应用程序上浏览不同的产品类别时，他们的位置和首选类别会作为参数保留，从而提供个性化和一致的体验。

1. **深度链接**：使用页面参数将指向应用程序内特定页面的链接共享或添加书签。

1. **数据操作**：您可以创建接受参数值的数据操作，以便根据传递的参数筛选和查询数据源。例如，在产品列表页面上，您可以创建一个接受`category`参数以获取相关产品的数据操作。

## 页面参数安全注意事项
<a name="parameters-pages-security"></a>

虽然页面参数提供了一种在页面之间传递数据的强大方法，但您必须谨慎使用它们，因为如果使用不当，它们可能会暴露敏感信息。以下是需要记住的重要安全注意事项：

1. **避免在中暴露敏感数据 URLs**

   1. **风险**： URLs（包括数据操作参数）通常出现在服务器日志、浏览器历史记录和其他地方。因此，必须避免在页面参数值中暴露敏感数据，例如用户凭证、个人身份信息 (PII) 或任何其他机密数据。

   1. **缓解措施**：考虑使用可以安全映射到敏感数据的标识符。例如，您可以传递一个可用于获取用户名或电子邮件地址的随机唯一标识符，而不是将用户的姓名或电子邮件地址作为参数传递。

# 自动化参数
<a name="parameters-automation"></a>

自动化参数是 App Studio 中的一项强大功能，可用于通过传递来自各种来源（例如用户界面、其他自动化或数据操作）的动态值来创建灵活且可重复使用的自动化。它们充当占位符，在自动化运行时会被实际值替换，从而允许您每次使用具有不同输入的相同自动化。

在自动化中，参数具有唯一的名称，您可以使用 params 变量和参数名称来引用参数的值，例如，`{{params.customerId}}`。

本文深入了解自动化参数，包括其基本概念、用法和最佳实践。

## 自动化参数的优点
<a name="parameters-automation-benefits"></a>

自动化参数具有多种优点，包括以下列表：

1. 可@@ **重用性**：通过使用参数，您可以创建可重复使用的自动化，这些自动化可以使用不同的输入值进行自定义，从而允许您在不同的输入中重复使用相同的自动化逻辑。

1. **灵活性**：无需将值硬编码到自动化中，而是可以定义参数并在需要时提供不同的值，从而使自动化更具动态性和适应性。

1. **关注点分离**：参数有助于将自动化逻辑与使用的特定值分开，从而促进代码的组织和可维护性。

1. **验证**：每个参数都有一种数据类型，例如字符串、数字或布尔值，将在运行时进行验证。这样可以确保数据类型不正确的请求被拒绝，而无需自定义验证代码。

1. **可选参数和必填参数**：您可以将自动化参数指定为可选参数或必填参数。运行自动化时必须提供必需的参数，而可选参数可以具有默认值或省略。这种灵活性使您可以创建更多功能的自动化，这些自动化可以根据提供的参数处理不同的场景。

## 场景和用例
<a name="parameters-automation-scenarios"></a>

### 场景：检索商品详情
<a name="parameters-automation-scenario-product-details"></a>



想象一下，您有一个自动化系统，可以根据产品 ID 从数据库中检索产品详细信息。此自动化可能有一个名为的参数`productId`。

该`productId`参数充当占位符，您可以在运行自动化时使用实际的产品 ID 值填充该占位符。您可以定义`productId`参数并在每次运行自动化时传入不同的产品 ID 值，而不必将特定的产品 ID 硬编码到自动化中。

您可以从组件的数据源调用此自动化，使用双大括号语法将所选产品的 ID 作为`productId`参数传递：`{{ui.productsTable.selectedRow.id}}`。这样，当用户从表 (`ui.productsTable`) 中选择产品时，自动化将通过传递所选行的 ID 作为`productId`参数来检索所选产品的详细信息。

或者，您可以从另一个自动化中调用此自动化，该自动化会循环浏览产品列表，并通过传递产品的 ID 作为`productId`参数来检索每个产品的详细信息。在这种情况下，`productId`参数值将在循环的每次迭代中通过`{{product.id}}`表达式动态提供。

通过使用`productId`参数和双大括号语法，可以使这种自动化更加灵活和可重复使用。无需为每个产品创建单独的自动化，只需提供来自不同来源（例如用户界面组件或其他自动化）的相应产品 ID 作为参数值即可检索任何产品的详细信息。

### 场景：使用备用值处理可选参数
<a name="parameters-automation-scenario-optional-parameters"></a>

让我们考虑一个场景，其中你有一个 “任务” 实体，其中包含必填的 “所有者” 列，但你希望该字段在自动化中成为可选字段，如果未选择所有者，则提供备用值。

1. 使用名为的参数创建自动化`Owner`，该参数映射到`Owner``Task`实体的字段。

1. 由于该`Owner`字段在实体中是必填字段，因此该`Owner`参数将与所需的设置同步。

1. 要在自动化中将该`Owner`参数设为可选，请关闭该参数的`required`设置。

1. 在你的自动化逻辑中，你可以使用类似的表达式`{{params.Owner || currentUser.userId}}`。此表达式检查是否提供了该`Owner`参数。如果未提供，它将回退到当前用户的 ID 作为所有者。

1. 这样，如果用户没有在表单或组件中选择所有者，则自动化会自动将当前用户指定为任务的所有者。

通过切换`Owner`参数的`required`设置并使用后备表达式，您可以将其与实体字段要求分离，使其在自动化中成为可选的，并在未提供参数时提供默认值。

## 定义自动化参数类型
<a name="parameters-automation-create"></a>

通过使用参数类型来指定数据类型和设置要求，您可以控制自动化的输入。这有助于确保您的自动化在预期输入下可靠运行。

### 同步实体中的类型
<a name="parameters-automation-synchronize-entity"></a>

动态同步实体字段定义中的参数类型和要求可以简化与实体数据交互的自动化构建，从而确保参数始终反映最新的实体字段类型和要求。

以下过程详细说明了同步实体参数类型的一般步骤：

1. 使用键入字段（例如布尔值、数字等）创建实体，并根据需要标记字段。

1. 创建新的自动化。

1. 向自动化添加参数，然后在选择 “**类型**” 时，选择要与之同步的实体字段。数据类型和必填设置将自动从映射的实体字段同步

1. 如果需要，您可以通过为每个参数切换 “必需” 设置来覆盖该 on/off 设置。这意味着所需的状态将不会与实体字段保持同步，但除此之外，它将保持同步。

### 手动定义类型
<a name="parameters-automation-custom-types"></a>

您也可以手动定义参数类型，而无需从实体进行同步

通过定义自定义参数类型，您可以创建接受特定输入类型并根据需要处理可选或必需参数的自动化，而不必依赖实体字段映射。

1. 使用键入字段（例如布尔值、数字等）创建实体，并根据需要标记字段。

1. 创建新的自动化。

1. 向自动化添加参数，然后在选择**类型**时，选择所需的类型。

## 配置要传递给自动化参数的动态值
<a name="parameters-automation-pass-values"></a>

为自动化定义参数后，可以在调用自动化时向其传递值。您可以通过两种方式传递参数值：

1. **组件触发器**：如果您通过组件触发器（例如单击按钮）调用自动化，则可以使用 JavaScript 表达式来传递组件上下文中的值。例如，如果您有一个名为的文本输入字段`emailInput`，则可以使用以下表达式将其值传递给电子邮件参数：`ui.emailInput.value`。

1. **其他自动化**：如果您要从其他自动化中调用自动化，则可以使用 JavaScript 表达式来传递自动化上下文中的值。例如，您可以传递另一个参数的值或上一个操作步骤的结果。

## 类型安全
<a name="parameters-automation-type-safety"></a>

通过使用特定数据类型（例如字符串、数字或布尔值）定义参数，可以确保传递到自动化的值属于预期类型。

**注意**  
在 App Studio 中，日期是 ISO 字符串日期，这些日期也将被验证。

这种类型安全性有助于防止类型不匹配，这可能会导致自动化逻辑中出现错误或意外行为。例如，如果您将参数定义为 a`Number`，则可以确信传递给该参数的任何值都将是一个数字，并且无需在自动化中执行额外的类型检查或转换。

## 验证
<a name="parameters-automation-validation"></a>

您可以向参数添加验证规则，确保传递到自动化的值符合特定标准。

虽然 App Studio 不提供内置的参数验证设置，但您可以通过在自动化中添加一个 JavaScript 操作来实现自定义验证，该操作在违反特定限制时会引发错误。

对于实体字段，支持验证规则的子集，例如 minimum/maximum 值。但是，在运行 R Create/Update/Delete ecord 操作时，这些操作不会在自动化级别进行验证，而只能在数据层进行验证。

## 自动化参数的最佳实践
<a name="parameters-automation-best-practices"></a>

为确保您的自动化参数经过精心设计、可维护且易于使用，请遵循以下最佳实践：

1. **使用描述性参数名称**：选择能清楚描述参数目的或上下文的参数名称。

1. **提供参数描述**：在定义参数时，请使用 “**描述**” 字段来解释其用途、限制和期望。这些描述将出现在引用参数时的 JSDoc 注释中，以及用户在调用自动化时需要为参数提供值的任何用户界面中。

1. **使用适当的数据类型**：根据预期的输入值仔细考虑每个参数的数据类型，例如：字符串、数字、布尔值、对象。

1. **验证参数值**：在继续执行进一步操作之前，在自动化中实施适当的验证检查，以确保参数值满足特定要求。

1. **使用后备值或默认值**：虽然 App Studio 目前不支持为参数设置默认值，但您可以在使用自动化逻辑中的参数时实现后备值或默认值。例如，如果未提供参数或`param1`参数值为假，则可以使用类似的表达式`{{ params.param1 || "default value" }}`来提供默认值。

1. **保持参数一致性**：如果您有多个自动化需要相似的参数，请尝试在这些自动化中保持参数名称和数据类型的一致性。

1. **文档参数的使用**：为自动化保留清晰的文档，包括每个参数的描述、其用途、预期值以及任何相关的示例或边缘情况。

1. **经常检查和重构**：定期检查您的自动化及其参数，根据需要重构或合并参数，以提高清晰度、可维护性和可重用性。

1. **限制参数数量：虽然参数**提供了灵活性，但参数过多会使自动化变得复杂且难以使用。通过将参数数量限制在必要的范围内，力求在灵活性和简单性之间取得平衡。

1. **考虑参数分组**：如果您发现自己定义了多个相关参数，请考虑将它们分组为单个*Object*参数。

1. **单独关注的问题**：避免将单个参数用于多种用途，或将不相关的值组合成单个参数。每个参数都应代表一个不同的关注点或一段数据。

1. **使用参数别名**：如果参数名称较长或复杂，请考虑在自动化逻辑中使用别名或速记版本，以提高可读性和可维护性。

通过遵循这些最佳实践，您可以确保自动化参数经过精心设计、可维护且易于使用，从而最终提高自动化的整体质量和效率。

# JavaScript 用于在 App Studio 中编写表达式
<a name="expressions"></a>

在 AWS App Studio 中，您可以使用 JavaScript 表达式来动态控制应用程序的行为和外观。单行 JavaScript 表达式用双花括号、`{{ }}`、编写，可用于各种上下文，例如自动化、用户界面组件和数据查询。这些表达式在运行时进行求值，可用于执行计算、操作数据和控制应用程序逻辑。

App Studio 为三个 JavaScript 开源库提供原生支持：Luxon、UUID、Lodash 以及 SDK 集成，用于检测应用程序配置中的 JavaScript 语法和类型检查错误。

**重要**  
App Studio 不支持使用第三方库或自定义 JavaScript 库。

## 基本语法
<a name="expressions-basic-syntax"></a>

JavaScript 表达式可以包括变量、文字、运算符和函数调用。表达式通常用于执行计算或评估条件。

请参阅以下示例：
+ `{{ 2 + 3 }}`将评估为 5。
+ `{{ "Hello, " + "World!" }}`将评估为 “你好，世界！”。
+ `{{ Math.max(5, 10) }}`将评估为 10。
+ `{{ Math.random() * 10 }}`返回介于 [0-10) 之间的随机数（含小数）。

## 插值
<a name="expressions-interpolation"></a>

也可以使用 JavaScript 在静态文本中插入动态值。这是通过将 JavaScript 表达式用双大括号括起来实现的，如下例所示：

```
Hello {{ currentUser.firstName }}, welcome to App Studio!
```

在此示例中，`currentUser.firstName`是一个 JavaScript 表达式，用于检索当前用户的名字，然后将其动态插入到问候消息中。

## 联接
<a name="expressions-concatenation"></a>

您可以使用中的`+`运算符连接字符串和变量 JavaScript，如下例所示。

```
{{ currentRow.FirstName + " " + currentRow.LastName }}
```

此表达式将`currentRow.FirstName`和`currentRow.LastName`的值组合在一起，中间有一个空格，从而得出当前行的全名。例如，如果`currentRow.FirstName`是`John`、`currentRow.LastName`是`Doe`，则表达式将解析为`John Doe`。

## 日期和时间
<a name="expressions-date-time"></a>

JavaScript 提供了用于处理日期和时间的各种函数和对象。例如：
+ `{{ new Date().toLocaleDateString() }}`：以本地化格式返回当前日期。
+ `{{ DateTime.now().toISODate() }}`：以 YYYY-MM-DD格式返回当前日期，以用于 “日期” 组件。

### 日期和时间比较
<a name="expressions-date-time-comparison"></a>

使用诸如`=`、、`>``<``>=`、或之类的运算符`<=`来比较日期或时间值。例如：
+ `{{ui.timeInput.value > "10:00 AM"}}`: 检查时间是否在上午 10:00 之后。
+ `{{ui.timeInput.value <= "5:00 PM"}}`: 检查时间是否在下午 5:00 或之前。
+ `{{ui.timeInput.value > DateTime.now().toISOTime()}}`：检查时间是否在当前时间之后。
+ `{{ui.dateInput.value > DateTime.now().toISODate()}}`：检查日期是否早于当前日期。
+ `{{ DateTime.fromISO(ui.dateInput.value).diff(DateTime.now(), "days").days >= 5 }}`：检查该日期是否距离当前日期至少有 5 天。

## 代码块
<a name="expressions-code-block"></a>

除了表达式之外，您还可以编写多行 JavaScript 代码块。与表达式不同，代码块不需要花括号。相反，您可以直接在 JavaScript 代码块编辑器中编写代码。

**注意**  
在计算表达式并显示其值时，运行代码块并显示其输出（如果有）。

## 全局变量和函数
<a name="expressions-global-variables-functions"></a>

App Studio 提供对某些全局变量和函数的访问权限，这些变量和函数可以在 JavaScript 表达式和代码块中使用。例如，`currentUser`是一个表示当前登录用户的全局变量，您可以访问诸如检索用户角色之类`currentUser.role`的属性。

## 引用或更新 UI 组件值
<a name="expressions-UI-component-values"></a>

您可以在组件和自动化操作中使用表达式来引用和更新界面组件值。通过以编程方式引用和更新组件值，您可以创建响应用户输入和数据更改的动态交互式用户界面。

### 引用 UI 组件值
<a name="expressions-UI-component-values-referencing"></a>

您可以通过访问用户界面组件中的值来实现动态行为，从而创建交互式和数据驱动的应用程序。

通过在表达式中使用`ui`命名空间，可以在同一页面上访问用户界面组件的值和属性。通过引用组件的名称，您可以检索其值或根据其状态执行操作。

**注意**  
`ui`命名空间将仅显示当前页面上的组件，因为组件的作用域仅限于其各自的页面。

在 App Studio 应用程序中引用组件的基本语法是:`{{ui.componentName}}`.

以下列表包含使用`ui`命名空间访问界面组件值的示例：
+ `{{ui.textInputName.value}}`: 表示名为的文本输入组件的值*textInputName*。
+ `{{ui.formName.isValid}}`：根据您提供的验证标准，检查名*formName*为的表单中的所有字段是否有效。
+ `{{ui.tableName.currentRow.columnName}}`：表示名为的表组件当前行中特定列的值*tableName*。
+ `{{ui.tableName.selectedRowData.fieldName}}`：表示名为的表组件中选定行中指定字段的值*tableName*。然后，您可以追加诸如 `ID` (`{{ui.tableName.selectedRowData.ID}}`) 之类的字段名称，以引用选定行中该字段的值。

以下列表包含更多引用组件值的具体示例：
+ `{{ui.inputText1.value.trim().length > 0}}`：在修剪任何前导或尾随空格后，检查*inputText1*组件的值是否具有非空字符串。这对于根据输入文本字段的值验证用户输入 enabling/disabling 或其他组件非常有用。
+ `{{ui.multiSelect1.value.join(", ")}}`: 对于名为的多选组件*multiSelect1*，此表达式将所选选项值的数组转换为逗号分隔的字符串。这对于以用户友好的格式显示所选选项或将选择传递给其他组件或自动化非常有用。
+ `{{ui.multiSelect1.value.includes("option1")}}`：此表达式检查该值*option1*是否包含在*multiSelect1*组件的选定选项数组中。如果*option1*选择则返回 true，否则返回 false。这对于有条件地渲染组件或根据特定选项选择采取操作非常有用。
+ `{{ui.s3Upload1.files.length > 0}}`：对于名为的 Amazon S3 文件上传组件*s3Upload1*，此表达式通过检查文件数组的长度来检查是否已上传任何文件。根据文件是否已上传，它可能对 enabling/disabling 其他组件或操作很有用。
+ `{{ui.s3Upload1.files.filter(file => file.type === "image/png").length}}`：此表达式筛选*s3Upload1*组件中已上传文件的列表，使其仅包含 PNG 图像文件，并返回这些文件的数量。这可能有助于验证或显示有关上传文件类型的信息。

### 更新 UI 组件值
<a name="expressions-UI-component-values-updating"></a>

要更新或操作组件的值，请在自动化`RunComponentAction`中使用。以下是可用于更新使用`RunComponentAction`操作命名的*myInput*文本输入组件值的语法示例：

```
RunComponentAction(ui.myInput, "setValue", "New Value")
```

在此示例中，该`RunComponentAction`步骤调用*myInput*组件上的`setValue`操作，并传入新值*New Value*。

## 处理表格数据
<a name="expressions-table-data"></a>

您可以访问表数据和值以执行操作。您可以使用以下表达式来访问表数据：
+ `currentRow`：用于访问表中当前行的表数据。例如，设置表格操作的名称，将行中的值发送到从操作启动的自动化，或者使用表中现有列中的值来创建新列。
+ `ui.tableName.selectedRow`和`ui.tableName.selectedRowData`都用于访问页面上其他组件的表数据。例如，根据所选行在表格外设置按钮的名称。返回的值相同，但`selectedRow`和之间的区别`selectedRowData`如下：
  + `selectedRow`：此命名空间包括每个字段的列标题中显示的名称。`selectedRow`在引用表中可见列中的值时，应使用。例如，如果您的表中有一个自定义列或计算列，但该列在实体中不作为字段存在。
  + `selectedRowData`：此命名空间包括实体中用作表源的字段。您应该使用`selectedRowData`来引用实体中的一个值，该值在表格中不可见，但对于应用程序中的其他组件或自动化很有用。

以下列表包含在表达式中访问表数据的示例：
+ `{{ui.tableName.selectedRow.columnNameWithNoSpace}}`：返回表中选定行中该*columnNameWithNoSpace*列的值。
+ `{{ui.tableName.selectedRow.['Column Name With Space']}}`：返回表中选定行中该*Column Name With Space*列的值。
+ `{{ui.tableName.selectedRowData.fieldName}}`：返回表格中选定行中*fieldName*实体字段的值。
+ `{{ui.tableName.selectedRows[0].columnMappingName}}`：从同一页面上的其他组件或表达式中引用选定行的列名。
+ `{{currentRow.firstName + ' ' + currentRow.lastNamecolumnMapping}}`：连接多列中的值以在表中创建新列。
+ `{{ { "Blocked": "🔴", "Delayed": "🟡", "On track": "🟢" }[currentRow.statuscolumnMapping] + " " + currentRow.statuscolumnMapping}}`：根据存储的状态值自定义表中字段的显示值。
+ `{{currentRow.colName}}`、`{{currentRow["First Name"]}}``{{currentRow}}`、或`{{ui.tableName.selectedRows[0]}}`：在行操作中传递被引用的行的上下文。

## 访问自动化
<a name="expressions-automations"></a>

你可以在 App Studio 中使用自动化来运行服务器端逻辑和操作。在自动化操作中，您可以使用表达式来处理数据、生成动态值以及合并先前操作的结果。

### 访问自动化参数
<a name="expressions-automations-parameters"></a>

您可以将来自用户界面组件和其他自动化的动态值传递到自动化中，从而使其可重复使用且灵活。这是使用`params`命名空间的自动化参数完成的，如下所示：

`{{params.parameterName}}`：引用从用户界面组件或其他来源传递到自动化的值。例如，`{{params.ID}}`将引用名为的参数*ID*。

#### 操纵自动化参数
<a name="expressions-automations-parameters-manipulate"></a>

您可以使用 JavaScript 来操作自动化参数。请参阅以下示例：
+ `{{params.firstName}} {{params.lastName}}`：连接作为参数传递的值。
+ `{{params.numberParam1 + params.numberParam2}}`：添加两个数字参数。
+ `{{params.valueProvided?.length > 0 ? params.valueProvided : 'Default'}}`：检查参数是否不为空或未定义，且长度是否为非零。如果为 true，则使用提供的值；否则，设置默认值。
+ `{{params.rootCause || "No root cause provided"}}`：如果`params.rootCause`参数为 false（空、未定义或空字符串），请使用提供的默认值。
+ `{{Math.min(params.numberOfProducts, 100)}}`：将参数的值限制为最大值（在本例中为`100`）。
+ `{{ DateTime.fromISO(params.startDate).plus({ days: 7 }).toISO() }}`：如果`params.startDate`参数为`"2023-06-15T10:30:00.000Z"`，则此表达式的计算结果将为`"2023-06-22T10:30:00.000Z"`，即开始日期一周后的日期。

### 访问先前操作的自动化结果
<a name="expressions-automations-results"></a>

自动化允许应用程序运行服务器端的逻辑和操作，例如查询数据库 APIs、与之交互或执行数据转换。`results`命名空间提供对同一自动化中先前操作返回的输出和数据的访问权限。关于访问自动化结果，请注意以下几点：

1. 您只能访问同一个自动化中先前自动化步骤的结果。

1. 如果您有按该顺序命名的*action1*操作，则*action1*无法引用任何结果，*action2*只能访问`results.action1`。*action2*

1. 这也适用于客户端操作。例如，如果你有一个使用`InvokeAutomation`操作触发自动化的按钮。然后，您可以设置一个导航步骤，`results.myInvokeAutomation1.fileType === "pdf"`其`Run If`条件是，如果自动化显示文件是 PDF，则使用 PDF 查看器导航到页面。

以下列表包含使用`results`命名空间访问先前操作的自动化结果的语法。
+ `{{results.stepName.data}}`：从名为的自动化步骤中检索数据数组*stepName*。
+ `{{results.stepName.output}}`：检索名为的自动化步骤的输出*stepName*。

访问自动化步骤结果的方式取决于操作的类型及其返回的数据。不同的操作可能会返回不同的属性或数据结构。下面是一些常见的示例：
+ 对于数据操作，您可以使用访问返回的数据数组`results.stepName.data`。
+ 对于 API 调用操作，您可以使用访问响应正文`results.stepName.body`。
+ 对于 Amazon S3 操作，您可以使用访问文件内容`results.stepName.Body.transformToWebStream()`。

请参阅文档，了解您正在使用的特定操作类型，以了解它们返回的数据的形状以及如何在`results`命名空间中访问这些数据。以下列表包含一些示例
+ `{{results.getDataStep.data.filter(row => row.status === "pending").length}}`：假设*getDataStep*是一个返回数据行数组的`Invoke Data Action`自动化操作，则此表达式会筛选数据数组，使其仅包括状态字段等于的行`pending`，并返回筛选数组的长度（计数）。这对于根据特定条件查询或处理数据非常有用。
+ `{{params.email.split("@")[0]}}`：如果`params.email`参数包含电子邮件地址，则此表达式会在 @ 符号处拆分字符串，并返回 @ 符号之前的部分，从而有效地提取电子邮件地址的用户名部分。
+ `{{new Date(params.timestamp * 1000)}}`：此表达式采用 Unix 时间戳参数 (`params.timestamp`) 并将其转换为 JavaScript Date 对象。它假设时间戳以秒为单位，因此将其乘以1000，将其转换为毫秒，这是构造函数所期望的格式。`Date`这对于在自动化中处理日期和时间值非常有用。
+ `{{results.stepName.Body}}`: 对于名为的`Amazon S3 GetObject`自动化操作*stepName*，此表达式会检索文件内容，用户界面组件（例如 I **mag** e 或 **PDF Viewer**）可以使用这些内容来显示检索到的文件。请注意，需要在**自动化的自动化输出**中配置此表达式才能在组件中使用。

# 数据依赖关系和时序注意事项
<a name="data-dependencies-timing-considerations"></a>

在 App Studio 中构建复杂的应用程序时，了解和管理不同数据组件（例如表单、详细信息视图和自动化驱动的组件）之间的数据依赖关系至关重要。数据组件和自动化可能无法同时完成数据检索或执行，这可能会导致计时问题、错误和意外行为。通过了解潜在的计时问题并遵循最佳实践，您可以在 App Studio 应用程序中创建更可靠、更一致的用户体验。

一些潜在的问题如下：

1. **渲染时序冲突：**数据组件的渲染顺序可能与其数据依赖关系不一致，从而可能导致视觉不一致或错误。

1. **自动化运行时间：**自动化任务可能在组件完全加载之前完成，从而导致运行时执行错误。

1. **组件崩溃：**由自动化提供支持的组件可能会在响应无效或自动化尚未完成运行时崩溃。

## 示例：订单详情和客户信息
<a name="data-dependencies-timing-considerations-example"></a>

此示例演示了数据组件之间的依赖关系如何导致数据显示中的计时问题和潜在错误。

假设一个在同一页面上包含以下两个数据组件的应用程序：
+ 用于获取订单数据的详情组件 (`orderDetails`)。
+ 显示与订单相关的客户详细信息的详情组件 (`customerDetails`)。

在此应用程序中，`orderDetails`详细信息组件中有两个字段，配置了以下值：

```
// 2 text fields within the orderDetails detail component

// Info from orderDetails Component
{{ui.orderDetails.data[0].name}} 

// Info from customerDetails component
{{ui.customerDetails.data[0].name}} // Problematic reference
```

在此示例中，`orderDetails`组件试图通过引用`customerDetails`组件中的数据来显示客户名称。这是有问题的，因为`orderDetails`组件可能会在`customerDetails`组件获取其数据之前进行渲染。如果`customerDetails`组件数据获取延迟或失败，则`orderDetails`组件将显示不完整或不正确的信息。

## 数据依赖和计时最佳实践
<a name="data-dependencies-timing-considerations-example"></a>

使用以下最佳实践来缓解 App Studio 应用程序中的数据依赖和计时问题：

1. **使用条件渲染：**只有在确认组件或数据可用时才渲染组件或显示数据。在显示数据之前，使用条件语句检查数据是否存在。以下代码段显示了一个条件语句的示例：

   ```
   {{ui.someComponent.data ? ui.someComponent.data.fieldName : "Loading..."}}
   ```

1. **管理子组件的可见性：**对于在加载数据之前呈现子组件的 Stepflow、Form 或 Detail 等组件，请手动设置子组件的可见性。以下代码段显示了根据父组件数据可用性设置可见性的示例：

   ```
   {{ui.parentComponent.data ? true : false}}
   ```

1. **使用联接查询：**如果可能，使用联接查询在单个查询中提取相关数据。这减少了单独的数据提取次数，并最大限度地减少了数据组件之间的时序问题。

1. 在自动化中@@ **实现错误处理：在自动化中**实施强大的错误处理，以优雅地管理预期数据不可用或收到无效响应的场景。

1. **使用可选链接：**访问嵌套属性时，使用可选链接以防止父属性未定义时出错。以下片段显示了可选链接的示例：

   ```
   {{ui.component.data?.[0]?.fieldSystemName}}
   ```

# 构建包含多个用户的应用程序
<a name="builder-collaboration"></a>

多个用户可以在单个 App Studio 应用程序上工作，但是一次只能有一个用户编辑一个应用程序。有关邀请其他用户编辑应用程序以及多个用户尝试同时编辑应用程序时的行为的信息，请参阅以下部分。

## 邀请构建者编辑应用程序
<a name="builder-collaborate-invite"></a>

按照以下说明邀请其他构建者编辑 App Studio 应用程序。

**邀请其他构建者编辑应用程序**

1. 如有必要，请导航到应用程序的应用程序工作室。

1. 选择**共享**。

1. 在 “**开发**” 选项卡中，使用文本框搜索并选择要邀请其编辑应用程序的群组或个人用户。

1. 对于每个用户或组，选择下拉列表并选择要授予该用户或组的权限。
   + **共同所有者**：共同所有者拥有与应用程序所有者相同的权限。
   + **仅限编辑**：角色为 **“仅限编辑”** 的用户拥有与所有者和共同所有者相同的权限，但以下权限除外：
     + 他们不能邀请其他用户编辑应用程序。
     + 他们无法将应用程序发布到测试或生产环境。
     + 他们无法向应用程序添加数据源。
     + 他们无法删除或复制该应用程序。

## 正在尝试编辑正在由其他用户编辑的应用程序
<a name="builder-collaborate-behavior"></a>

一个 App Studio 应用程序一次只能由一个用户编辑。请参阅以下示例，了解当多个用户尝试同时编辑一个应用程序时会发生什么。

在此示例中，当前`User A`正在编辑应用程序，并已与其共享该应用程序`User B`。 `User B`然后尝试编辑正在编辑的应用程序`User A`。

`User B`尝试编辑应用程序时，将出现一个对话框，通知他们当前`User A`正在编辑应用程序，继续编辑应用程序将退`User A`出应用程序工作室，所有更改都将被保存。 `User B`可以选择取消并`User A`继续操作，也可以选择继续并进入应用程序工作室编辑应用程序。在此示例中，他们选择编辑应用程序。

当`User B`选择编辑应用程序时，`User A`会收到一条通知，告知应用程序`User B`已开始编辑，其会话已结束。请注意，如果`User A`在非活动浏览器选项卡中打开应用程序，他们可能不会收到通知。在这种情况下，如果他们尝试返回应用程序并尝试进行编辑，他们将收到一条错误消息并被引导刷新页面，这将使他们返回到应用程序列表。

# 查看或更新应用程序的内容安全设置
<a name="app-content-security-settings-csp"></a>

App Studio 中的每个应用程序都具有内容安全设置，可用于限制外部媒体或资源（例如图像、iFrame 和 PDFs iFrame）的加载，或者仅允许来自指定域或 URLs （包括 Amazon S3 存储桶）。您还可以指定您的应用程序可以将对象上传到 Amazon S3 的域。

所有应用程序的默认内容安全设置是阻止加载来自外部来源的所有媒体，包括 Amazon S3 存储桶，并阻止将对象上传到 Amazon S3。因此，要加载图像、iFrame 或类似媒体，必须编辑设置以允许媒体来源。 PDFs此外，要允许将对象上传到 Amazon S3，您必须编辑设置以允许上传到的域。

**注意**  
内容安全设置用于在应用程序中配置内容安全策略 (CSP) 标头。CSP 是一种安全标准，可帮助保护您的应用程序免受跨站脚本 (XSS)、点击劫持和其他代码注入攻击。有关 CSP 的更多信息，请参阅 MDN Web 文档中的[内容安全政策 (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)。

**更新应用程序的内容安全设置**

1. 如有必要，可通过从应用程序列表中选择编辑应用程序来导航到该应用程序的应用程序工作室。

1. 选择**应用程序设置**。

1. 选择 “**内容安全设置**” 选项卡以查看以下设置：
   + **帧源**：用于管理您的应用程序可以从中加载框架和 iframe（例如交互式内容或 PDFs）的域。此设置会影响以下组件或应用程序资源：
     + iFrame 嵌入组件
     + PDF 查看器组件
   + **图片来源**：用于管理您的应用程序可以从中加载图像的网域。此设置会影响以下组件或应用程序资源：
     + 应用程序徽标和横幅
     + 图像查看器组件
   + **Connect sourc** e：用于管理您的应用程序可以将 Amazon S3 对象上传到的域。

1. 对于每个设置，从下拉列表中选择所需的设置：
   + **全部阻止 frames/images/connections**：不允许加载任何媒体（图像、框架 PDFs）或将任何对象上传到 Amazon S3。
   + **全部允**许frames/images/connections：允许加载来自所有域的所有媒体（图像、框架 PDFs），或允许将所有域的对象上传到 Amazon S3。
   + **允许特定域**：允许从指定域加载媒体或向指定域上传媒体。域或指定 URLs 为以空格分隔的表达式列表，其中通配符 (`*`) 可用于子域、主机地址或端口号，以表示每个域名的所有合法值均有效。指定`http`也匹配`https`。以下列表包含有效条目的示例：
     + `blob:`：匹配所有 blob，其中包括自动化操作返回的文件数据，例如从 Amazon S3 存储桶`GetObject`返回的项目，或者由 Amazon Bedrock 生成的图像。
**重要**  
您必须在提供的表达式中包含`blob:`以允许操作返回文件数据，即使您的表达式是`*`，也应将其更新为 `* blob:`
     + `http://*.example.com`: 匹配所有从的子域加载的`example.com`尝试。还匹配`https`资源。
     + `https://source1.example.com https//source2.example.com`: 匹配所有从`https://source1.example.com`和中加载的尝试 `https://source2.example.com`
     + `https://example.com/subdirectory/`: 匹配所有尝试加载子目录下文件的尝试。例如 `https://example.com/subdirectory/path/to/file.jpeg`。它不匹配`https://example.com/path/to/file.jpeg`。

1. 选择 **保存** 以保存您的更改。