使用 JavaScript 在 App Studio 中撰寫表達式 - AWS App Studio
基本語法插補串連日期和時間程式碼區塊全域變數和函數參考或更新 UI 元件值使用資料表資料存取自動化

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

使用 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. 您只能存取相同自動化內先前自動化步驟的結果。

  2. 如果您有動作名為 action1 和 action2，則 action1 無法參考任何結果，而 action2 只能存取 results.action1。

  3. 這也適用於用戶端動作。例如，如果您有一個使用 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 元件可用來顯示擷取的檔案。請注意，此表達式需要在自動化的自動化輸出中設定，才能在元件中使用。