How To Create Dialog Box in PowerApps Canvas

Posted at : Aug/07/2022
264 Views | 0 Comments

How To Create Dialog Box in PowerApps CanvasSalah 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

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

How To Create Dialog Box in PowerApps Canvas

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

4. Kelompokkan kontrol-kontol rectangle, label, dan button menjadi satu group.

How To Create Dialog Box in PowerApps Canvas

How To Create Dialog Box in PowerApps Canvas

Jika diperlukan nama group tersebut dapat diubah namanya.

How To Create Dialog Box in PowerApps Canvas

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

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

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

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

8. Ubah nilai properti Visible dari Confirmation Group dengan mengambil nilai dari variabel varShowDialog.

How To Create Dialog Box in PowerApps Canvas

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

Terima kasih. Semoga bermanfaat.


[Comments]


[Write your comment]

Name (required)

Email (required-will not published)

 
Comment
L902
Input code above below (Case Sensitive) :

ABOUT ME

Rully Yulian MF
Rully Yulian Muhammad Firmansyah | Founder & IT Trainer Native Enterprise | MCT (2008-2019) | MVP (2009-2016) | Xamarin Certified Professional | MTA | MCAD | MCPD | MOS | Bandung, West Java, Indonesia.

[Read More...]

TOP DOWNLOAD

Mapping Hak Akses User Pada MenuStrip Sampai Control Button
downloaded 6977 times

Bagaimana caranya menginstal database ketika deploying sebuah aplikasi?
downloaded 4891 times

Simple Voice Engine Application With Sound Player Class...
downloaded 4043 times

Change Group,Sort Order, Filtering By Date in Crystal Reports
downloaded 3458 times

WinForms DataGrid Paging With SqlDataAdapter
downloaded 2879 times


LINKS

CERTIFICATIONS

Xamarin Certified
MOS 2007
MCT
MCPD
MCTS
MCAD.NET
ASP.NET Brainbench

NATIVE ENTERPRISE

Native Enterprise - IT Training

FOLLOW ME

Youtube  Facebook  Instagram  LinkedIn   Twitter

RSS


NATIVE ENTERPRISE NEWS

© Copyright 2006 - 2022   Rully Yulian MF   All rights reserved.