Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
Di AWS App Studio, Anda dapat menggunakan JavaScript ekspresi untuk mengontrol perilaku dan tampilan aplikasi secara dinamis. JavaScript Ekspresi baris tunggal ditulis dalam kurung kurawal ganda{{ }}, dan dapat digunakan dalam berbagai konteks seperti otomatisasi, komponen UI, dan kueri data. Ekspresi ini dievaluasi saat runtime dan dapat digunakan untuk melakukan perhitungan, memanipulasi data, dan mengontrol logika aplikasi.
App Studio menyediakan dukungan native untuk tiga library JavaScript open source: Luxon, UUID, Lodash, serta integrasi SDK untuk mendeteksi kesalahan JavaScript sintaks dan pengecekan tipe dalam konfigurasi aplikasi Anda.
penting
App Studio tidak mendukung penggunaan JavaScript pustaka pihak ketiga atau kustom.
Sintaks dasar
JavaScript ekspresi dapat mencakup variabel, literal, operator, dan panggilan fungsi. Ekspresi biasanya digunakan untuk melakukan perhitungan atau mengevaluasi kondisi.
Lihat contoh berikut:
{{ 2 + 3 }}akan mengevaluasi ke 5.{{ "Hello, " + "World!" }}akan mengevaluasi untuk “Halo, Dunia!”.{{ Math.max(5, 10) }}akan mengevaluasi hingga 10.{{ Math.random() * 10 }}mengembalikan angka acak (dengan desimal) antara [0-10).
Interpolasi
Anda juga dapat menggunakan JavaScript untuk menginterpolasi nilai dinamis dalam teks statis. Ini dicapai dengan melampirkan JavaScript ekspresi dalam kurung kurawal ganda, seperti contoh berikut:
Hello {{ currentUser.firstName }}, welcome to App Studio!Dalam contoh ini, currentUser.firstName adalah JavaScript ekspresi yang mengambil nama depan pengguna saat ini, yang kemudian secara dinamis dimasukkan ke dalam pesan ucapan.
Rangkaian
Anda dapat menggabungkan string dan variabel menggunakan + operator di JavaScript, seperti pada contoh berikut.
{{ currentRow.FirstName + " " + currentRow.LastName }}Ekspresi ini menggabungkan nilai-nilai currentRow.FirstName dan currentRow.LastName dengan spasi di antaranya, menghasilkan nama lengkap dari baris saat ini. Misalnya, jika currentRow.FirstName isJohn, and currentRow.LastName isDoe, maka ekspresi akan memutuskan untukJohn Doe.
Tanggal dan waktu
JavaScript menyediakan berbagai fungsi dan objek untuk bekerja dengan tanggal dan waktu. Misalnya:
{{ new Date().toLocaleDateString() }}: Mengembalikan tanggal saat ini dalam format lokal.{{ DateTime.now().toISODate() }}: Mengembalikan tanggal saat ini dalam YYYY-MM-DD format, untuk digunakan dalam komponen Tanggal.
Perbandingan tanggal dan waktu
Gunakan operator seperti=,,>,<,>=, atau <= untuk membandingkan nilai tanggal atau waktu. Misalnya:
{{ui.: Memeriksa apakah waktunya setelah pukul 10:00 pagi.timeInput.value > "10:00 AM"}}{{ui.: Memeriksa apakah waktunya pada atau sebelum pukul 17:00.timeInput.value <= "5:00 PM"}}{{ui.: Memeriksa apakah waktunya setelah waktu saat ini.timeInput.value > DateTime.now().toISOTime()}}{{ui.: Memeriksa apakah tanggal sebelum tanggal saat ini.dateInput.value > DateTime.now().toISODate()}}{{ DateTime.fromISO(ui.: Memeriksa apakah tanggalnya setidaknya 5 hari dari tanggal saat ini.dateInput.value).diff(DateTime.now(), "days").days >= 5 }}
Blok kode
Selain ekspresi, Anda juga dapat menulis blok JavaScript kode multi-baris. Tidak seperti ekspresi, blok kode tidak memerlukan kurawal kurawal. Sebagai gantinya, Anda dapat menulis JavaScript kode Anda langsung di dalam editor blok kode.
catatan
Sementara ekspresi dievaluasi dan nilainya ditampilkan, blok kode dijalankan, dan outputnya (jika ada) ditampilkan.
Variabel dan fungsi global
App Studio menyediakan akses ke variabel dan fungsi global tertentu yang dapat digunakan dalam JavaScript ekspresi dan blok kode Anda. Misalnya, currentUser adalah variabel global yang mewakili pengguna yang saat ini masuk, dan Anda dapat mengakses properti seperti currentUser.role mengambil peran pengguna.
Merujuk atau memperbarui nilai komponen UI
Anda dapat menggunakan ekspresi dalam komponen dan tindakan otomatisasi untuk mereferensikan dan memperbarui nilai komponen UI. Dengan mereferensikan dan memperbarui nilai komponen secara terprogram, Anda dapat membuat antarmuka pengguna dinamis dan interaktif yang merespons input pengguna dan perubahan data.
Merujuk nilai komponen UI
Anda dapat membuat aplikasi interaktif dan berbasis data dengan menerapkan perilaku dinamis dengan mengakses nilai dari komponen UI.
Anda dapat mengakses nilai dan properti komponen UI pada halaman yang sama dengan menggunakan ui namespace dalam ekspresi. Dengan mereferensikan nama komponen, Anda dapat mengambil nilainya atau melakukan operasi berdasarkan statusnya.
catatan
uiNamespace hanya akan menampilkan komponen pada halaman saat ini, karena komponen dicakup ke halaman masing-masing.
Sintaks dasar untuk merujuk ke komponen dalam aplikasi App Studio adalah:{{ui..componentName}}
Daftar berikut berisi contoh penggunaan ui namespace untuk mengakses nilai komponen UI:
{{ui.: Merupakan nilai komponen input teks bernamatextInputName.value}}textInputName.{{ui.: Periksa apakah semua bidang dalam formulir bernamaformName.isValid}}formNamevalid berdasarkan kriteria validasi yang Anda berikan.{{ui.: Merupakan nilai kolom tertentu di baris saat ini dari komponen tabel bernamatableName.currentRow.columnName}}tableName.{{ui.: Merupakan nilai bidang tertentu dari baris yang dipilih dalam komponen tabel bernamatableName.selectedRowData.fieldName}}tableName. Anda kemudian dapat menambahkan nama bidang sepertiID({{ui.) untuk mereferensikan nilai bidang itu dari baris yang dipilih.tableName.selectedRowData.ID}}
Daftar berikut berisi contoh yang lebih spesifik dari referensi nilai komponen:
{{ui.: Periksa apakah nilaiinputText1.value.trim().length > 0}}inputText1komponen, setelah memotong spasi putih depan atau belakang, memiliki string yang tidak kosong. Ini dapat berguna untuk memvalidasi input pengguna atau mengaktifkan/menonaktifkan komponen lain berdasarkan nilai bidang teks input.{{ui.: Untuk komponen multi-pilih bernamamultiSelect1.value.join(", ")}}multiSelect1, ekspresi ini mengubah array nilai opsi yang dipilih menjadi string yang dipisahkan koma. Ini dapat membantu untuk menampilkan opsi yang dipilih dalam format yang mudah digunakan atau meneruskan pilihan ke komponen atau otomatisasi lain.{{ui.: Ekspresi ini memeriksamultiSelect1.value.includes("option1")}}option1apakah nilai disertakan dalam array opsi yang dipilih untukmultiSelect1komponen. Ia mengembalikan true jikaoption1dipilih, dan false sebaliknya. Ini dapat berguna untuk merender komponen secara kondisional atau mengambil tindakan berdasarkan pilihan opsi tertentu.{{ui.: Untuk komponen unggahan file Amazon S3 bernamas3Upload1.files.length > 0}}s3Upload1, ekspresi ini memeriksa apakah ada file yang telah diunggah dengan memeriksa panjang array file. Ini dapat berguna untuk mengaktifkan/menonaktifkan komponen atau tindakan lain berdasarkan apakah file telah diunggah.{{ui.: Ekspresi ini menyaring daftar file yang diunggah dalams3Upload1.files.filter(file => file.type === "image/png").length}}s3Upload1komponen untuk hanya menyertakan file gambar PNG, dan mengembalikan jumlah file tersebut. Ini dapat membantu untuk memvalidasi atau menampilkan informasi tentang jenis file yang diunggah.
Memperbarui nilai komponen UI
Untuk memperbarui atau memanipulasi nilai komponen, gunakan RunComponentAction dalam otomatisasi. Berikut adalah contoh sintaks yang dapat Anda gunakan untuk memperbarui nilai komponen input teks bernama myInput menggunakan RunComponentAction tindakan:
RunComponentAction(ui.myInput, "setValue", "New Value")
Dalam contoh ini, RunComponentAction langkah memanggil setValue tindakan pada myInput komponen, meneruskan nilai baru,New Value.
Bekerja dengan data tabel
Anda dapat mengakses data tabel dan nilai untuk melakukan operasi. Anda dapat menggunakan ekspresi berikut untuk mengakses data tabel:
currentRow: Digunakan untuk mengakses data tabel dari baris saat ini dalam tabel. Misalnya, menyetel nama tindakan tabel, mengirimkan nilai dari baris ke otomatisasi yang dimulai dari tindakan, atau menggunakan nilai dari kolom yang ada dalam tabel untuk membuat kolom baru.ui.dantableName.selectedRowui.keduanya digunakan untuk mengakses data tabel dari komponen lain pada halaman. Misalnya, mengatur nama tombol di luar tabel berdasarkan baris yang dipilih. Nilai yang dikembalikan adalah sama, tetapi perbedaan antaratableName.selectedRowDataselectedRowdanselectedRowDataadalah sebagai berikut:selectedRow: Namespace ini menyertakan nama yang ditampilkan di header kolom untuk setiap bidang. Anda harus menggunakanselectedRowsaat mereferensikan nilai dari kolom yang terlihat di tabel. Misalnya, jika Anda memiliki kolom kustom atau dihitung dalam tabel yang tidak ada sebagai bidang dalam entitas.selectedRowData: Namespace ini mencakup bidang dalam entitas yang digunakan sebagai sumber untuk tabel. Anda harus menggunakanselectedRowDatauntuk mereferensikan nilai dari entitas yang tidak terlihat dalam tabel, tetapi berguna untuk komponen atau otomatisasi lain di aplikasi Anda.
Daftar berikut berisi contoh mengakses data tabel dalam ekspresi:
{{ui.: Mengembalikan nilaitableName.selectedRow.columnNameWithNoSpace}}columnNameWithNoSpacekolom dari baris yang dipilih dalam tabel.{{ui.: Mengembalikan nilaitableName.selectedRow.['Column Name With Space']}}Column Name With Spacekolom dari baris yang dipilih dalam tabel.{{ui.: Mengembalikan nilai bidangtableName.selectedRowData.fieldName}}fieldNameentitas dari baris yang dipilih dalam tabel.{{ui.: Referensi nama kolom baris yang dipilih dari komponen atau ekspresi lain pada halaman yang sama.tableName.selectedRows[0].columnMappingName}}{{currentRow.: Menggabungkan nilai dari beberapa kolom untuk membuat kolom baru dalam tabel.firstName+ ' ' + currentRow.lastNamecolumnMapping}}{{ { "Blocked": "🔴", "Delayed": "🟡", "On track": "🟢" }[currentRow.: Sesuaikan nilai tampilan bidang dalam tabel berdasarkan nilai status yang disimpan.statuscolumnMapping] + " " + currentRow.statuscolumnMapping}}{{currentRow.,colName}}{{currentRow[",First Name"]}}{{currentRow}}, atau{{ui.: Lewati konteks baris yang direferensikan dalam tindakan baris.tableName.selectedRows[0]}}
Mengakses otomatisasi
Anda dapat menggunakan otomatisasi untuk menjalankan logika dan operasi sisi server di App Studio. Dalam tindakan otomatisasi, Anda dapat menggunakan ekspresi untuk memproses data, menghasilkan nilai dinamis, dan menggabungkan hasil dari tindakan sebelumnya.
Mengakses parameter otomatisasi
Anda dapat meneruskan nilai dinamis dari komponen UI dan otomatisasi lainnya ke dalam otomatisasi, membuatnya dapat digunakan kembali dan fleksibel. Ini dilakukan dengan menggunakan parameter otomatisasi dengan params namespace sebagai berikut:
{{params.: Referensi nilai yang diteruskan ke otomatisasi dari komponen UI atau sumber lain. Misalnya, parameterName}}{{params. akan mereferensikan parameter bernamaID}}ID.
Memanipulasi parameter otomatisasi
Anda dapat menggunakan JavaScript untuk memanipulasi parameter otomatisasi. Lihat contoh berikut:
{{params.: Menggabungkan nilai yang diteruskan sebagai parameter.firstName}} {{params.lastName}}{{params.: Tambahkan dua parameter angka.numberParam1+ params.numberParam2}}{{params.: Periksa apakah parameter tidak nol atau tidak terdefinisi, dan memiliki panjang bukan nol. Jika benar, gunakan nilai yang disediakan; jika tidak, tetapkan nilai default.valueProvided?.length > 0 ? params.valueProvided: 'Default'}}{{params.: JikarootCause|| "No root cause provided"}}params.parameternya salah (null, undefined, atau string kosong), gunakan nilai default yang disediakan.rootCause{{Math.min(params.: Batasi nilai parameter ke nilai maksimum (dalam hal ini,numberOfProducts,100)}}100).{{ DateTime.fromISO(params.: JikastartDate).plus({ days: 7 }).toISO() }}params.parameternyastartDate"2023-06-15T10:30:00.000Z", ekspresi ini akan dievaluasi"2023-06-22T10:30:00.000Z", yang merupakan tanggal satu minggu setelah tanggal mulai.
Mengakses hasil otomatisasi dari tindakan sebelumnya
Otomatisasi memungkinkan aplikasi untuk menjalankan logika sisi server dan operasi, seperti query database, berinteraksi dengan, atau melakukan transformasi data. APIs resultsNamespace menyediakan akses ke output dan data yang dikembalikan oleh tindakan sebelumnya dalam otomatisasi yang sama. Perhatikan poin-poin berikut tentang mengakses hasil otomatisasi:
Anda hanya dapat mengakses hasil dari langkah-langkah otomatisasi sebelumnya dalam otomatisasi yang sama.
Jika Anda memiliki tindakan bernama
action1danaction2dalam urutan itu,action1tidak dapat mereferensikan hasil apa pun, dan hanyaaction2dapat mengaksesresults..action1Ini juga berfungsi dalam tindakan sisi klien. Misalnya, jika Anda memiliki tombol yang memicu otomatisasi menggunakan
InvokeAutomationtindakan. Anda kemudian dapat memiliki langkah navigasi denganRun Ifkondisi seperti menavigasiresults.ke halaman dengan penampil PDF jika otomatisasi menunjukkan file tersebut adalah PDF.myInvokeAutomation1.fileType === "pdf"
Daftar berikut berisi sintaks untuk mengakses hasil otomatisasi dari tindakan sebelumnya menggunakan namespace. results
{{results.: Ambil array data dari langkah otomatisasi bernamastepName.data}}stepName.{{results.: Ambil output dari langkah otomatisasi bernamastepName.output}}stepName.
Cara Anda mengakses hasil langkah otomatisasi tergantung pada jenis tindakan dan data yang dikembalikan. Tindakan yang berbeda dapat mengembalikan properti atau struktur data yang berbeda. Berikut adalah beberapa contoh umum:
Untuk tindakan data, Anda dapat mengakses array data yang dikembalikan menggunakan
results..stepName.dataUntuk tindakan panggilan API, Anda dapat mengakses badan respons menggunakan
results..stepName.bodyUntuk tindakan Amazon S3, Anda dapat mengakses konten file menggunakan.
results.stepName.Body.transformToWebStream()
Lihat dokumentasi untuk jenis tindakan tertentu yang Anda gunakan untuk memahami bentuk data yang mereka kembalikan dan cara mengaksesnya di dalam results namespace. Daftar berikut berisi beberapa contoh
{{results.: Dengan asumsigetDataStep.data.filter(row => row.status === "pending").length}}getDataStepadalah tindakanInvoke Data Actionotomatisasi yang mengembalikan array baris data, ekspresi ini menyaring array data untuk memasukkan hanya baris di mana bidang status sama denganpending, dan mengembalikan panjang (hitungan) dari array yang difilter. Hal ini dapat berguna untuk query atau pengolahan data berdasarkan kondisi tertentu.{{params.: Jikaemail.split("@")[0]}}params.parameter berisi alamat email, ekspresi ini membagi string pada simbol @ dan mengembalikan bagian sebelum simbol @, secara efektif mengekstrak bagian nama pengguna dari alamat email.email{{new Date(params.: Ekspresi ini mengambil parameter timestamp Unix (timestamp* 1000)}}params.) dan mengubahnya menjadi objek Date. JavaScript Ini mengasumsikan bahwa stempel waktu dalam hitungan detik, sehingga mengalikannya dengan 1000 untuk mengubahnya menjadi milidetik, yang merupakan format yang diharapkan oleh konstruktor.timestampDateIni dapat berguna untuk bekerja dengan nilai tanggal dan waktu dalam otomatisasi.{{results.: Untuk tindakanstepName.Body}}Amazon S3 GetObjectotomatisasi bernamastepName, ekspresi ini mengambil konten file, yang dapat dikonsumsi oleh komponen UI seperti Image atau PDF Viewer untuk menampilkan file yang diambil. Perhatikan bahwa ekspresi ini perlu dikonfigurasi dalam keluaran Otomasi otomatisasi untuk digunakan dalam komponen.
