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.
![How To Create Dialog Box in PowerApps Canvas](https://yulianmf.com/Images/Artikel/PowerPlatform/PowerApps/CreateDialogBox/add-rect-1.png)
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:
![How To Create Dialog Box in PowerApps Canvas](https://yulianmf.com/Images/Artikel/PowerPlatform/PowerApps/CreateDialogBox/add-rect-2.png)
![How To Create Dialog Box in PowerApps Canvas](https://yulianmf.com/Images/Artikel/PowerPlatform/PowerApps/CreateDialogBox/add-rect-3.png)
3. Tambahkan rectangle, label, dan button (Ya dan Tidak) ke dalam rectangle yang sudah ada, dan atur warnanya sesuai preferensi masing-masing.
![How To Create Dialog Box in PowerApps Canvas](https://yulianmf.com/Images/Artikel/PowerPlatform/PowerApps/CreateDialogBox/add-rect-4.png)
4. Kelompokkan kontrol-kontol rectangle, label, dan button menjadi satu group.
![How To Create Dialog Box in PowerApps Canvas](https://yulianmf.com/Images/Artikel/PowerPlatform/PowerApps/CreateDialogBox/add-rect-5.png)
![How To Create Dialog Box in PowerApps Canvas](https://yulianmf.com/Images/Artikel/PowerPlatform/PowerApps/CreateDialogBox/add-rect-6.png)
Jika diperlukan nama group tersebut dapat diubah namanya.
![How To Create Dialog Box in PowerApps Canvas](https://yulianmf.com/Images/Artikel/PowerPlatform/PowerApps/CreateDialogBox/add-rect-7.png)
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.
![How To Create Dialog Box in PowerApps Canvas](https://yulianmf.com/Images/Artikel/PowerPlatform/PowerApps/CreateDialogBox/set-var-1.png)
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.
![How To Create Dialog Box in PowerApps Canvas](https://yulianmf.com/Images/Artikel/PowerPlatform/PowerApps/CreateDialogBox/set-var-3.png)
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.
![How To Create Dialog Box in PowerApps Canvas](https://yulianmf.com/Images/Artikel/PowerPlatform/PowerApps/CreateDialogBox/set-var-4.png)
Script untuk button “Tidak” pada event OnSelect berfungsi untuk menyembunyikan kembali kotak dialognya dengan mengubah variable yang digunakan menjadi false:
![How To Create Dialog Box in PowerApps Canvas](https://yulianmf.com/Images/Artikel/PowerPlatform/PowerApps/CreateDialogBox/set-var-5.png)
8. Ubah nilai properti Visible dari Confirmation Group dengan mengambil nilai dari variabel varShowDialog.
![How To Create Dialog Box in PowerApps Canvas](https://yulianmf.com/Images/Artikel/PowerPlatform/PowerApps/CreateDialogBox/set-var-2.png)
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:
![How To Create Dialog Box in PowerApps Canvas](https://yulianmf.com/Images/Artikel/PowerPlatform/PowerApps/CreateDialogBox/confirm-1.png)
Terima kasih. Semoga bermanfaat.