本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。
# 使用 JavaScript 在 App Studio 中撰寫表達式
在 AWS App Studio 中，您可以使用 JavaScript 表達式動態控制應用程式的行為和外觀。單行 JavaScript 表達式是以雙大括號 和 撰寫`{{ }}`，可用於自動化、UI 元件和資料查詢等各種內容。這些表達式會在執行時間進行評估，可用於執行計算、操作資料和控制應用程式邏輯。
App Studio 提供三個 JavaScript 開放原始碼程式庫的原生支援：Luxon、UUID、Lodash 以及 SDK 整合，以偵測應用程式組態中的 JavaScript 語法和類型檢查錯誤。
**重要**
App Studio 不支援使用第三方或自訂 JavaScript 程式庫。
## 基本語法
JavaScript 表達式可以包含變數、常值、運算子和函數呼叫。運算式通常用於執行計算或評估條件。
請參閱以下範例：
+ `{{ 2 + 3 }}` 將評估為 5。
+ `{{ "Hello, " + "World!" }}` 將評估為「Hello， World！」。
+ `{{ Math.max(5, 10) }}` 將評估為 10。
+ `{{ Math.random() * 10 }}` 傳回介於 【0-10) 之間的隨機數字 （含小數）。
## 插補
您也可以使用 JavaScript 在靜態文字中插入動態值。這可透過將 JavaScript 表達式封裝在雙大括號內來實現，如下列範例所示：
```
Hello {{ currentUser.firstName }}, welcome to App Studio!
```
在此範例中， `currentUser.firstName` 是一種 JavaScript 表達式，會擷取目前使用者的名字，然後動態插入問候語訊息中。
## 串連
您可以使用 JavaScript 中的`+`運算子串連字串和變數，如下列範例所示。
```
{{ currentRow.FirstName + " " + currentRow.LastName }}
```
此表達式結合了 `currentRow.FirstName`和 的值`currentRow.LastName`，以及介於兩者之間的空格，進而產生目前資料列的完整名稱。例如，如果 `currentRow.FirstName`是 `John`，而 `currentRow.LastName`是 `Doe`，則表達式會解析為 `John Doe`。
## 日期和時間
JavaScript 提供各種函數和物件來使用日期和時間。例如：
+ `{{ new Date().toLocaleDateString() }}`：以當地語系化格式傳回目前日期。
+ `{{ DateTime.now().toISODate() }}`：以 YYYY-MM-DD 格式傳回目前日期，以供日期元件使用。
### 日期和時間比較
使用 `=`、、`>=`、 `>` `<`或 等運算子`<=`來比較日期或時間值。例如：
+ `{{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 天。
## 程式碼區塊
除了表達式之外，您也可以撰寫多行 JavaScript 程式碼區塊。與表達式不同，程式碼區塊不需要大括號。反之，您可以直接在程式碼區塊編輯器中撰寫 JavaScript 程式碼。
**注意**
評估表達式並顯示其值時，會執行程式碼區塊，並顯示其輸出 （如果有的話）。
## 全域變數和函數
App Studio 可讓您存取可在 JavaScript 表達式和程式碼區塊中使用的特定全域變數和函數。例如， `currentUser` 是代表目前登入使用者的全域變數，您可以存取 之類的屬性`currentUser.role`來擷取使用者的角色。
## 參考或更新 UI 元件值
您可以在元件和自動化動作中使用表達式來參考和更新 UI 元件值。透過以程式設計方式參考和更新元件值，您可以建立動態和互動式使用者介面，以回應使用者輸入和資料變更。
### 參考 UI 元件值
您可以透過從 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 元件值
若要更新或操作元件的值，請在 自動化`RunComponentAction`中使用 。以下是語法範例，您可以使用 `RunComponentAction`動作來更新名為 *myInput* 之文字輸入元件的值：
```
RunComponentAction(ui.myInput, "setValue", "New Value")
```
在此範例中， `RunComponentAction` 步驟會呼叫 *myInput* 元件上的 `setValue`動作，傳入新值 *New Value*。
## 使用資料表資料
您可以存取資料表資料和值來執行操作。您可以使用下列表達式來存取資料表資料：
+ `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]}}`：在資料列動作內傳遞參考的資料列內容。
## 存取自動化
您可以使用自動化在 App Studio 中執行伺服器端邏輯和操作。在自動化動作中，您可以使用表達式來處理資料、產生動態值，以及納入先前動作的結果。
### 存取自動化參數
您可以將動態值從 UI 元件和其他自動化傳遞至自動化，使其可重複使用且靈活。這是使用自動化參數搭配 `params` 命名空間來完成的，如下所示：
`{{params.parameterName}}`：參考從 UI 元件或其他來源傳遞至自動化的值。例如， `{{params.ID}}`會參考名為 *ID* 的參數。
#### 操縱自動化參數
您可以使用 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"`，即開始日期後一週的日期。
### 存取先前動作的自動化結果
自動化可讓應用程式執行伺服器端邏輯和操作，例如查詢資料庫、與 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 元件可用來顯示擷取的檔案。請注意，此表達式需要在自動化的自動化**輸出**中設定，才能在元件中使用。