Salah satu fitur yang tidak tersedia secara default di Canvas PowerApps yaitu Kotak Dialog yang bermanfaat untuk melakukan konfirmasi terlebih dahulu sebelum user melakukan sesuatu di form seperti menambahkan data baru, edit, atau menghapus data. Dalam artikel ini akan dijelaskan bagaimana caranya membuat kotak dialog di Canvas PowerApps untuk kebutuhan tersebut.
Sebenarnya solusi ini agak tricky, oleh karena itu solusinya bisa beragam sesuai dengan preferensi masing-masing.
Dimisalkan sudah ada sebuah canvas app yang terdapat screen di dalamnya untuk melakukan proses add atau edit data. Lakukan langkah-langkah berikut:
1. Tambahkan rectangle ke dalam screen yang akan menggunakan kotak dialog. Rectangle dapat disisipkan dari menu insert icons dan berada pada posisi hampir paling bawah.
2. Ubah opacity warna background rectangle tersebut dengan mengubah nilai Alpha menjadi 50 (setelah diinput nilai tidak akan tepat 50) dan perlebar ukuran rectanglenya sampai menutupi screen secara penuh seperti pada gambar berikut:
3. Tambahkan rectangle, label, dan button (Ya dan Tidak) ke dalam rectangle yang sudah ada, dan atur warnanya sesuai preferensi masing-masing.
4. Kelompokkan kontrol-kontol rectangle, label, dan button menjadi satu group.
Jika diperlukan nama group tersebut dapat diubah namanya.
Kotak dialog akan ditampilkan dan disembunyikan secara dinamis berdasarkan nilai dari variabel yang nantinya akan digunakan untuk mengatur nilai properti Visible dari kontrol Confirmation Group.
5. Pembuatan dan pemberian nilai variabel pertama kali akan dilakukan pada event OnStart dari aplikasi. Nama variabel yang akan dibuat yaitu varShowDialog dan nilai awalnya yaitu false. Berikut gambarnya.
6. Ubah script dari properti OnSelect pada icon yang digunakan untuk menampilkan kotak dialog dengan mengubah nilai variable varShowDialog menjadi true. Hal tersebut akan membuat kotak dialog tampil.
7. Tambahkan script (formula) pada event OnSelect dari button “Ya”. Script yang ditambahkan berfungsi untuk submit data dari form tersebut dan mengubah nilai variabel varShowDialog kembali menjadi false.
Script untuk button “Tidak” pada event OnSelect berfungsi untuk menyembunyikan kembali kotak dialognya dengan mengubah variable yang digunakan menjadi false:
8. Ubah nilai properti Visible dari Confirmation Group dengan mengambil nilai dari variabel varShowDialog.
9. Preview canvas app dan klik icon Check pada saat akan menambahkan data baru atau edit data, maka pada saat itu kotak dialog akan tampil:
Terima kasih. Semoga bermanfaat.