Logika Widget

Ada dua cara untuk memberikan logika tambahan ke UI: peristiwa dan batasan input.

Peristiwa

Anda dapat membuat UI Anda lebih dinamis dengan menentukan tindakan widget sebagai respons terhadap peristiwa. Misalnya, peristiwa onClick pada widget tombol menentukan tindakan yang akan dilakukan tombol ketika diklik.

Sebagian besar widget memiliki setidaknya tiga peristiwa yang tersedia: onAttach, onDetach, dan onDataLoad. Beberapa widget memiliki peristiwa tambahan terkait dengan tujuan penggunaannya. Misalnya, widget Kolom teks memiliki peristiwa onValueChanged, tetapi bukan peristiwa onClick.

Gunakan bagian Peristiwa dari Editor Properti untuk menentukan respons widget terhadap peristiwa. Klik panah di samping nama peristiwa untuk membuka dialog Pilih Peristiwa. Pilih salah satu skrip yang sudah dibuat sebelumnya, atau tulis skrip Anda sendiri dengan mengklik Tindakan Kustom.

Nama Peristiwa Deskripsi
onAttach Menjalankan skrip saat widget dipasang ke DOM.
Contoh: Peristiwa onAttach di panel utama aplikasi dapat membaca cookie untuk menginisialisasi status saat tampilan dimuat.
onDetach Menjalankan skrip ketika widget dilepas dari DOM.
Contoh: Peristiwa onDetach di panel utama aplikasi dapat menulis ke cookie untuk menyimpan status tampilan saat ini ketika pengguna keluar dari aplikasi.
onDataLoad Menjalankan skrip saat widget dan datanya dimuat.
Contoh: Peristiwa onDataLoad pada widget daftar dapat menyembunyikan baris panel tertentu berdasarkan hasil kueri.
onClick Menjalankan skrip ketika pengguna mengklik widget. Tersedia di tombol, link, dan widget lainnya yang dapat diklik.
Contoh: Peristiwa onClick pada tombol dapat mengarahkan pengguna ke tampilan yang berbeda.
onValueChange Menjalankan skrip ketika properti value widget berubah.
Contoh: Peristiwa onValueChange pada kolom teks dapat menjalankan penelusuran pada sumber data kolom setelah pengguna selesai memasukkan kueri.
onValueEdit Menjalankan skrip ketika pengguna mengedit nilai widget. Tidak seperti onValueChange, peristiwa ini tidak berjalan sebagai respons terhadap binding atau perubahan terprogram.
Contoh: Peristiwa onValueEdit pada kolom teks dapat menandai istilah yang cocok sebagai respons terhadap kueri penelusuran.
onValidate Menjalankan skrip ketika nilai widget berubah atau skrip lain memicu validasi. Skrip hanya dijalankan jika nilai baru memenuhi batasan widget.
Catatan validasi: Menampilkan string kosong, null, atau undefined untuk nilai yang valid. Menampilkan string yang tidak kosong dengan pesan error untuk nilai yang tidak valid.

Memvalidasi input

Sebaiknya Anda memvalidasi input pengguna sebelum menyimpannya ke database. Misalnya, aplikasi Anda mungkin mengharuskan nomor telepon yang diberikan memiliki jumlah digit yang benar, atau kolom nama depan dan belakang pengguna diisi. Di App Maker, Anda dapat menggunakan batasan untuk memvalidasi input atau menulis skrip validasi Anda sendiri yang dijalankan selama peristiwa onValidate.

Validasi dengan batasan

Widget kolom teks dan area teks memiliki bagian Validasi Data di Editor Properti masing-masing. Batasan ini dipicu ketika nilai widget berubah, dan dapat menampilkan error jika batasan tidak terpenuhi. Batasan menerima nilai eksplisit, data binding, atau ekspresi binding.

Properti Deskripsi
required Ketika diaktifkan, properti ini menunjukkan bahwa input diperlukan.
minLength Menentukan panjang karakter minimum yang diizinkan dari string, termasuk spasi. Spasi di awal atau di akhir tidak dihitung.
maxLength Menentukan panjang karakter maksimum dari string, termasuk spasi. Spasi di awal atau di akhir tidak dihitung.
regexp Menentukan ekspresi reguler untuk memvalidasi input pengguna. Menggunakan library ekspresi reguler JavaScript.
Contoh: Ekspresi yang sesuai dengan format Kode pos Amerika Serikat: ^\d{5}(-\d{4})?$.

Validasi dengan peristiwa onValidate

Dengan peristiwa onValidate, Anda dapat menulis skrip validasi sendiri. Skrip tersebut paling optimal digunakan dalam kasus berikut:

  • Kasus penggunaan Anda lebih kompleks daripada yang ada dalam batasan widget dan kolom.
  • Anda perlu memberikan pesan kustom error.
  • Validasi Anda bergantung pada nilai kolom atau widget lainnya.

Peristiwa onValidate dapat berfungsi dengan batasan, karena hanya dipicu jika nilainya melewati batasan.

Contoh: Aplikasi reservasi kamar hotel mengharuskan pengguna memasukkan nilai antara 1 dan 21 untuk nomor lantainya, tetapi bukan 13.

Tetapkan batasan min length ke 1, batasan max length ke 21, lalu periksa nomor sial di peristiwa onValidate widget:

  if (newValue == 13) {
    return "Please select a number with a bit more luck.";
  }

Validasi pemicu dengan metode validate

Batasan dan skrip onValidate hanya dipicu ketika nilai widget berubah, dan terkadang perubahan tersebut tidak cukup. Misalnya, jika Anda memiliki formulir dengan validasi di setiap kolom, tetapi pengguna mengklik Kirim tanpa mengisi satu kolom pun, pemeriksaan validasinya mungkin tidak akan pernah berjalan.

Untuk menghindari skenario ini, Anda dapat memicu validasi menggunakan metode validate. Dengan menggunakan contoh di atas, Anda dapat menambahkan kode berikut ke peristiwa onClick dari tombol Kirim, dengan asumsi tombol tersebut ada di panel yang sama dengan kolom yang divalidasi:

  if (widget.parent.validate()) {
    // We passed validation! Do whatever you want here...
  }

Atau, Anda dapat memvalidasi setiap widget secara eksplisit:

  if (widget.parent.children.WidgetToValidate.validate()) {
    // We passed validation! Do whatever you want here...
  }

Prioritas validasi

App Maker memvalidasi widget dengan urutan sebagai berikut:

  1. Batasan widget:
    • Wajib
    • Panjang/angka maksimal/minimal
    • Ekspresi reguler
  2. Peristiwa onValidate
  3. Batasan properti terikat seperti batasan kolom

Validasi berhenti segera setelah langkah mana pun menentukan nilai tidak valid. Misalnya, dengan mencentang batasan required, peristiwa onValidate tidak akan pernah menerima nilai null, karena nilai tersebut gagal divalidasi selama pemeriksaan batasan.

Properti terikat tidak diperbarui hingga nilai baru melewati validasi. Jika widget menjadi valid setelah gagal pada pemeriksaan awal, dikarenakan oleh panggilan validate(), binding yang menyertakan properti value telah diperbarui dengan benar.