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

# 建置器文件
<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 建置 AI 文字摘要器應用程式](tutorial-conversational-bedrock.md)
+ [與 Amazon Simple Storage Service 與元件和自動化互動](automations-s3.md)
+ [在 App Studio 應用程式中叫用 Lambda 函數](tutorial-lambda.md)

# 使用 Amazon Bedrock 建置 AI 文字摘要器應用程式
<a name="tutorial-conversational-bedrock"></a>

在本教學課程中，您將在 App Studio 中建置應用程式，該應用程式使用 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 App Studio 概念](concepts.md)和 [教學課程：從空白應用程式開始建置](getting-started-tutorial-empty.md)以熟悉重要的 App Studio 概念。

## 步驟 1：建立和設定 IAM 角色和 App Studio 連接器
<a name="tutorial-conversational-bedrock-steps-create-role-connector"></a>

若要提供 App Studio 對 Amazon Bedrock 模型的存取權，您必須：

1. 啟用您要在應用程式中使用的 Amazon Bedrock 模型。在本教學課程中，您將使用 **Claude 3 Sonnet**，因此請務必啟用該模型。

1. 建立具有 Amazon Bedrock 適當許可的 IAM 角色。

1. 使用將在應用程式中使用的 IAM 角色建立 App Studio 連接器。

前往 [連線至 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 的互動：
+ 輸入：將文字輸入從使用者傳遞至自動化的參數。
+ 動作：一個將文字輸入傳送至 Amazon Bedrock 並傳回輸出文字摘要的 **GenAI 提示**動作。
+ 輸出：自動化輸出，其中包含來自 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. 選擇鉛筆圖示、輸入名稱，然後按下 Enter 鍵，將動作重新命名**PromptBedrock**為 。

   1. 在**連接器**中，選取在 中建立的連接器[步驟 1：建立和設定 IAM 角色和 App Studio 連接器](#tutorial-conversational-bedrock-steps-create-role-connector)。

   1. 在**模型**中，選擇您要用來處理提示的 Amazon Bedrock 模型。在本教學課程中，您將選擇 **Claude 3.5 Sonnet。**

   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 的**按鈕**元件。
+ **文字區域**元件，顯示來自 Amazon Bedrock 的摘要。

將**文字輸入**元件新增至使用者用來輸入要摘要之文字提示的頁面。

**新增文字輸入元件**

1. 在右側**元件**面板中，找到**文字輸入**元件並將其拖曳到畫布上。

1. 選擇畫布中的文字輸入以進行選取。

1. 在右側**屬性**面板中，更新下列設定：

   1. 選擇鉛筆圖示，將文字輸入重新命名為 **inputPrompt**。

   1. 在**標籤**中，輸入 **Prompt**。

   1. 在**預留位置**中，輸入 **Enter text to be summarized**。

現在，新增使用者將選擇將提示傳送至 Amazon Bedrock 的 **Button** 元件。

**新增按鈕元件**

1. 在右側**元件**面板中，找到**按鈕**元件並將其拖曳到畫布上。

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. 在**元件**中，選取 **textSummary** 元件。

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)。

測試應用程式後，再次選擇**發佈**，將應用程式提升為生產環境。請注意，在共用最終使用者之前，生產環境中的應用程式無法使用。如需不同應用程式環境的詳細資訊，請參閱 [應用程式環境](applications-publish.md#application-environments)。

## (選用) 清除
<a name="tutorial-conversational-bedrock-steps-cleanup"></a>

您現在已成功完成教學課程，並使用 Amazon Bedrock 在 App Studio 中建置文字摘要應用程式。您可以繼續使用您的應用程式，也可以清除在本教學課程中建立的資源。下列清單包含要清除的資源清單：
+ 在 App Studio 中建立的 Amazon 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，並想要還原存取，請參閱《[Amazon Bedrock 使用者指南》中的管理對 Amazon Bedrock 基礎模型的存取](https://docs.aws.amazon.com/bedrock/latest/userguide/model-access.html)。 **

# 與 Amazon Simple Storage Service 與元件和自動化互動
<a name="automations-s3"></a>

您可以從 App Studio 應用程式叫用各種 Amazon S3 操作。例如，您可以建立簡單的管理員面板來管理您的使用者和訂單，並顯示來自 Amazon S3 的媒體。雖然您可以使用叫用** AWS**動作叫用任何 Amazon S3 操作，但您可以新增四個專用 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` 將檔案上傳至設定的儲存貯體和資料夾。本教學課程將使用此元件取代獨立的 **Put Object** 自動化動作。（在涉及上傳之前或之後要採取的其他邏輯或動作的更複雜案例中，應使用獨立動作。)

## 先決條件
<a name="automations-s3-prerequisites"></a>

本指南假設您已完成下列先決條件：

1. 建立並設定 Amazon S3 儲存貯體、IAM 角色和政策，以及 Amazon S3 連接器，以成功整合 Amazon S3 與 App Studio。若要建立連接器，您必須具有管理員角色。如需詳細資訊，請參閱[連線至 Amazon Simple Storage Service (Amazon S3)](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 互動的應用程式自動化。使用下列程序建立下列自動化：
+ 列出 Amazon S3 儲存貯體中物件的 **getFiles** 自動化，用於填充資料表元件。
+ **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. 在右側面板中，選擇**元件**以檢視元件選單。有兩種顯示檔案的選項：
   + **影像檢視器**，可檢視具有 `.png`、 `.jpeg`或 `.jpg`副檔名的檔案。
   + 用於檢視 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 函數的相關資訊。如需詳細資訊，請參閱 [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. 在右側**動作**選單中，選擇**叫用 Lambda** 將步驟新增至自動化。

1. 在畫布中選擇新的 Lambda 步驟，以檢視和設定其屬性。

1. 在右側**屬性**功能表中，執行下列步驟來設定步驟：

   1. 在**連接器**中，選取為將 App Studio 連線至 Lambda 函數而建立的連接器。

   1. 在**函數名稱**中，輸入 Lambda 函數的名稱。

   1. 在**函數事件**中，輸入要傳遞給 Lambda 函數的事件。下列清單提供一些常見的使用案例範例：
      + 傳遞自動化參數的值，例如檔案名稱或其他字串： `varName: params.paramName`
      + 傳遞先前動作的結果： `varName: results.actionName1.data[0].fieldName`
      + 如果您在*迴圈*動作內新增*調用 Lambda* 動作，您可以從每個重複項目傳送類似於參數的欄位： `varName: currentItem.fieldName`

   1. **模擬輸出**欄位可用於提供模擬輸出，以在預覽時測試應用程式，其中連接器未處於作用中狀態。

## 設定 UI 元素以執行自動化
<a name="tutorial-lambda-create-pages"></a>

現在您的自動化已設定 動作來叫用 Lambda 函數，您可以設定 UI 元素來執行自動化。在本教學課程中，您將建立一個按鈕，在按一下時執行自動化。

**提示**  
您也可以使用*叫用自動化動作從其他自動化執行自動化*。

**從按鈕執行自動化**

1. 編輯應用程式時，請選擇**分頁**索引標籤。

1. 在右側功能表中，選擇**按鈕**元件，將按鈕新增至頁面。

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>

在應用程式工作室中，您可以找到有關支援資源或屬性的 **Ask AI for help** 按鈕。使用此項目可取得與目前檢視或所選元件相關的內容建議、文件和指引。詢問有關 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 存取資料來源的**連接器**，然後選取 **Tablse**，然後選擇**下一步**，將任何現有資料來源新增至您的應用程式。在此處新增資料來源有助於 AI 為您產生最佳化應用程式。您可以略過此步驟，稍後再選擇**略過**來新增資料來源。

   1. 在短暫延遲 （幾分鐘） 後，系統會將您導向**使用 AI 產生應用程式**頁面，您可以在其中描述您要建立的應用程式。

   1. 您可以在聊天中開始描述您的應用程式，也可以選擇和自訂提供的範例提示。

   1. 分析您的提示後，請檢閱應用程式需求和概觀。使用聊天功能請求任何變更，或選擇**重新開始**以從空白提示開始。

   1. 準備就緒時，選擇**產生應用程式**。

   1. 產生後，請選擇預覽應用程式，在另一個索引標籤中**預覽您的應用程式**。當您準備好開始編輯時，可以選擇**編輯應用程式**。瀏覽應用程式的頁面、自動化和資料，以熟悉它。檢閱底部偵錯面板中的任何錯誤或警告。若要了解如何使用 AI 產生應用程式，請參閱 [教學課程：使用 AI 產生應用程式](getting-started-tutorial-ai.md)。如需有關在 App Studio 中建置如何運作的一般資訊，請參閱 [AWS App Studio 的運作方式](how-it-works.md)。

1. 如果您選擇**從頭開始**：

   1. 在**連線至現有資料**對話方塊中，選取提供 App Studio 存取資料來源的**連接器**，然後選取 **Tablse**，然後選擇**下一步**，將任何現有資料來源新增至您的應用程式。您可以略過此步驟，稍後再選擇**略過**來新增資料來源。

   1. 建立應用程式後，請選擇**編輯應用程式**以開始編輯應用程式。若要了解如何從空白應用程式建置 ，請參閱 [教學課程：從空白應用程式開始建置](getting-started-tutorial-empty.md)。如需有關在 App Studio 中建置如何運作的一般資訊，請參閱 [AWS App Studio 的運作方式](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 App Studio 的運作方式](how-it-works.md)

## App Studio 提供的可匯入應用程式
<a name="app-catalog"></a>

App Studio 提供可匯入執行個體的應用程式，協助您了解應用程式建置。若要查看 App Studio 中如何實作特定應用程式功能，您可以預覽應用程式，然後在開發環境中瀏覽其組態。

下表包含應用程式清單、其匯入代碼，以及應用程式的簡短描述。每個應用程式都包含一個`README`頁面，其中包含您可以在匯入應用程式後檢視的應用程式相關資訊。


| 應用程式名稱 | Description | 匯入程式碼 | 
| --- | --- | --- | 
|  **Swag 請求調查**  |  內部 swag 請求應用程式，旨在供員工訂購品牌公司商品。員工可以選取項目並指定大小，並透過簡單的表單提交其請求。此應用程式會透過內建儲存體處理所有資料，無需外部連線。  |  Swag 請求Survey/ec4f5faf-e2f8-42ee-ab8d-6723d8ca21b2  | 
|  **衝刺追蹤**  |  團隊可用來組織和追蹤軟體開發工作的衝刺管理應用程式。使用者可以建立衝刺、新增任務、指派工作，以及透過專用衝刺、追蹤和任務檢視監控進度。此應用程式會透過內建儲存體處理所有資料，無需外部連線。  |  衝刺Tracking/8f31e160-771f-48d7-87b0-374e285e2fbc  | 
|  **Amazon Review 情緒追蹤器**  |  此應用程式是一種客戶意見回饋分析工具，可從產品評論產生情緒分數，以協助企業了解客戶滿意度。此應用程式包含用於快速測試的範例資料產生公用程式，並需要 Amazon Bedrock 連接器以取得 AI 技術的洞見，同時在內建儲存系統中維護所有其他資料。  |  Amazon Review 情緒Tracker/60f0dae4-f8e2-4c20-9583-fa456f5ebfab  | 
|  **發票和接收處理**  |  此接收處理應用程式透過自動化手動資料輸入和簡化文件核准工作流程來節省時間並減少錯誤。解決方案需要 Amazon Textract、Amazon S3 和 Amazon SES 連接器。它使用 Amazon Textract 從存放在 Amazon S3 中的收據分析和擷取資料，然後使用 Amazon SES 處理擷取的資訊並透過電子郵件傳送給核准者。  |  發票和接收Processing/98bde3ae-e454-4b18-a1e6-6f23e8b2a4f1  | 
|  **檢查和庫存稽核**  |  用於管理倉儲檢查和設備追蹤的應用程式。使用者可以依房間位置執行通過/失敗設備評估、監控庫存層級，以及檢視檢查歷史記錄。應用程式提供集中式系統，用於追蹤設施檢查和設備狀態。此應用程式會透過內建儲存體處理所有資料，無需外部連線。  |  檢查和庫存Audit/cf570a06-1c5e-4dd7-9ea8-5c04723d687f  | 
|  **產品採用追蹤器**  |  管理產品開發的全方位應用程式，可集中客戶意見回饋、功能請求和客戶會議備註。團隊可以追蹤客戶互動、組織需求，以及為每季藍圖規劃產生 AI 支援的報告。應用程式包含範例資料公用程式，並利用 Amazon Bedrock 取得 AI 洞見，以及利用 Amazon Aurora PostgreSQL 進行資料管理。  |  產品採用Tracker/9b3a4437-bb50-467f-ae9e-d108776b7ca1  | 
|  **快速內嵌**  |  示範應用程式，可讓使用者在使用基礎資料時檢視分析。應用程式包含兩種在 App Studio 中內嵌 Amazon Quick 儀表板的方法：適用於已註冊和匿名使用者的 API 型方法 （需要 Quick 連接器），以及適用於公有儀表板的 iFrame 整合。  |  Quicksight Embedding/0cdc15fc-ca8b-41b7-869e-ed13c9072bc8  | 
|  **Kitchen 接收器**  |  顯示進階 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. 選擇 **Duplicate (複製)**。

# 編輯或建置應用程式
<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. 您選擇編輯的版本現在是開發環境中的目前版本。您可以進行變更，或依原樣選擇**發佈**，將其發佈至測試環境。發佈至測試後，您可以視需要再次發佈至生產環境。

# 重新命名應用程式
<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. 如有必要，請導覽至您要預覽之應用程式的應用程式 Studio：

   1. 在導覽窗格中，選擇**建置**區段中的**我的應用程式**。

   1. 為應用程式選擇**編輯**。

1. 選擇**預覽**以開啟應用程式的預覽環境。

1. （選用） 選擇靠近畫面底部的標頭，展開偵錯面板。您可以在篩選**日誌**區段中選擇訊息類型，依訊息類型篩選面板。您可以選擇清除**主控台來清除**面板的日誌。

1. 在預覽環境中，您可以透過導覽應用程式頁面、使用其元件，並選擇其按鈕來啟動傳輸資料的自動化來測試應用程式。由於預覽環境不支援即時資料或連線到外部來源，因此您可以在偵錯面板中檢視正在傳輸的資料範例。

# 發佈應用程式
<a name="applications-publish"></a>

當您完成建立和設定應用程式後，下一步是發佈應用程式，以測試資料傳輸或與最終使用者共用資料傳輸。若要了解在 App Studio 中發佈應用程式，請務必了解可用的環境。App Studio 提供三個不同的環境，如下列清單所述：

1. **開發**：您建置和預覽應用程式的位置。您不需要發佈到 開發環境，因為應用程式的最新版本會自動託管在那裡。此環境中沒有即時資料或第三方服務或資源。

1. **測試**：您可以在其中執行應用程式的完整測試。在測試環境中，您可以連線、傳送資料至其他 服務，以及從其他 服務接收資料。

1. **生產**：最終使用者耗用的即時操作環境。

您的所有應用程式建置都會在**開發**環境中進行。然後，將存取 URL 提供給最終使用者，發佈至**測試**環境以測試其他服務之間的資料傳輸，以及使用者接受度測試 (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. 如有必要，請導覽至您要預覽之應用程式的應用程式 Studio：

   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>

初始應用程式開發完成後，下一步是發佈至**測試**環境。在測試環境中，您的應用程式可以連線、傳送資料至其他 服務，以及從其他 服務接收資料。因此，您可以使用此環境，透過向最終使用者提供存取 URL 來執行包括使用者接受度測試 (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. 選擇 **Export** (匯出)。

1. 產生和共用匯入碼的程序會根據是否已為應用程式建立匯入碼而有所不同。
   + 如果尚未建立匯入碼：

     1. 在**應用程式匯入許可**中，指定哪些執行個體可以匯入匯出的應用程式。您可以為所有執行個體提供匯入許可，或輸入其執行個體 IDs 來新增特定的 App Studio 執行個體。使用逗號分隔多個執行個體 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。每個頁面都代表應用程式使用者介面 (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. 在確認對話方塊中，選擇 **Delete** (刪除)。

# 設定頁面的角色型可見性
<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. 選取**自訂**後，輸入解析為 true 或 false 的 JavaScript 表達式。使用下列範例來檢查目前使用者是否具有 *manager* 的角色：`{{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. 在**主要顏色**中，選擇套用至特定元件和應用程式導覽的顏色。您可以使用顏色挑選器、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 中保持不變。

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

每個元件都會產生預設名稱；不過，您可以編輯 ，將 變更為每個元件的唯一名稱。您將使用此名稱來參考元件及其來自相同頁面中其他元件或表達式的資料。限制：請勿在元件名稱中包含空格；它只能有字母、數字、底線和貨幣符號。範例：`userNameInput`、`ordersTable`、`metricCard1`。

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

應用程式工作室中的許多元件會提供欄位來指定值或表達式，以決定元件內顯示的內容或資料。這些欄位通常標示為 `Primary value`、 `Secondary value`或 `Value`，取決於元件類型和用途。

`Primary value` 欄位通常用於定義應在元件內顯著顯示的主要值、資料點或內容。

可用時， `Secondary value` 欄位會用來顯示額外或支援值，或是與主要值一起顯示的資訊。

`Value` 欄位可讓您指定應該顯示在元件中的值或表達式。

這些欄位同時支援靜態文字輸入和動態表達式。透過使用表達式，您可以參考應用程式中其他元件、資料來源或變數的資料，以啟用動態和資料驅動的內容顯示。

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

在這些欄位中輸入表達式的語法遵循一致的模式：

```
{{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 為 的元件資料的第一個項目擷取`fieldName`欄位的值`componentName`。
+ `{{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>

**Label** 屬性可讓您指定元件的字幕或標題。此標籤通常會在元件旁邊或上方顯示，協助使用者了解其用途。

您可以使用靜態文字和表達式來定義標籤。

#### 範例：靜態文字
<a name="label-static-example"></a>

如果您在標籤欄位中輸入文字 "First Name"，元件會顯示 "First Name" 做為其標籤。

#### 範例：運算式
<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}}
```

### 預留位置
<a name="common-properties-placeholder"></a>

預留位置屬性可讓您指定在元件為空時顯示在元件中的提示或指引文字。這可協助使用者了解預期的輸入格式，或提供額外的內容。

您可以使用靜態文字和表達式來定義預留位置。

#### 範例：靜態文字
<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>

Source **** 屬性可讓您選取元件的資料來源。選擇後，您可以選擇下列資料來源類型：`entity`、 `expression`或 `automation`。

#### 實體
<a name="common-properties-source-entity"></a>

選取**實體**做為資料來源可讓您將元件連接至應用程式中現有的資料實體或模型。當您有定義明確的資料結構或結構描述，而您想要在整個應用程式中利用時，此功能非常有用。

何時使用實體資料來源：
+ 當您的資料模型或實體包含您要在元件中顯示的資訊時 （例如，具有 "Name"、"Description"、"Price" 等欄位的 "Products" 實體）。
+ 當您需要動態從資料庫、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`、`Price`、 `Description`和 等欄位`Category`。您可以將名為 的參數新增至顯示產品清單的`category`資料表元件。當使用者從下拉式清單中選取類別時，資料表會自動更新，以使用資料動作中的`{{params.category}}`表達式，僅顯示屬於所選類別的產品。

#### 表達式
<a name="common-properties-source-expression"></a>

選取**表達式**做為資料來源，以輸入自訂表達式或計算，以動態產生元件的資料。當您需要執行轉換、合併來自多個來源的資料，或根據特定商業邏輯產生資料時，這會很有用。

何時使用**表達式**資料來源：
+ 當您需要計算或衍生資料模型中未直接提供的資料時 （例如，根據數量和價格計算總訂單值）。
+ 當您想要結合來自多個實體或資料來源的資料來建立複合檢視時 （例如，顯示客戶的訂單歷史記錄及其聯絡資訊）。
+ 當您需要根據特定規則或條件產生資料時 （例如，根據使用者的瀏覽歷史記錄顯示「建議產品」清單）。

例如，如果您的*指標*元件需要顯示當月的總收入，您可以使用如下的表達式來計算和顯示每月收入：

```
{{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>

選取**自動化**做為資料來源，將元件連接到應用程式中現有的自動化或工作流程。當在特定程序或工作流程中產生或更新元件的資料或功能時，這很有用。

何時使用**自動化**資料來源：
+ 當元件中顯示的資料是特定自動化或工作流程的結果時 （例如，在核准程序中更新的「待核准」資料表）。
+ 當您想要根據自動化中的事件或條件觸發元件的動作或更新時 （例如，使用 SKU 的最新銷售數字更新指標）。
+ 當您需要透過自動化將元件與應用程式中的其他服務或系統整合時 （例如，從第三方 API 擷取資料並將其顯示在資料表中）。

例如，如果您有引導使用者完成任務應用程式程序的步驟流程元件。步驟流程元件可以連接到處理任務應用程式提交、背景檢查和產生優惠的自動化。隨著自動化進行這些步驟，步驟流程元件可以動態更新，以反映應用程式的目前狀態。

透過仔細為每個元件選擇適當的資料來源，您可以確保應用程式的使用者介面是由正確的資料和邏輯提供支援，為您的使用者提供無縫且引人入勝的體驗。

### 如果 可見
<a name="visible-if"></a>

使用 **Visible if** 屬性，根據特定條件或資料值顯示或隱藏元件或元素。當您想要動態控制應用程式使用者介面特定部分的可見性時，此功能非常有用。

屬性使用以下語法**時可見**：

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

或

```
{{expression}}
```

其中*運算式*是評估為 `true`或 的布林運算式`false`。

如果表達式評估為 `true`，則會顯示元件。如果表達式評估為 `false`，則會隱藏元件。表達式可以參考應用程式中其他元件、資料來源或變數的值。

#### 如果表達式範例可見
<a name="visible-if-examples"></a>

##### 範例：根據電子郵件輸入顯示或隱藏密碼輸入欄位
<a name="visible-if-example-password-email"></a>

假設您有一個包含電子郵件輸入欄位和密碼輸入欄位的登入表單。只有在使用者已輸入電子郵件地址時，才想要顯示密碼輸入欄位。如果表達式為 ，您可以使用下列可見：

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

此表達式會檢查`emailInput`元件的值是否不是空字串。如果使用者已輸入電子郵件地址，表達式會評估為 `true`，且密碼輸入欄位會顯示。如果電子郵件欄位為空白，表達式會評估為 `false`，且密碼輸入欄位會隱藏。

##### 範例：根據下拉式清單選擇顯示其他表單欄位
<a name="visible-if-example-form-fields-dropdown"></a>

假設您有一個表單，使用者可以從下拉式清單中選取類別。根據選取的類別，您想要顯示或隱藏其他表單欄位，以收集更具體的資訊。

例如，如果使用者選取*產品*類別，您可以使用下列表達式來顯示額外的*產品詳細資訊*欄位：

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

如果使用者選取*服務或**諮詢*類別，您可以使用此表達式來顯示一組不同的其他欄位：

```
{{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** 屬性來實現的，該屬性接受布林表達式來決定應該啟用或停用元件。

**停用，如果** 屬性使用以下語法：

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

或

```
{{expression}}
```

#### 如果表達式範例已停用
<a name="disabled-if-examples"></a>

##### 範例：根據表單驗證停用提交按鈕
<a name="disabled-if-example-disable-submit-button"></a>

如果您有包含多個輸入欄位的表單，而且您想要停用提交按鈕，直到正確填寫所有必要欄位，您可以使用下列**已停用 如果**表達式：

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

此表達式會檢查是否有任何必要的輸入欄位 (`nameInput`、`emailInput`、`passwordInput`) 是空的。如果任何欄位為空白，表達式會評估為 `true`，且提交按鈕將會停用。填寫所有必要欄位後，表達式會評估為 `false`，並啟用提交按鈕。

透過在**可見 **和**已停用 ff** 屬性中使用這些類型的條件式表達式，您可以建立動態和回應式使用者介面來適應使用者輸入，為應用程式的使用者提供更簡化和相關的體驗。

其中*運算式*是評估為 true 或 false 的布林運算式。

範例：

```
{{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>
+ **水平**：此配置會在單一資料列中水平排列內容或元素。
+ **垂直**：此配置會在單一欄中垂直排列內容或元素。
+ **內嵌包裝**：此配置會水平排列內容或元素，但如果元素超過可用寬度，則會包裝到下一行。

##### Alignment
<a name="container-layouts-alignment"></a>
+ **左**：將內容或元素對齊元件的左側。
+ **中心**：在元件內水平置中內容或元素。
+ **右側**：將內容或元素對齊元件的右側。

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

**Width** 屬性指定元件的水平大小。您可以輸入介於 0% 到 100% 之間的百分比值，代表元件相對於其父容器或可用空間的寬度。

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

**高度**屬性指定元件的垂直大小。「自動」值會根據元件的內容或可用空間自動調整元件的高度。

##### 之間的空間
<a name="container-layouts-space-between"></a>

屬性**之間的空間**決定元件內內容或元素之間的間距或間隙。您可以選擇從 0px （無間距） 到 64px 的值，增量為 4px （例如 4px、8px、12px 等）。

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

**填補**屬性控制內容或元素與元件邊緣之間的空間。您可以選擇從 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}}`- 此表達式會顯示資料欄儲存格中目前資料列的*標題*欄位值。
+ **啟用排序**：此切換可讓您啟用或停用特定資料欄的排序功能。啟用時，使用者可以根據此欄中的值來排序資料表資料。

##### 搜尋和匯出
<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
  + 叫用自動化

##### 表達式
<a name="table-component-properties-expressions"></a>

**資料表**元件提供數個使用表達式和資料列層級動作功能的區域，可讓您自訂和增強資料表的功能和互動性。它們可讓您動態參考和顯示資料表中的資料。透過利用這些表達式欄位，您可以建立動態資料欄、將資料傳遞至資料列層級動作，以及參考應用程式中其他元件或表達式的資料表資料。

##### 範例：參考資料列值
<a name="table-component-properties-examples-referencing-row-values"></a>

`{{currentRow.columnName}}` 或 `{{currentRow["Column Name"]}}` 這些表達式可讓您參考正在轉譯的目前資料列之特定資料欄的值。將 *columnName* 或 *Column Name* 取代為您要參考的資料欄的實際名稱。

範例：
+ `{{currentRow.productName}}` 顯示目前資料列的產品名稱。
+ `{{currentRow["Supplier Name"]}}` 顯示目前資料列的供應商名稱，其中資料欄標頭是*供應商名稱*。
+ `{{currentRow.orderDate}}` 顯示目前資料列的訂單日期。

##### 範例：參考選取的資料列
<a name="table-component-properties-examples-referencing-selected-row"></a>

`{{ui.table1.selectedRow["columnName"]}}` 此表達式可讓您使用 ID 資料表 *1* 來參考資料表中目前選取資料列之特定資料欄的值。將 *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}}` 做為參數傳遞，以導覽至具有所選訂單 ID 的訂單編輯頁面。
+ 如果您在資料列動作欄中有刪除按鈕，您可以傳遞`{{currentRow.customerName}}`至自動化，在刪除其訂單之前傳送確認電子郵件給客戶。
+ 如果您在資料列動作欄中有檢視詳細資訊按鈕，您可以傳遞`{{currentRow.employeeId}}`至自動化，以記錄檢視訂單詳細資訊的員工。

透過利用這些表達式欄位和資料列層級動作功能，您可以建立高度自訂的互動式資料表，根據您的特定需求顯示和操作資料。此外，您可以連接資料列層級動作與應用程式中的其他元件或自動化，實現無縫的資料流程和功能。

### 詳細資訊
<a name="detail-component"></a>

**詳細資訊**元件旨在顯示特定記錄或項目的詳細資訊。它提供專用空間來呈現與單一實體或資料列相關的完整資料，因此非常適合顯示深入的詳細資訊或協助資料輸入和編輯任務。

#### 詳細資訊屬性
<a name="detail-component-properties"></a>

**詳細資訊**元件與其他元件共用數個常見的屬性，例如 `Name`、 `Source`和 `Actions`。如需這些屬性的詳細資訊，請參閱 [常見元件屬性](#common-properties)。

**詳細資訊**元件也有特定的屬性和組態選項，包括 `Fields`、 `Layout`和 `Expressions`。

#### 版面配置
<a name="detail-component-properties-layout"></a>

**配置**區段可讓您自訂**詳細資訊**元件中欄位的配置和呈現。您可以設定選項，例如：
+ **資料欄數**：指定要顯示欄位的資料欄數。
+ **欄位排序**：拖放欄位以重新排序其外觀。
+ **間距和對齊**：調整元件內欄位的間距和對齊。

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

**詳細資訊**元件提供各種表達式欄位，可讓您動態參考和顯示元件內的資料。這些表達式可讓您建立自訂和互動式 **Detail** 元件，無縫地與您應用程式的資料和邏輯連線。

##### 範例：參考資料
<a name="detail-component-properties-examples-referencing-data"></a>

`{{ui.details.data[0]?.["colName"]}}`：此表達式可讓您參考資料陣列中第一個項目 （索引 0) 名為 "colName" 的資料欄值，該資料陣列連接到 ID 為 "details" **的詳細資訊**元件。將 "colName" 取代為您要參考的資料欄的實際名稱。例如，下列表達式會顯示連線至「詳細資訊」元件的資料陣列中第一個項目的「customerName」資料欄的值：

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

**注意**  
當 **Detail** 元件與所參考的資料表位於相同頁面上，而且您想要在 **Detail** 元件中顯示資料表第一列的資料時，此表達式很有用。

##### 範例：條件式轉譯
<a name="detail-component-properties-examples-conditional-rendering"></a>

`{{ui.table1.selectedRow["colName"]}}`：如果 ID *資料表 1* 的資料表中選取的資料列具有名為 *colName* 的資料欄，則此表達式會傳回 true。它可用來根據資料表選取的資料列是否為空白，有條件顯示或隱藏 **Detail** 元件。

範例：

您可以在 **Detail** 元件的 `Visible if` 屬性中使用此表達式，根據資料表中選取的資料列來有條件地顯示或隱藏該表達式。

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

如果此表達式評估為 true (*資料表 1* 元件中選取的資料列具有 *customerName* 資料欄的值），則會顯示**詳細資訊**元件。如果表達式評估為 false （即選取的資料列空白或沒有 "customerName" 的值），則會隱藏 **Detail** 元件。

##### 範例：條件式顯示
<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 元件之*元件*的值。
+ `=== "green"`：檢查元件的值是否等於字串 "green"。
+ `? "🟢"`：如果條件為 true， 會顯示綠色圓圈表情符號。
+ `: ui.Component.value === "yellow" ? "🟡"`：如果第一個條件為 false， 會檢查元件的值是否等於字串「黃色」。
+ `? "🟡"`：如果第二個條件為 true， 會顯示黃色方形表情符號。
+ `: ui.detail1.data?.[0]?.CustomerStatus`：如果兩個條件都是 false，則會參考連線至 ID 為 "detail1" 之 Detail 元件的資料陣列中第一個項目的 "CustomerStatus" 值。

此表達式可用來根據 **Detail** 元件中的元件或資料欄位的值顯示表情符號或特定值。

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

**指標**元件是一種視覺化元素，以類似卡片的格式顯示關鍵指標或資料點。它旨在提供簡潔且視覺上吸引人的方式，以呈現重要資訊或效能指標。

#### 指標屬性
<a name="metrics-properties"></a>

**指標**元件與其他元件共用數個共同屬性，例如 `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>

此欄位可讓您輸入運算式，以定義正面趨勢的條件。表達式應評估為 true 或 false。

範例：

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

此表達式會檢查month-over-month營收值是否大於 0，表示正趨勢。

##### 負面趨勢
<a name="metrics-properties-negative-trend"></a>

此欄位可讓您輸入定義負趨勢條件的表達式。表達式應評估為 true 或 false。

範例：

```
{{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}}`
+ **Color Bbar**：已啟用

##### 範例：客戶滿意度趨勢
<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}}`：此表達式可讓您參考**指標**元件的主要值，以及相同頁面中其他元件或表達式的 ID *指標 1*。

範例： `{{ui.salesMetrics.primaryValue}}`會顯示 *salesMetrics* **指標**元件的主要值。

##### 範例：參考次要值
<a name="metrics-expression-examples-referencing-secondary-value"></a>

`{{ui.metric1.secondaryValue}}`：此表達式可讓您參考**指標**元件的次要值，以及相同頁面中其他元件或表達式的 ID *指標 1*。

範例： `{{ui.revenueMetrics.secondaryValue}}`會顯示 *revenueMetrics* **指標**元件的次要值。

##### 範例：參考資料
<a name="metrics-expression-examples-referencing-data"></a>

`{{ui.metric1.data}}`：此表達式可讓您使用相同頁面中其他元件或表達式的 ID *指標 1* 來參考**指標**元件的資料。

範例： `{{ui.kpiMetrics.data}}`會參考連線至 *kpiMetrics* **指標**元件的資料。

##### 範例：顯示特定資料值：
<a name="metrics-expression-examples-displaying-specific-data-values"></a>

`{{ui.metric1.data?.[0]?.id}}`：此表達式是如何使用 **** ID *指標 1* 顯示資料中特定資訊片段的範例。當您想要顯示資料中第一個項目的特定屬性時，此功能非常有用。

明細：
+ `ui.metric1`：參考 ID *指標 1* 的**指標**元件。
+ `data`：參考連接到該元件的資訊或資料集。
+ `?.[0]`：表示該資料集的第一個項目或項目。
+ `?.id`：顯示第一個項目或項目的 *ID* 值或識別符。

範例： `{{ui.orderMetrics.data?.[0]?.orderId}}` 會顯示連線至 orderMetrics 指標元件的資料中第一個項目的 *orderId* 值。 *orderMetrics* **** 

##### 範例：顯示資料長度
<a name="metrics-expression-examples-displaying-data-length"></a>

`{{ui.metric1.data?.length}}`：此表達式示範如何使用 ID *指標 1*，在連線至**指標**元件的資料中顯示長度 （項目數量）。當您想要顯示資料中的項目數量時，此功能非常有用。

明細：
+ `ui.metric1.data`：參考連接到元件的資料集。
+ `?.length`：存取該資料集中的項目或項目總數或數量。

範例： `{{ui.productMetrics.data?.length}}`會顯示連線至 *productMetrics* **指標**元件的資料中的項目數量。

### 延伸器
<a name="repeater-component"></a>

**延伸器**元件是一種動態元件，可讓您根據提供的資料來源產生和顯示元素集合。它旨在促進在應用程式的使用者介面中建立清單、網格或重複模式。幾個範例使用案例包括：
+ 顯示帳戶中每個使用者的卡片
+ 顯示包含影像和按鈕的產品清單，以將其新增至購物車
+ 顯示使用者可存取的檔案清單

**延伸器**元件會區分自己與具有豐富內容的**資料表**元件。**資料表**元件具有嚴格的資料列和資料欄格式。**延伸器**可以更靈活地顯示您的資料。

#### 延伸器屬性
<a name="repeater-component-properties"></a>

**延伸器**元件與其他元件共用數個常見屬性，例如 `Name`、 `Source`和 `Actions`。如需這些屬性的詳細資訊，請參閱 [常見元件屬性](#common-properties)。

除了常見的屬性之外，**延伸器**元件還具有下列其他屬性和組態選項。

#### 項目範本
<a name="repeater-component-properties-item-template"></a>

**項目範本**是一個容器，您可以在其中定義要針對資料來源中每個項目重複的結構和元件。您可以將其他元件拖放到此容器中，例如**文字**、**影像**、**按鈕**，或是代表每個項目所需的任何其他元件。

在**項目範本**中，您可以使用 格式的表達式來參考目前項目的屬性或值`{{currentItem.propertyName}}`。

例如，如果您的資料來源包含 `itemName` 屬性，您可以使用 `{{currentItem.itemName}}` 來顯示目前項目的項目名稱 (s)。

#### 版面配置
<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** 元件提供各種表達式欄位，可讓您動態參考和顯示元件內的資料。這些表達式可讓您建立自訂和互動式**的 Repeater** 元件，無縫連線至應用程式的資料和邏輯。

##### 範例：參考項目
<a name="repeater-component-properties-expressions-examples-referencing-items"></a>
+ `{{currentItem.propertyName}}`：參考**項目範本**中目前項目的屬性或值。
+ `{{ui.repeaterID[index]}}`：依索引參考延伸器元件中的特定項目。

##### 範例：轉譯產品清單
<a name="repeater-component-properties-expressions-examples-rendering-product-list"></a>
+ **來源**：選取*產品*實體做為資料來源。
+ **項目範本**：新增**容器**元件，其中包含**文字**元件以顯示產品名稱 (`{{currentItem.productName}}`) 和**影像**元件以顯示產品影像 (`{{currentItem.productImageUrl}}`)。
+ **配置**：將 設定為 `Rows per Page`，`Orientation``List`並視需要調整 。

##### 範例：產生使用者頭像的網格
<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>

Form 元件旨在擷取使用者輸入，並促進應用程式中的資料輸入任務。它提供結構化配置，可顯示輸入欄位、下拉式清單、核取方塊和其他表單控制項，允許使用者無縫輸入或修改資料。您可以在表單元件內巢狀化其他元件，例如資料表。

#### 表單屬性
<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) 如需常見屬性的更多表達式範例，請參閱 。

透過設定這些屬性並利用表達式，您可以建立自訂的互動式表單元件，無縫整合應用程式的資料來源和邏輯。這些元件可用來擷取使用者輸入、顯示預先填入的資料，以及根據表單提交或使用者互動觸發動作。

### Stepflow
<a name="stepflow-component"></a>

**Stepflow** 元件旨在引導使用者完成應用程式中的多步驟程序或工作流程。它提供結構化且直覺式的界面來呈現一系列的步驟，每個步驟都有自己的一組輸入、驗證和動作。

Stepflow 元件與其他元件共用數個常見的屬性，例如 `Name`、 `Source`和 `Actions`。如需這些屬性的詳細資訊，請參閱 [常見元件屬性](#common-properties)。

**Stepflow** 元件具有其他屬性和組態選項，例如 `Step Navigation`、 `Validation`和 `Expressions`。

## AI 元件
<a name="ai-components"></a>

### Gen AI
<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}}`：傳回文字區域中所提供值的有效性。

### Email
<a name="email-component"></a>

**電子郵件**元件是專門的輸入欄位，旨在從使用者擷取電子郵件地址。它可以強制執行特定的驗證規則，以確保輸入的值遵循正確的電子郵件格式。
+ `{{ui.emailID.value}}`：傳回電子郵件輸入欄位中提供的值。
+ `{{ui.emailID.isValid}}`：傳回電子郵件輸入欄位中所提供值的有效性。

### 密碼
<a name="password-component"></a>

**密碼**元件是專門為使用者設計的輸入欄位，用於輸入敏感資訊，例如密碼或 PIN 碼。它會遮罩輸入的字元，以維護隱私權和安全性。
+ `{{ui.passwordID.value}}`：傳回密碼輸入欄位中提供的值。
+ `{{ui.passwordID.isValid}}`：傳回密碼輸入欄位中所提供值的有效性。

### 搜尋
<a name="search-component"></a>

**搜尋**元件為使用者提供專用輸入欄位，以執行搜尋查詢或在應用程式中填入的資料內輸入搜尋詞彙。
+ `{{ui.searchID.value}}`：傳回搜尋欄位中提供的值。

### Phone
<a name="phone-component"></a>

**電話**元件是一種輸入欄位，專為從使用者擷取電話號碼或其他聯絡資訊而量身打造。它可以包含特定的驗證規則和格式選項，以確保輸入的值符合正確的電話號碼格式。
+ `{{ui.phoneID.value}}`：傳回電話輸入欄位中提供的值。
+ `{{ui.phoneID.isValid}}`：傳回電話輸入欄位中所提供值的有效性。

### Number
<a name="number-component"></a>

**Number** 元件是專為使用者輸入數值而設計的輸入欄位。它可以強制執行驗證規則，以確保輸入的值是指定範圍或格式內的有效數字。
+ `{{ui.numberID.value}}`：傳回數字輸入欄位中提供的值。
+ `{{ui.numberID.isValid}}`：傳回數字輸入欄位中所提供值的有效性。

### Currency
<a name="currency-component"></a>

**貨幣**元件是專門的輸入欄位，用於擷取貨幣值或金額。它可以包含格式選項，以顯示貨幣符號、小數分隔符號，以及強制執行貨幣輸入特定的驗證規則。
+ `{{ui.currencyID.value}}`：傳回貨幣輸入欄位中提供的值。
+ `{{ui.currencyID.isValid}}`：傳回貨幣輸入欄位中所提供值的有效性。

### 詳細資訊對
<a name="detail-pair-component"></a>

**詳細資訊對**元件用於以結構化且可讀取的格式顯示鍵值對或相關資訊對。它通常用於呈現與特定項目或實體相關聯的詳細資訊或中繼資料。

## 選擇元件
<a name="selection-components"></a>

### 交換器
<a name="switch-component"></a>

**切換**元件是一種使用者介面控制項，可讓使用者在兩種狀態或選項之間切換，例如開/關、 true/false 或 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>

**無線電群組**元件是一組選項按鈕，可讓使用者從多個互斥選項中選取單一選項。它可確保一次只能選擇一個選項，為使用者提供清晰且明確的方式進行選擇。

#### 無線電群組表達式欄位
<a name="radio-group-expression-fields"></a>

下列欄位可用於表達式。
+ `{{ui.radioGroupID.value}}`：傳回應用程式使用者所選取選項按鈕的值。

### 單一選取
<a name="single-select-component"></a>

**單一選取**元件為使用者提供選項清單，他們可以從中選取單一項目。它通常用於使用者需要從預先定義的一組選項中進行選擇的情況，例如選取類別、位置或偏好設定。

#### 單一選取表達式欄位
<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>
+ **按鈕**：標準按鈕。
+ **概述**：概述樣式的按鈕。
+ **圖示**：具有圖示的按鈕。
+ **文字**：純文字按鈕。

#### 大小
<a name="button-size"></a>

按鈕的大小。可能值為 `Small`、`Medium` 及 `Large`。

#### 圖示
<a name="button-icon"></a>

您可以從要顯示在按鈕上的各種圖示中選取，包括：
+ 信封已關閉
+ 鐘
+ 個人
+ 漢堡選單
+ 搜尋
+ Info Circled
+ 齒輪
+ 左年紋
+ Chevron 右側
+ 水平點
+ 垃圾桶
+ 編輯
+ Check
+ Close (關閉)
+ 首頁
+ Plus

#### 觸發
<a name="button-triggers"></a>

按一下按鈕時，您可以設定要觸發的一或多個動作。可用的動作類型為：
+ **基本**
  + 執行元件動作：在元件中執行特定動作。
  + 導覽：導覽至另一個頁面或檢視。
  + 叫用資料動作：觸發與資料相關的動作，例如建立、更新或刪除記錄。
+ **Advanced (進階)**
  + 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>

### Date
<a name="date-component"></a>

**日期**元件允許使用者選取和輸入日期。

**Date** 元件與其他元件共用數個常見的屬性，例如 `Name`、 `Source`和 `Validation`。如需這些屬性的詳細資訊，請參閱 [常見元件屬性](#common-properties)。

除了常見的屬性之外，**日期**元件還具有下列特定屬性：

#### 日期屬性
<a name="date-component-properties"></a>

##### 格式
<a name="date-component-properties-format"></a>
+ **YYYY/MM/DD**、**DD/MM/YYYY**、**YYYY/MM/DD**、**YYYY/DD/MM**、**MM/DD**、**DD/MM**：應顯示日期的格式。

##### Value
<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 個月**：要顯示的行事曆 UI 類型。

##### 停用日期
<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}}`：停用週末。

##### Behavior (行為)
<a name="date-component-properties-behavior"></a>
+ **如果顯示**：決定**日期**元件可見性的表達式。
+ **停用，如果**：決定是否應停用**日期**元件的表達式。

#### 驗證
<a name="date-component-properties-validation"></a>

**驗證**區段可讓您定義日期輸入的其他規則和限制。透過設定這些驗證規則，您可以確保使用者輸入的日期值符合您應用程式的特定要求。您可以新增下列類型的驗證：
+ **必要**：此切換可確保使用者在提交表單之前必須輸入日期值。
+ **自訂**：您可以使用 JavaScript 表達式建立自訂驗證規則。例如：

  ```
  {{new Date(ui.dateInput.value) < new Date("2023-01-01")}}
  ```

  此表達式會檢查輸入的日期是否早於 2023 年 1 月 1 日。如果條件為 true，驗證將會失敗。

  您也可以提供自訂驗證訊息，以便在不符合驗證時顯示：

  ```
  "Validation not met. The date must be on or after January 1, 2023."
  ```

透過設定這些驗證規則，您可以確保使用者輸入的日期值符合您應用程式的特定要求。

#### 表達式和範例
<a name="date-component-expressions"></a>

**Date** 元件提供下列表達式欄位：
+ `{{ui.dateID.value}}`：傳回使用者輸入的日期值，格式為 `YYYY-MM-DD`。

### 時間
<a name="time-component"></a>

**時間**元件允許使用者選取和輸入時間值。透過設定**時間**元件的各種屬性，您可以建立符合應用程式特定需求的時間輸入欄位，例如限制可選取的時間範圍、停用特定時間，以及控制元件的可見性和互動性。

#### 時間屬性
<a name="time-component-properties"></a>

**時間**元件與其他元件共用數個共同屬性，例如 `Name`、 `Source`和 `Validation`。如需這些屬性的詳細資訊，請參閱 [常見元件屬性](#common-properties)。

除了常見的屬性之外，**時間**元件還具有下列特定屬性：

##### 時間間隔
<a name="time-component-properties-time-intervals"></a>
+ **5 分鐘**、**10 分鐘**、**15 分鐘**、**20 分鐘**、**25 分鐘**、**30 分鐘**、**60 分鐘**：可用於選取時間的間隔。

##### Value
<a name="time-component-properties-value"></a>
+ **HH：MM AA**：時間值儲存在內部的格式。
**注意**  
此值必須符合 的格式`HH:MM AA`。

##### 預留位置
<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>
+ **來源**：應停用時間的資料來源 （例如 None、Expression)。
+ **停用時間**：決定應停用哪些時間的表達式，例如 `{{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"}}
```

此表達式會停用目前資料列的「午餐休息」資料欄為 true 的任何時間。

透過設定這些驗證規則和停用的時間表達式，您可以確保使用者輸入的時間值符合您應用程式的特定需求。

##### Behavior (行為)
<a name="time-component-properties-behavior"></a>
+ **如果顯示**：決定時間元件可見性的表達式。
+ **停用，如果**：決定是否應停用時間元件的表達式。

##### 驗證
<a name="time-component-properties-validation"></a>
+ **必要**：確保使用者在提交表單之前必須輸入時間值的切換。
+ **自訂**：可讓您使用 JavaScript 表達式建立自訂驗證規則。

  **自訂驗證訊息**：不符合自訂驗證時要顯示的訊息。

例如：

```
{{ui.timeInput.value === "09:00 AM" || ui.timeInput.value === "09:30 AM"}}
```

此表達式會檢查輸入的時間是上午 9：00 還是上午 9：30。如果條件為 true，驗證將會失敗。

您也可以提供自訂驗證訊息，以便在不符合驗證時顯示：

```
Validation not met. The time must be 9:00 AM or 9:30 AM.
```

#### 表達式和範例
<a name="time-component-expressions"></a>

Time 元件提供下列表達式欄位：
+ `{{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。

### 日期範圍
<a name="date-range-component"></a>

**日期範圍**元件允許使用者選取和輸入日期範圍。透過設定日期範圍元件的各種屬性，您可以建立符合應用程式特定需求的日期範圍輸入欄位，例如限制可選取的日期範圍、停用特定日期，以及控制元件的可見性和互動性。

#### 日期範圍屬性
<a name="date-range-component-properties"></a>

**日期範圍**元件與其他元件共用數個常見屬性，例如 `Name`、 `Source`和 `Validation`。如需這些屬性的詳細資訊，請參閱 [常見元件屬性](#common-properties)。

除了常見的屬性之外，**日期範圍**元件還具有下列特定屬性：

##### 格式
<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`。

##### 預留位置
<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 個月**：要顯示的行事曆 UI 類型。例如，單月。
+ **2 個月**：要顯示的行事曆 UI 類型。例如，兩個月。

##### 選取強制性天數
<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」資料欄為 true 的日期。
+ `{{new Date(currentRow.dateColumn) < new Date("2023-01-01")}}` 根據目前資料列中的 "dateColumn"，停用 2023 年 1 月 1 日之前的日期。
+ `{{new Date(currentRow.dateColumn).getDay() === 0 || new Date(currentRow.dateColumn).getDay() === 6}}` 根據目前資料列中的 "dateColumn" 停用週末。

##### 自訂驗證
<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 的寬度，以百分比 (%) 或固定像素值 （例如 300px) 指定。
+ **高度**：iFrame 的高度，以百分比 (%) 或固定像素值指定。

### S3 上傳
<a name="s3-upload-component"></a>

**S3 上傳**元件可讓使用者將檔案上傳至 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>

**S3 上傳**元件提供下列表達式欄位：
+ `{{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，可用於顯示或進一步處理檔案。

這些表達式可讓您存取上傳的檔案、驗證檔案上傳，以及根據檔案上傳結果觸發動作。透過使用這些表達式，您可以在應用程式的檔案上傳功能中建立更動態且智慧的行為。

**注意**  
以 S**S3**3 上傳元件的 ID 取代 *s3uploadID*。

### 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 或自動化。

##### 表達式
<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。

##### URL
<a name="pdf-viewer-properties-source-url-example"></a>

您可以輸入指向您要顯示之 PDF 文件的 URL。這可以是公有 Web URL 或您自己的應用程式中的 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>

您也可以提供 PDF 文件做為 Blob 或 ArrayBuffer 物件，可讓您動態產生或擷取應用程式中各種來源的 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 檢視器的寬度，以百分比 (%) 或固定像素值 （例如 600px) 指定。
+ **高度**：指定為固定像素值的 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。
+ **表達式**：使用表達式動態產生影像來源。
+ **自動化**：將**映像檢視器**元件連接到提供映像檔案的自動化。

##### Alt 文字
<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. 在**屬性**功能表中，您可以檢視下列屬性：
   + **自動化識別符**：自動化的唯一名稱。若要編輯，請在文字欄位中輸入新的識別符。
   + **自動化參數**：自動化參數用於將動態值從應用程式的 UI 傳遞至自動化和資料動作。若要新增參數，請選擇 **\$1 新增**。選擇鉛筆圖示以變更參數的名稱、描述或類型。若要移除參數，請選擇垃圾桶圖示。
**提示**  
您也可以直接從畫布新增自動化參數。
   + **自動化輸出**：自動化輸出用於設定可在其他自動化或元件中參考自動化中的哪些資料。根據預設，自動化不會建立輸出。若要新增自動化輸出，請選擇 **\$1 新增**。若要移除輸出，請選擇垃圾桶圖示。

1. 您可以透過新增和設定動作來定義自動化的功能。如需 動作的詳細資訊，請參閱 [新增、編輯和刪除自動化動作](automations-actions-add-edit-delete.md)和 [自動化動作參考](automations-actions-reference.md)。

## 刪除自動化
<a name="automations-delete"></a>

使用下列程序刪除 App Studio 應用程式中的自動化。

**刪除自動化**

1. 如有必要，請導覽至您應用程式的應用程式工作室。

1. 選擇**自動化**索引標籤。

1. 在左側**自動化**選單中，選擇您要刪除之自動化的省略項目選單，然後選擇**刪除**。或者，您可以從自動化的右側**屬性**功能表中選擇垃圾桶圖示。

1. 在確認對話方塊中，選擇 **Delete** (刪除)。

# 新增、編輯和刪除自動化動作
<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 請求。建置器可以使用此動作，透過 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>

#### 連接器
<a name="automations-actions-reference-invoke-API-properties-connector"></a>

用於此動作提出之 API 請求的 **Connector**。連接器下拉式清單僅包含下列類型的連接器： `API Connector`和 `OpenAPI Connector`。根據連接器的設定方式，它可以包含重要資訊，例如登入資料和預設標頭或查詢參數。

如需 API 連接器的詳細資訊，包括使用 `API Connector`和 之間的比較`OpenAPI Connector`，請參閱 [連線至第三方服務](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 請求一起傳送的鍵/值對形式的查詢參數。如果選取連接器，其設定的查詢參數會自動新增，且無法編輯或移除。

**內文：**以 JSON 格式與 API 請求一起傳送的資訊。`GET` 請求沒有內文。

#### 模擬輸出
<a name="automations-actions-reference-invoke-API-properties-mocked-output"></a>

動作不會與預覽環境中的外部服務或資源互動。**模擬輸出**欄位用於提供 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>

要執行的操作。

#### 連接器
<a name="automations-actions-reference-invoke-aws-properties-connector"></a>

用於此動作所執行操作的連接器。設定的連接器應設定適當的登入資料來執行操作，以及其他組態資訊，例如包含操作中參考之任何資源 AWS 的區域。

#### Configuration
<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>

#### 連接器
<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 Resource Name)。

#### 函數事件
<a name="automations-actions-reference-invoke-lambda-properties-function-event"></a>

要做為事件承載傳遞至 Lambda 函數的鍵值對。

#### 模擬輸出
<a name="automations-actions-reference-invoke-lambda-properties-mocked-output"></a>

動作不會與預覽環境中的外部服務或資源互動。**模擬輸出**欄位用於提供 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`或 的 JavaScript 表達式`false`。
+ *true 分支*，其中包含條件評估為 時執行的動作`true`。
+ *false 分支*，其中包含條件評估為 時執行的動作`false`。

將動作拖曳至條件動作，以新增至 true 和 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>

包含要更新之記錄的實體。

#### 條件
<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>

包含要刪除之記錄的實體。

#### 條件
<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>

動作要執行的資料動作。

#### Parameters
<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 筆記錄。如果沒有更多記錄或頁面，則不會定義字符。

## Amazon 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>

#### 連接器
<a name="automations-actions-reference-s3-put-object-properties-connector"></a>

用於此動作所執行操作的連接器。設定的連接器應設定適當的登入資料來執行操作，以及其他組態資訊，例如包含操作中參考之任何資源 AWS 的區域。

#### Configuration
<a name="automations-actions-reference-s3-put-object-properties-configuration"></a>

要在 `PutObject`命令中使用的必要選項。選項如下：

**注意**  
如需 `Amazon S3 PutObject`操作的詳細資訊，請參閱《*Amazon Simple Storage Service API 參考*》中的 [PutObject](https://docs.aws.amazon.com/AmazonS3/latest/API/API_PutObject.html)。
+ **儲存貯體：**要在其中放置物件的 Amazon S3 儲存貯體名稱。
+ **金鑰：**要放入 Amazon S3 儲存貯體之物件的唯一名稱。
+ **內文：**要放入 Amazon S3 儲存貯體的物件內容。

#### 模擬輸出
<a name="automations-actions-reference-s3-put-object-properties-mocked-output"></a>

動作不會與預覽環境中的外部服務或資源互動。**模擬輸出**欄位用於提供 JSON 表達式，模擬預覽環境中連接器的行為，以供測試之用。此程式碼片段會存放在動作的`results`映射中，就像在即時環境中發佈的應用程式的連接器回應一樣。

透過此欄位，您可以測試各種案例及其對自動化內其他動作的影響，例如模擬不同的結果值、錯誤案例、邊緣案例或不快樂的路徑，而無需透過連接器與外部服務通訊。

## Amazon 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>

#### 連接器
<a name="automations-actions-reference-s3-delete-object-properties-connector"></a>

用於此動作所執行操作的連接器。設定的連接器應設定適當的登入資料來執行操作，以及其他組態資訊，例如包含操作中參考之任何資源 AWS 的區域。

#### Configuration
<a name="automations-actions-reference-s3-delete-object-properties-configuration"></a>

要在 `DeleteObject`命令中使用的必要選項。選項如下：

**注意**  
如需 `Amazon S3 DeleteObject`操作的詳細資訊，請參閱《*Amazon Simple Storage Service API 參考*》中的 [DeleteObject](https://docs.aws.amazon.com/AmazonS3/latest/API/API_DeleteObject.html)。
+ **儲存貯體：**從中刪除物件的 Amazon S3 儲存貯體名稱。
+ **金鑰：**要從 Amazon S3 儲存貯體刪除之物件的唯一名稱。

#### 模擬輸出
<a name="automations-actions-reference-s3-delete-object-properties-mocked-output"></a>

動作不會與預覽環境中的外部服務或資源互動。**模擬輸出**欄位用於提供 JSON 表達式，模擬預覽環境中連接器的行為，以供測試之用。此程式碼片段會存放在動作的`results`映射中，就像在即時環境中發佈的應用程式的連接器回應一樣。

透過此欄位，您可以測試各種案例及其對自動化內其他動作的影響，例如模擬不同的結果值、錯誤案例、邊緣案例或不快樂的路徑，而無需透過連接器與外部服務通訊。

## Amazon 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>

#### 連接器
<a name="automations-actions-reference-s3-get-object-properties-connector"></a>

用於此動作所執行操作的連接器。設定的連接器應設定適當的登入資料來執行操作，以及其他組態資訊，例如包含操作中參考之任何資源 AWS 的區域。

#### Configuration
<a name="automations-actions-reference-s3-get-object-properties-configuration"></a>

要在 `GetObject`命令中使用的必要選項。選項如下：

**注意**  
如需 `Amazon S3 GetObject`操作的詳細資訊，請參閱《*Amazon Simple Storage Service API 參考*》中的 [GetObject](https://docs.aws.amazon.com/AmazonS3/latest/API/API_GetObject.html)。
+ **儲存貯體：**要從中擷取物件的 Amazon S3 儲存貯體名稱。
+ **金鑰：**要從 Amazon S3 儲存貯體擷取之物件的唯一名稱。

#### 模擬輸出
<a name="automations-actions-reference-s3-get-object-properties-mocked-output"></a>

動作不會與預覽環境中的外部服務或資源互動。**模擬輸出**欄位用於提供 JSON 表達式，模擬預覽環境中連接器的行為，以供測試之用。此程式碼片段會存放在動作的`results`映射中，就像在即時環境中發佈的應用程式的連接器回應一樣。

透過此欄位，您可以測試各種案例及其對自動化內其他動作的影響，例如模擬不同的結果值、錯誤案例、邊緣案例或不快樂的路徑，而無需透過連接器與外部服務通訊。

## Amazon 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>

#### 連接器
<a name="automations-actions-reference-s3-list-objects-properties-connector"></a>

用於此動作所執行操作的連接器。設定的連接器應設定適當的登入資料來執行操作，以及其他組態資訊，例如包含操作中參考之任何資源 AWS 的區域。

#### Configuration
<a name="automations-actions-reference-s3-list-objects-properties-configuration"></a>

要在 `ListObjects`命令中使用的必要選項。選項如下：

**注意**  
如需 `Amazon S3 ListObjects`操作的詳細資訊，請參閱《*Amazon Simple Storage Service API 參考*》中的 [ListObjects](https://docs.aws.amazon.com/AmazonS3/latest/API/API_ListObjects.html)。
+ **儲存貯體：**要從中列出物件的 Amazon S3 儲存貯體名稱。

#### 模擬輸出
<a name="automations-actions-reference-s3-list-objects-properties-mocked-output"></a>

動作不會與預覽環境中的外部服務或資源互動。**模擬輸出**欄位用於提供 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>

#### 連接器
<a name="automations-actions-reference-textract-analyze-document-properties-connector"></a>

用於此動作所執行操作的連接器。設定的連接器應設定適當的登入資料來執行操作，以及其他組態資訊，例如包含操作中參考之任何資源 AWS 的區域。

#### Configuration
<a name="automations-actions-reference-textract-analyze-document-properties-configuration"></a>

要在`AnalyzeDocument`命令中使用的請求內容。選項如下：

**注意**  
如需 `Amazon Textract AnalyzeDocument`操作的詳細資訊，請參閱《*Amazon Textract 開發人員指南*》中的 [AnalyzeDocument](https://docs.aws.amazon.com/textract/latest/dg/API_AnalyzeDocument.html)。
+ **文件/S3Object/儲存貯體：**Amazon 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>

動作不會與預覽環境中的外部服務或資源互動。**模擬輸出**欄位用於提供 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>

#### 連接器
<a name="automations-actions-reference-textract-analyze-expense-properties-connector"></a>

用於此動作所執行操作的連接器。設定的連接器應設定適當的登入資料來執行操作，以及其他組態資訊，例如包含操作中參考之任何資源 AWS 的區域。

#### Configuration
<a name="automations-actions-reference-textract-analyze-expense-properties-configuration"></a>

要在`AnalyzeExpense`命令中使用的請求內容。選項如下：

**注意**  
如需 `Amazon Textract AnalyzeExpense`操作的詳細資訊，請參閱《*Amazon Textract 開發人員指南*》中的 [AnalyzeExpense](https://docs.aws.amazon.com/textract/latest/dg/API_AnalyzeExpense.html)。
+ **文件/S3Object/儲存貯體：**Amazon S3 儲存貯體的名稱。如果檔案透過 **S3 上傳**元件傳遞至 動作，則此參數可以保留空白。
+ **文件/S3Object/名稱：**輸入文件的檔案名稱。如果檔案透過 **S3 上傳**元件傳遞至 動作，則此參數可以保留空白。
+ **文件/S3Object/版本：**如果 Amazon S3 儲存貯體已啟用版本控制，您可以指定物件的版本。如果檔案透過 **S3 上傳**元件傳遞至 動作，則此參數可以保留空白。

#### 模擬輸出
<a name="automations-actions-reference-textract-analyze-expense-properties-mocked-output"></a>

動作不會與預覽環境中的外部服務或資源互動。**模擬輸出**欄位用於提供 JSON 表達式，模擬預覽環境中連接器的行為，以供測試之用。此程式碼片段會存放在動作的`results`映射中，就像在即時環境中發佈的應用程式的連接器回應一樣。

透過此欄位，您可以測試各種案例及其對自動化內其他動作的影響，例如模擬不同的結果值、錯誤案例、邊緣案例或不快樂的路徑，而無需透過連接器與外部服務通訊。

## Amazon Textract：分析 ID
<a name="automations-actions-reference-textract-analyze-id"></a>

使用 `Amazon Textract AnalyzeID`操作來分析身分文件以取得相關資訊。

### Properties
<a name="automations-actions-reference-textract-analyze-id-properties"></a>

#### 連接器
<a name="automations-actions-reference-textract-analyze-id-properties-connector"></a>

用於此動作所執行操作的連接器。設定的連接器應設定適當的登入資料來執行操作，以及其他組態資訊，例如包含操作中參考之任何資源 AWS 的區域。

#### Configuration
<a name="automations-actions-reference-textract-analyze-id-properties-configuration"></a>

要在`AnalyzeID`命令中使用的請求內容。選項如下：

**注意**  
如需 `Amazon Textract AnalyzeID`操作的詳細資訊，請參閱《*Amazon Textract 開發人員指南*》中的 [AnalyzeID](https://docs.aws.amazon.com/textract/latest/dg/API_AnalyzeID.html)。
+ **文件/S3Object/儲存貯體：**Amazon S3 儲存貯體的名稱。如果檔案使用 **S3 上傳**元件傳遞至 動作，則此參數可以保留空白。
+ **文件/S3Object/名稱：**輸入文件的檔案名稱。如果檔案透過 **S3 上傳**元件傳遞至 動作，則此參數可以保留空白。
+ **文件/S3Object/版本：**如果 Amazon S3 儲存貯體已啟用版本控制，您可以指定物件的版本。如果檔案透過 **S3 上傳**元件傳遞至 動作，則此參數可以保留空白。

#### 模擬輸出
<a name="automations-actions-reference-textract-analyze-id-properties-mocked-output"></a>

動作不會與預覽環境中的外部服務或資源互動。**模擬輸出**欄位用於提供 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>

#### 連接器
<a name="automations-actions-reference-textract-detect-document-text-properties-connector"></a>

用於此動作所執行操作的連接器。設定的連接器應設定適當的登入資料來執行操作，以及其他組態資訊，例如包含操作中參考之任何資源 AWS 的區域。

#### Configuration
<a name="automations-actions-reference-textract-detect-document-text-properties-configuration"></a>

要在`DetectDocumentText`命令中使用的請求內容。選項如下：

**注意**  
如需 `Amazon Textract DetectDocumentText`操作的詳細資訊，請參閱《*Amazon Textract 開發人員指南*》中的 [DetectDocumentText](https://docs.aws.amazon.com/textract/latest/dg/API_DetectDocumentText.html)。
+ **文件/S3Object/儲存貯體：**Amazon S3 儲存貯體的名稱。如果檔案使用 **S3 上傳**元件傳遞至 動作，則此參數可以保留空白。
+ **文件/S3Object/名稱：**輸入文件的檔案名稱。如果檔案透過 **S3 上傳**元件傳遞至 動作，則此參數可以保留空白。
+ **文件/S3Object/版本：**如果 Amazon S3 儲存貯體已啟用版本控制，您可以指定物件的版本。如果檔案透過 **S3 上傳**元件傳遞至 動作，則此參數可以保留空白。

#### 模擬輸出
<a name="automations-actions-reference-textract-detect-document-text-properties-mocked-output"></a>

動作不會與預覽環境中的外部服務或資源互動。**模擬輸出**欄位用於提供 JSON 表達式，模擬預覽環境中連接器的行為，以供測試之用。此程式碼片段會存放在動作的`results`映射中，就像在即時環境中發佈的應用程式的連接器回應一樣。

透過此欄位，您可以測試各種案例及其對自動化內其他動作的影響，例如模擬不同的結果值、錯誤案例、邊緣案例或不快樂的路徑，而無需透過連接器與外部服務通訊。

## Amazon Bedrock：GenAI 提示
<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>

#### 連接器
<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 用來處理請求的基礎模型。如需 Amazon Bedrock 中模型的詳細資訊，請參閱《[Amazon Bedrock 使用者指南》中的 Amazon 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}}`

#### 系統提示 (Claude 模型）
<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**：在核心取樣中，模型會以遞減的機率順序計算每個後續字符所有選項的累積分佈，並在達到 **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** 和**版本**。護欄用於根據您的使用案例和負責任的 AI 政策實作保護措施。如需詳細資訊，請參閱《[Amazon 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>

動作不會與預覽環境中的外部服務或資源互動。**模擬輸出**欄位用於提供 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>

#### 連接器
<a name="automations-actions-reference-bedrock-invoke-model-properties-connector"></a>

用於此動作所執行操作的連接器。若要成功使用此動作，必須使用 **Amazon Bedrock 執行期**做為服務來設定連接器。設定的連接器應該設定適當的登入資料來執行操作，以及其他組態資訊，例如包含操作中參考之任何資源 AWS 的區域。

#### Configuration
<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>

動作不會與預覽環境中的外部服務或資源互動。**模擬輸出**欄位用於提供 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。否則，AI 將取代任何現有的 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>

#### 連接器
<a name="automations-actions-reference-send-email-properties-connector"></a>

用於此動作所執行操作的連接器。設定的連接器應設定適當的登入資料來執行操作，以及其他組態資訊，例如包含操作中參考之任何資源 AWS 的區域。

#### Configuration
<a name="automations-actions-reference-send-email-properties-configuration"></a>

要在`SendEmail`命令中使用的請求內容。選項如下：

**注意**  
如需 `Amazon SES SendEmail`操作的詳細資訊，請參閱《Amazon Simple Email Service API 參考》中的 [SendEmail](https://docs.aws.amazon.com/ses/latest/APIReference-V2/API_SendEmail.html)。 **

#### 模擬輸出
<a name="automations-actions-reference-send-email-properties-mocked-output"></a>

動作不會與預覽環境中的外部服務或資源互動。**模擬輸出**欄位用於提供 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) 應用程式，您可以考慮資料庫 (DB)，例如 Amazon Aurora，這是支援 MySQL 和 PostgreSQL 等各種資料庫引擎的雲端原生、關聯式和全受管資料庫服務。如需 App Studio 支援的完整 Aurora 版本清單，請參閱 [連線至 Amazon Aurora](connectors-aurora.md)。另一方面，對於線上分析處理 (OLAP) 使用案例，請考慮使用 Amazon Redshift，這是雲端資料倉儲，可讓您針對非常大型的資料集執行複雜的查詢。這些查詢通常需要時間 （許多秒） 才能完成，因此 Amazon Redshift 較不適合需要低延遲資料存取的 OLTP 應用程式。
+ **可擴展性設計：**將未來成長和可擴展性納入考量，規劃您的資料模型。選擇適當的資料服務和資料庫執行個體類型和組態 （例如佈建容量） 時，請考慮預期資料量、存取模式和效能需求等因素。
  + 如需使用 Aurora Serverless 擴展的詳細資訊，請參閱 [Aurora Serverless 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) 政策、建立具有資料表和結構描述限制許可的資料庫使用者，以及強制執行靜態和傳輸中的加密。
+ **監控和最佳化效能：**持續監控資料庫的效能，並視需要進行調整，例如擴展資源、最佳化查詢或調校資料庫組態。
+ **自動化資料庫管理：**利用 Aurora Autoscaling、Aurora 的績效詳情和 AWS Database Migration Service 等 AWS 服務，自動化資料庫管理任務並降低營運開銷。
+ **實作災難復原和備份策略：**確保您擁有定義明確的備份和復原計劃，利用 Aurora 自動化備份、point-in-time復原和跨區域複本組態等功能。
+ **遵循 AWS 最佳實務和文件：**隨時up-to-date掌握所選資料服務的最新 AWS 最佳實務、準則和文件，以確保您的資料模型和實作符合 AWS 建議。

如需每個 AWS 資料服務的詳細指引，請參閱下列主題：
+ [Amazon Aurora 的最佳實務](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/Aurora.BestPractices.html)
+ [Amazon Aurora MySQL 的最佳實務](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/AuroraMySQL.BestPractices.html)
+ [Amazon 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. 在**連接器**中，選取包含您要用來建立實體之資料表的連接器。

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. 在**組態**索引標籤的**欄位中**，您可以檢視實體欄位的資料表。實體欄位具有下列資料欄：
   + **顯示名稱：**顯示名稱類似於資料表標頭或表單欄位，應用程式使用者可檢視。它可以包含空格和特殊字元，但實體內必須是唯一的。
   + **系統名稱：**系統名稱是程式碼中用來參考欄位的唯一識別符。映射至 Amazon Redshift 資料表中的資料欄時，必須符合 Amazon 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. 在**轉換結果**中，您可以輸入自訂 JavaScript，在結果顯示或傳送至自動化之前修改或格式化結果。

1. 在**輸出預覽**中，根據設定的欄位、篩選條件、排序和 JavaScript 檢視查詢輸出的預覽資料表。

## 資料動作條件運算子和範例
<a name="data-entities-data-action-operators"></a>

您可以使用條件運算子來比較設定的表達式值與實體資料欄，以傳回資料庫物件的子集。您可以使用的運算子取決於資料欄的資料類型，以及實體連線的資料庫類型，例如 Amazon Redshift、Amazon Aurora 或 Amazon DynamoDB。

下列條件運算子可與所有資料庫服務搭配使用：
+ `=` 和 `!=`：適用於所有資料類型 （主索引鍵資料欄除外）。
+ `<=`、`<`、 `>=`和 `>=`：僅適用於數值欄。
+ `IS NULL` 和 `IS NOT NULL`：用於比對具有 null 或空白值的資料欄。Null 值在每個資料庫中的解譯方式通常不同，但在 App Studio 中，`NULL`運算子會比對並傳回連線資料庫資料表中具有 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=, <, >, <=, >= | LIKE、NIKE | 包含、不包含 | 從 開始，從 開始 | IS NULL、IS NOT NULL | 
| --- | --- | --- | --- | --- | --- | 
|  **DynamoDB**  |  是  |  否  |  是  |  是  |  是  | 
|  **Aurora**  |  是  |  是  |  否  |  否  |  是  | 
|  **Redshift**  |  是  |  是  |  否  |  否  |  是  | 

### 資料動作條件範例
<a name="data-entities-data-action-operators-examples"></a>

請考慮下列資料庫資料表，其中包含具有 `name`、 `city`和 `hireDate` 欄位的多個項目。


| name | 城市 | hireDate | 
| --- | --- | --- | 
|  亞當  |  西雅圖  |  2025-03-01  | 
|  Adrienne  |  波士頓  |  2025-03-05  | 
|  Bob  |  阿布奎基  |  2025-03-06  | 
|  Carlos  |  芝加哥  |  2025-03-10  | 
|  Caroline  |  NULL  |  2025-03-12  | 
|  Rita  |  邁阿密  |  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`、`Caroline`、 `Carlos`和 `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 為您管理整個資料儲存和組態程序的一種實體。當您建立受管實體時，會在相關聯的 AWS 帳戶中建立對應的 DynamoDB 資料表。這可確保內部安全且透明的資料管理 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 Stage**：我們將允許發佈測試，但在兩個環境中使用相同的受管存放區

# 頁面和自動化參數
<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. **搜尋和篩選**：當使用者在您的應用程式首頁上搜尋時，搜尋詞彙可以做為參數傳遞至結果頁面，使其僅顯示相關的篩選項目。例如，如果使用者搜尋*降噪耳機*，則具有*降噪耳機*值的 參數可以傳遞至產品清單頁面。

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 中強大的功能，可透過傳遞各種來源的動態值，例如 UI、其他自動化或資料動作，來建立靈活且可重複使用的自動化。它們可做為預留位置，在執行自動化時以實際值取代，讓您每次使用相同的自動化搭配不同的輸入。

在自動化中，參數具有唯一的名稱，您可以使用參數變數來參考參數的值，後面接著參數的名稱，例如 `{{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 做為來自不同來源的參數值，例如 UI 元件或其他自動化，讓單一自動化能夠擷取任何產品的詳細資訊，而不是為每個產品建立個別的自動化。

### 案例：使用備用值處理選用參數
<a name="parameters-automation-scenario-optional-parameters"></a>

假設您有一個具有必要「擁有者」欄的「任務」實體，但您希望此欄位在自動化中是選用的，並在未選取擁有者時提供備用值。

1. 使用名為 的參數建立自動化`Owner`，該參數會映射到`Task`實體的 `Owner` 欄位。

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. 如有需要，您可以透過切換每個參數的開啟/關閉來覆寫「必要」設定。這表示所需的狀態不會與實體欄位保持同步，否則會保持同步。

### 手動定義類型
<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 中，date(s) 是 ISO 字串日期，也會驗證這些日期。

這種類型的安全有助於防止類型不相符，這可能會導致自動化邏輯中的錯誤或意外行為。例如，如果您將參數定義為 `Number`，您可以確信傳遞給該參數的任何值都會是數字，而且您不需要在自動化內執行額外的類型檢查或轉換。

## 驗證
<a name="parameters-automation-validation"></a>

您可以將驗證規則新增至參數，確保傳遞至自動化的值符合特定條件。

雖然 App Studio 不提供參數的內建驗證設定，但您可以將 JavaScript 動作新增至自動化，以便在違反特定限制條件時擲出錯誤，以實作自訂驗證。

對於實體欄位，支援驗證規則的子集，例如最小值/最大值。不過，執行Create/Update/Delete記錄動作時，這些項目不會在自動化層級進行驗證，只會在資料層進行。

## 自動化參數的最佳實務
<a name="parameters-automation-best-practices"></a>

為了確保您的自動化參數設計良好、可維護且易於使用，請遵循下列最佳實務：

1. **使用描述性參數名稱**：選擇可清楚描述參數目的或內容的參數名稱。

1. **提供參數描述**：定義參數以解釋其目的、限制條件和期望時，請利用**描述**欄位。在參考 參數時，這些描述會出現在 JSDoc 註解中，以及在使用者調用自動化時需要為參數提供值的任何使用者介面中。

1. **使用適當的資料類型**：根據預期的輸入值仔細考慮每個參數的資料類型，例如：字串、數字、布林值、物件。

1. **驗證參數值**：在自動化中實作適當的驗證檢查，以確保參數值符合特定需求，然後再繼續進行進一步的動作。

1. **使用備用或預設值**：雖然 App Studio 目前不支援設定參數的預設值，但您可以在使用自動化邏輯中的參數時實作備用或預設值。例如，如果未`{{ params.param1 || "default value" }}`提供 `param1` 參數或具有 false 值，您可以使用 等表達式來提供預設值。

1. **維持參數一致性**：如果您有多個自動化需要類似的參數，請嘗試維持這些自動化中參數名稱和資料類型的一致性。

1. **文件參數用量**：維護自動化的明確文件，包括每個參數的說明、其用途、預期值，以及任何相關的範例或邊緣案例。

1. **經常檢閱和重構**：定期檢閱自動化及其參數，視需要重構或合併參數，以提高清晰度、可維護性和可重複使用性。

1. **限制參數數量**：雖然參數提供彈性，但太多參數會使自動化複雜且難以使用。旨在透過將參數數量限制為僅必要項目，在靈活性和簡單性之間取得平衡。

1. **考慮參數分組**：如果您發現自己定義了多個相關參數，請考慮將它們分組為單一*物件*參數。

1. **個別考量**：避免將單一參數用於多個用途，或將不相關的值合併為單一參數。每個參數都應該代表不同的考量或資料片段。

1. **使用參數別名**：如果您有名稱較長或複雜的參數，請考慮在自動化邏輯中使用別名或速記版本，以提高可讀性和可維護性。

透過遵循這些最佳實務，您可以確保自動化參數設計良好、可維護且易於使用，最終改善自動化的整體品質和效率。

# 使用 JavaScript 在 App Studio 中撰寫表達式
<a name="expressions"></a>

在 AWS App Studio 中，您可以使用 JavaScript 表達式動態控制應用程式的行為和外觀。單行 JavaScript 表達式是以雙大括號 和 撰寫`{{ }}`，可用於自動化、UI 元件和資料查詢等各種內容。這些表達式會在執行時間進行評估，可用於執行計算、操作資料和控制應用程式邏輯。

App Studio 提供三個 JavaScript 開放原始碼程式庫的原生支援：Luxon、UUID、Lodash 以及 SDK 整合，以偵測應用程式組態中的 JavaScript 語法和類型檢查錯誤。

**重要**  
App Studio 不支援使用第三方或自訂 JavaScript 程式庫。

## 基本語法
<a name="expressions-basic-syntax"></a>

JavaScript 表達式可以包含變數、常值、運算子和函數呼叫。運算式通常用於執行計算或評估條件。

請參閱以下範例：
+ `{{ 2 + 3 }}` 將評估為 5。
+ `{{ "Hello, " + "World!" }}` 將評估為「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 元件值。透過以程式設計方式參考和更新元件值，您可以建立動態和互動式使用者介面，以回應使用者輸入和資料變更。

### 參考 UI 元件值
<a name="expressions-UI-component-values-referencing"></a>

您可以透過從 UI 元件存取值，實作動態行為來建立互動式和資料驅動型應用程式。

您可以在運算式中使用 `ui` 命名空間，存取相同頁面上 UI 元件的值和屬性。透過參考元件的名稱，您可以擷取其值或根據其狀態執行操作。

**注意**  
`ui` 命名空間只會顯示目前頁面上的元件，因為元件的範圍是各自的頁面。

在 App Studio 應用程式中參考元件的基本語法為：`{{ui.componentName}}`。

下列清單包含使用 `ui` 命名空間存取 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* 元件的值，在修剪任何前後空格之後， 是否具有非空白字串。這有助於根據輸入文字欄位的值驗證使用者輸入或啟用/停用其他元件。
+ `{{ui.multiSelect1.value.join(", ")}}`：對於名為 *multiSelect1* 的多選元件，此表達式會將所選選項值的陣列轉換為逗號分隔字串。這有助於以易於使用的格式顯示選取的選項，或將選取項目傳遞給另一個元件或自動化。
+ `{{ui.multiSelect1.value.includes("option1")}}`：此表達式會檢查值*選項 1* 是否包含在 *multiSelect1* 元件的所選選項陣列中。如果選取*選項 1*，則傳回 true，否則傳回 false。這對於條件式轉譯元件或根據特定選項選擇採取動作非常有用。
+ `{{ui.s3Upload1.files.length > 0}}`：對於名為 *s3Upload1* 的 Amazon S3 檔案上傳元件，此表達式會檢查檔案陣列的長度，以檢查是否已上傳任何檔案。根據檔案是否已上傳，這對於啟用/停用其他元件或動作很有用。
+ `{{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']}}`：從資料表中選取的資料列傳回*資料欄名稱與空格*資料欄的值。
+ `{{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>

您可以將動態值從 UI 元件和其他自動化傳遞至自動化，使其可重複使用且靈活。這是使用自動化參數搭配 `params` 命名空間來完成的，如下所示：

`{{params.parameterName}}`：參考從 UI 元件或其他來源傳遞至自動化的值。例如， `{{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'}}`：檢查參數是否不是 null 或未定義，而且長度不為零。如果為 true，請使用提供的值；否則，請設定預設值。
+ `{{params.rootCause || "No root cause provided"}}`：如果 `params.rootCause` 參數為 false (null、未定義或空字串），請使用提供的預設值。
+ `{{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* 和 *action2* 的動作，*則 action1* 無法參考任何結果，而 *action2* 只能存取 `results.action1`。

1. 這也適用於用戶端動作。例如，如果您有一個使用 `InvokeAutomation`動作觸發自動化的按鈕。然後，如果自動化指出檔案是 PDF，則您可以有一個具有類似`Run If`條件的導覽步驟`results.myInvokeAutomation1.fileType === "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}}`：對於名為 *stepName* 的`Amazon S3 GetObject`自動化動作，此表達式會擷取檔案內容，例如**影像**或 **PDF 檢視器**等 UI 元件可用來顯示擷取的檔案。請注意，此表達式需要在自動化的自動化**輸出**中設定，才能在元件中使用。

# 資料相依性和時間考量
<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 中的每個應用程式都有內容安全設定，可用於限制外部媒體或資源，例如映像、iFrames和 PDFs 載入，或僅允許來自指定的網域或 URLs （包括 Amazon S3 儲存貯體）。您也可以指定應用程式可將物件上傳至 Amazon S3 的網域。

所有應用程式的預設內容安全設定是封鎖從外部來源載入所有媒體，包括 Amazon S3 儲存貯體，以及封鎖將物件上傳至 Amazon S3。因此，若要載入映像、iFrames、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 檢視器元件
   + **映像來源**：用於管理應用程式可以從中載入映像的網域。此設定會影響下列元件或應用程式資源：
     + 應用程式標誌和橫幅
     + 影像檢視器元件
   + **連線來源**：用於管理應用程式可上傳 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. 選擇**儲存**，以儲存變更。