翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
AWS App Studio では、JavaScript 式を使用して、アプリケーションの動作と外観を動的に制御できます。単一行の JavaScript 式は、二重中括弧、 内に記述され{{ }}、オートメーション、UI コンポーネント、データクエリなどのさまざまなコンテキストで使用できます。これらの式は実行時に評価され、計算の実行、データの操作、アプリケーションロジックの制御に使用できます。
App Studio は、Luxon、UUID、Lodash の 3 つの JavaScript オープンソースライブラリと SDK 統合をネイティブにサポートし、アプリの設定内の JavaScript 構文と型チェックエラーを検出します。
重要
App Studio は、サードパーティーまたはカスタム JavaScript ライブラリの使用をサポートしていません。
基本構文
JavaScript 式には、変数、リテラル、演算子、関数呼び出しを含めることができます。式は、計算の実行や条件の評価によく使用されます。
以下の例を参照してください。
{{ 2 + 3 }}は 5 と評価されます。{{ "Hello, " + "World!" }}は「Hello, World!」と評価されます。{{ Math.max(5, 10) }}は 10 に評価されます。{{ Math.random() * 10 }}は、[0～10) の乱数 (小数点以下) を返します。
Interpolation
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() }}: Date コンポーネントで使用する現在の日付を YYYY-MM-DD 形式で返します。
日付と時刻の比較
、=、>、<、 などの演算子を使用して>=、日付または時刻の値を比較<=します。例：
{{ui.: 時刻が午前 10 時より後かどうかを確認します。timeInput.value > "10:00 AM"}}{{ui.: 時刻が午後 5 時以前かどうかを確認します。timeInput.value <= "5:00 PM"}}{{ui.: 時刻が現在の時刻より後かどうかを確認します。timeInput.value > DateTime.now().toISOTime()}}{{ui.: 日付が現在の日付より前かどうかを確認します。dateInput.value > DateTime.now().toISODate()}}{{ DateTime.fromISO(ui.: 日付が現在の日付から 5 日以上後かどうかを確認します。dateInput.value).diff(DateTime.now(), "days").days >= 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")}}option1がmultiSelect1コンポーネントの選択したオプションの配列に含まれているかどうかを確認します。option1が選択されている場合は true を返し、それ以外の場合は false を返します。これは、条件付きでコンポーネントをレンダリングしたり、特定のオプション選択に基づいてアクションを実行したりするのに役立ちます。{{ui.:s3Upload1.files.length > 0}}s3Upload13Upload1 という名前の 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.selectedRowui.はどちらも、ページの他のコンポーネントからテーブルデータにアクセスするために使用されます。例えば、選択した行に基づいてテーブルの外部にボタンの名前を設定します。返される値は同じですが、tableName.selectedRowDataselectedRowと の違い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.: UI コンポーネントまたは他のソースからオートメーションに渡される値を参照します。たとえば、 は parameterName}}ID という名前のパラメータを参照{{params.します。ID}}
オートメーションパラメータの操作
JavaScript を使用してオートメーションパラメータを操作できます。以下の例を参照してください。
{{params.: パラメータとして渡された値を連結します。firstName}} {{params.lastName}}{{params.: 2 つの数値パラメータを追加します。numberParam1+ params.numberParam2}}{{params.: パラメータが null または未定義ではなく、長さがゼロでないかどうかを確認します。true の場合は、指定された値を使用します。それ以外の場合は、デフォルト値を設定します。valueProvided?.length > 0 ? params.valueProvided: 'Default'}}{{params.:rootCause|| "No root cause provided"}}params.パラメータが false (null、undefined、または空の文字列) の場合は、指定されたデフォルト値を使用します。rootCause{{Math.min(params.: パラメータの値を最大値 (この場合はnumberOfProducts,100)}}100) に制限します。{{ DateTime.fromISO(params.:startDate).plus({ days: 7 }).toISO() }}params.パラメータが の場合startDate"2023-06-15T10:30:00.000Z"、この式は開始日の 1 週間後の日付"2023-06-22T10:30:00.000Z"である に評価されます。
前のアクションからのオートメーション結果へのアクセス
自動化により、アプリケーションはデータベースのクエリ、APIs とのやり取り、データ変換の実行など、サーバー側のロジックとオペレーションを実行できます。results 名前空間は、同じオートメーション内の以前のアクションによって返された出力とデータへのアクセスを提供します。自動化結果へのアクセスに関する以下の点に注意してください。
以前のオートメーションステップの結果には、同じオートメーション内でのみアクセスできます。
action1とaction2という名前のアクションがその順序で存在する場合、action1は結果を参照できず、action2は にのみアクセスできますresults.。action1これはクライアント側のアクションでも機能します。たとえば、
InvokeAutomationアクションを使用してオートメーションをトリガーするボタンがある場合です。その後、オートメーションによってファイルが PDF であることが示された場合results.、PDF ビューワーのあるページに移動するなどのmyInvokeAutomation1.fileType === "pdf"Run If条件を含むナビゲーションステップを設定できます。
次のリストには、 results名前空間を使用して前のアクションの自動化結果にアクセスするための構文が含まれています。
{{results.:stepName.data}}stepNameという名前のオートメーションステップからデータ配列を取得します。{{results.:stepName.output}}stepNameという名前のオートメーションステップの出力を取得します。
自動化ステップの結果にアクセスする方法は、アクションのタイプと返されるデータによって異なります。異なるアクションは、異なるプロパティまたはデータ構造を返す場合があります。一般的な例をいくつか示します。
データアクションの場合、 を使用して返されたデータ配列にアクセスできます
results.。stepName.dataAPI コールアクションの場合、 を使用してレスポンス本文にアクセスできます
results.。stepName.bodyAmazon 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.パラメータに E メールアドレスが含まれている場合、この式は @ 記号で文字列を分割し、@ 記号の前に部分を返します。これにより、E メールアドレスのユーザー名部分が効果的に抽出されます。email{{new Date(params.: この式は Unix タイムスタンプパラメータ (timestamp* 1000)}}params.) を受け取り、JavaScript Date オブジェクトに変換します。タイムスタンプは秒単位であることを前提としているため、1000 を掛けてミリ秒に変換します。これはコンtimestampDateストラクタが想定する形式です。これは、オートメーションで日付と時刻の値を操作するのに役立ちます。{{results.:stepName.Body}}stepNameという名前のAmazon S3 GetObjectオートメーションアクションの場合、この式はファイルコンテンツを取得します。これは、取得されたファイルを表示するために Image や PDF Viewer などの UI コンポーネントで使用できます。この式は、 コンポーネントで使用するオートメーションの Automation 出力で設定する必要があることに注意してください。
