Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
# Menggunakan JavaScript untuk menulis ekspresi di App Studio
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\$1β.
+ `{{ 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` is`John`, and `currentRow.LastName` is`Doe`, maka ekspresi akan memutuskan untuk`John Doe`.
## Tanggal dan waktu
JavaScript menyediakan berbagai fungsi dan objek untuk bekerja dengan tanggal dan waktu. Contoh:
+ `{{ 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. Contoh:
+ `{{ui.timeInput.value > "10:00 AM"}}`: Memeriksa apakah waktunya setelah pukul 10:00 pagi.
+ `{{ui.timeInput.value <= "5:00 PM"}}`: Memeriksa apakah waktunya pada atau sebelum pukul 17:00.
+ `{{ui.timeInput.value > DateTime.now().toISOTime()}}`: Memeriksa apakah waktunya setelah waktu saat ini.
+ `{{ui.dateInput.value > DateTime.now().toISODate()}}`: Memeriksa apakah tanggal sebelum tanggal saat ini.
+ `{{ DateTime.fromISO(ui.dateInput.value).diff(DateTime.now(), "days").days >= 5 }}`: Memeriksa apakah tanggalnya setidaknya 5 hari dari tanggal saat ini.
## 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**
`ui`Namespace 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.textInputName.value}}`: Merupakan nilai komponen input teks bernama*textInputName*.
+ `{{ui.formName.isValid}}`: Periksa apakah semua bidang dalam formulir bernama *formName* valid berdasarkan kriteria validasi yang Anda berikan.
+ `{{ui.tableName.currentRow.columnName}}`: Merupakan nilai kolom tertentu di baris saat ini dari komponen tabel bernama*tableName*.
+ `{{ui.tableName.selectedRowData.fieldName}}`: Merupakan nilai bidang tertentu dari baris yang dipilih dalam komponen tabel bernama*tableName*. Anda kemudian dapat menambahkan nama bidang seperti `ID` (`{{ui.tableName.selectedRowData.ID}}`) untuk mereferensikan nilai bidang itu dari baris yang dipilih.
Daftar berikut berisi contoh yang lebih spesifik dari referensi nilai komponen:
+ `{{ui.inputText1.value.trim().length > 0}}`: Periksa apakah nilai *inputText1* komponen, setelah memotong spasi putih depan atau belakang, memiliki string yang tidak kosong. Ini dapat berguna untuk memvalidasi input pengguna atau komponen enabling/disabling lain berdasarkan nilai bidang teks input.
+ `{{ui.multiSelect1.value.join(", ")}}`: Untuk komponen multi-pilih bernama*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.multiSelect1.value.includes("option1")}}`: Ekspresi ini memeriksa *option1* apakah nilai disertakan dalam array opsi yang dipilih untuk *multiSelect1* komponen. Ia mengembalikan true jika *option1* dipilih, dan false sebaliknya. Ini dapat berguna untuk merender komponen secara kondisional atau mengambil tindakan berdasarkan pilihan opsi tertentu.
+ `{{ui.s3Upload1.files.length > 0}}`: Untuk komponen unggahan file Amazon S3 bernama*s3Upload1*, ekspresi ini memeriksa apakah ada file yang telah diunggah dengan memeriksa panjang array file. Ini dapat berguna untuk komponen atau tindakan enabling/disabling lain berdasarkan apakah file telah diunggah.
+ `{{ui.s3Upload1.files.filter(file => file.type === "image/png").length}}`: Ekspresi ini menyaring daftar file yang diunggah dalam *s3Upload1* komponen 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.tableName.selectedRow`dan `ui.tableName.selectedRowData` 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 antara `selectedRow` dan `selectedRowData` adalah sebagai berikut:
+ `selectedRow`: Namespace ini menyertakan nama yang ditampilkan di header kolom untuk setiap bidang. Anda harus menggunakan `selectedRow` saat 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 menggunakan `selectedRowData` untuk 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.tableName.selectedRow.columnNameWithNoSpace}}`: Mengembalikan nilai *columnNameWithNoSpace* kolom dari baris yang dipilih dalam tabel.
+ `{{ui.tableName.selectedRow.['Column Name With Space']}}`: Mengembalikan nilai *Column Name With Space* kolom dari baris yang dipilih dalam tabel.
+ `{{ui.tableName.selectedRowData.fieldName}}`: Mengembalikan nilai bidang *fieldName* entitas dari baris yang dipilih dalam tabel.
+ `{{ui.tableName.selectedRows[0].columnMappingName}}`: Referensi nama kolom baris yang dipilih dari komponen atau ekspresi lain pada halaman yang sama.
+ `{{currentRow.firstName + ' ' + currentRow.lastNamecolumnMapping}}`: Menggabungkan nilai dari beberapa kolom untuk membuat kolom baru dalam tabel.
+ `{{ { "Blocked": "π΄", "Delayed": "π‘", "On track": "π’" }[currentRow.statuscolumnMapping] + " " + currentRow.statuscolumnMapping}}`: Sesuaikan nilai tampilan bidang dalam tabel berdasarkan nilai status yang disimpan.
+ `{{currentRow.colName}}`,`{{currentRow["First Name"]}}`,`{{currentRow}}`, atau`{{ui.tableName.selectedRows[0]}}`: Lewati konteks baris yang direferensikan dalam tindakan baris.
## 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.parameterName}}`: Referensi nilai yang diteruskan ke otomatisasi dari komponen UI atau sumber lain. Misalnya, `{{params.ID}}` akan mereferensikan parameter bernama*ID*.
#### Memanipulasi parameter otomatisasi
Anda dapat menggunakan JavaScript untuk memanipulasi parameter otomatisasi. Lihat contoh berikut:
+ `{{params.firstName}} {{params.lastName}}`: Menggabungkan nilai yang diteruskan sebagai parameter.
+ `{{params.numberParam1 + params.numberParam2}}`: Tambahkan dua parameter angka.
+ `{{params.valueProvided?.length > 0 ? params.valueProvided : 'Default'}}`: Periksa apakah parameter tidak nol atau tidak terdefinisi, dan memiliki panjang bukan nol. Jika benar, gunakan nilai yang disediakan; jika tidak, tetapkan nilai default.
+ `{{params.rootCause || "No root cause provided"}}`: Jika `params.rootCause` parameternya salah (null, undefined, atau string kosong), gunakan nilai default yang disediakan.
+ `{{Math.min(params.numberOfProducts, 100)}}`: Batasi nilai parameter ke nilai maksimum (dalam hal ini,`100`).
+ `{{ DateTime.fromISO(params.startDate).plus({ days: 7 }).toISO() }}`: Jika `params.startDate` parameternya`"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 `results`Namespace menyediakan akses ke output dan data yang dikembalikan oleh tindakan sebelumnya dalam otomatisasi yang sama. Perhatikan poin-poin berikut tentang mengakses hasil otomatisasi:
1. Anda hanya dapat mengakses hasil dari langkah-langkah otomatisasi sebelumnya dalam otomatisasi yang sama.
1. Jika Anda memiliki tindakan bernama *action1* dan *action2* dalam urutan itu, *action1* tidak dapat mereferensikan hasil apa pun, dan hanya *action2* dapat mengakses`results.action1`.
1. Ini juga berfungsi dalam tindakan sisi klien. Misalnya, jika Anda memiliki tombol yang memicu otomatisasi menggunakan `InvokeAutomation` tindakan. Anda kemudian dapat memiliki langkah navigasi dengan `Run If` kondisi seperti menavigasi `results.myInvokeAutomation1.fileType === "pdf"` ke halaman dengan penampil PDF jika otomatisasi menunjukkan file tersebut adalah PDF.
Daftar berikut berisi sintaks untuk mengakses hasil otomatisasi dari tindakan sebelumnya menggunakan namespace. `results`
+ `{{results.stepName.data}}`: Ambil array data dari langkah otomatisasi bernama*stepName*.
+ `{{results.stepName.output}}`: Ambil output dari langkah otomatisasi bernama*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.data`.
+ Untuk tindakan panggilan API, Anda dapat mengakses badan respons menggunakan`results.stepName.body`.
+ Untuk 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.getDataStep.data.filter(row => row.status === "pending").length}}`: Dengan asumsi *getDataStep* adalah tindakan `Invoke Data Action` otomatisasi yang mengembalikan array baris data, ekspresi ini menyaring array data untuk memasukkan hanya baris di mana bidang status sama dengan`pending`, dan mengembalikan panjang (hitungan) dari array yang difilter. Hal ini dapat berguna untuk query atau pengolahan data berdasarkan kondisi tertentu.
+ `{{params.email.split("@")[0]}}`: Jika `params.email` parameter berisi alamat email, ekspresi ini membagi string pada simbol @ dan mengembalikan bagian sebelum simbol @, secara efektif mengekstrak bagian nama pengguna dari alamat email.
+ `{{new Date(params.timestamp * 1000)}}`: Ekspresi ini mengambil parameter timestamp Unix (`params.timestamp`) 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. `Date` Ini dapat berguna untuk bekerja dengan nilai tanggal dan waktu dalam otomatisasi.
+ `{{results.stepName.Body}}`: Untuk tindakan `Amazon S3 GetObject` otomatisasi bernama*stepName*, 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.