Tidak ada aplikasi yang tidak pernah menggunakan Modal Dialog. Fitur ini memungkinkan aplikasi menampilkan data dalam sebuah jendela kecil yang muncul ke layar secara pop-up, tanpa harus memuat ulang semua konten di halaman yang sedang terbuka saat itu.
Demikian halnya dengan aplikasi web yang dihasilkan oleh PHPMaker. Sampai dengan versi 2026, PHPMaker memiliki fitur Modal Dialog utama dengan id ew-modal-dialog. Melalui jendela Modal Dialog ini, kita dapat menampilkan data pada halaman Add, Edit, View, Search tanpa harus menutup halaman List yang sedang terbuka.
Tapi sayangnya, Modal Dialog yang digunakan oleh aplikasi web yang dihasilkan hanya dengan PHPMaker 2026 masih terlalu kaku. Apa artinya? Modal Dialog tidak dapat digeser atau dipindah-pindahkan lokasinya di layar. Lho? Kenapa perlu dipindah-pindahkan? Pasti timbul pertanyaan tersebut!
Jadi begini. Biasanya halaman Add, Edit, View, atau Search (Advanced Search) yang ditampilkan lewat Modal Dialog, sumbernya berasal dari halaman List. Ketika Modal Dialog itu ditampilkan, maka sebagian data yang terdapat pada table di halaman List akan tertutup oleh area Modal Dialog tadi.
Nah, kadang-kadang, user masih ingin tetap melihat data pada area yang tertutup Modal Dialog tadi, saat jendela Modal Dialog tadi ditampilkan. Caranya bagaimana? Mereka ingin menggeser posisi jendela Modal Dialog tadi. Ketika Modal Dialog tersebut tidak bisa digeser atau dipindahkan posisinya sementara, maka di situlah user akan merasa tidak nyaman.
Akhirnya, mereka harus menutup terlebih dulu Modal Dialog tersebut, lalu melihat data yang tertutup tadi, kemudian dilanjutkan dengan membuka kembali Modal Dialog tadi. Wuih, betapa repotnya, bukan? Bukan!
Untuk mengatasi kondisi yang tidak nyaman tadi, maka Masino Extensions for PHPMaker 2026 hadir. Sekarang Modal Dialog tadi menjadi dapat dipindahkan atau digeser ke posisi yang diinginkan di layar dengan cara menyeret bagian Header Modal Dialog tersebut. User pun menjadi lebih nyaman saat menampilkan data pada halaman Add, Edit, View, maupun Search lewat jendela Modal Dialog.
Tidak hanya itu saja. Masino Extensions for PHPMaker 2026 juga menambahkan kemampuan untuk menampilkan jendela Modal Dialog tadi pada posisi di tengah-tengah layar. Dengan cara ini, maka user merasa lebih nyaman lagi, karena mata mereka akan tetap fokus di tengah-tengah layar ketika Modal Dialog tadi muncul.
Bandingkan dengan posisi Modal Dialog yang hanya dihasilkan oleh PHPMaker 2026 saja, yang masih menampilkan Modal Dialog cenderung agak ke bagian atas dari layar, dan posisinya pun tidak terlalu ke tengah layar, sehingga cenderung sedikit membingungkan user yang akan merasa sedikit terganggu fokus matanya.
Ukuran jendela Modal Dialog itu pun bisa diatur secara dinamis dari bagian Startup Script. Misalnya, kita tidak ingin selalu menggunakan ukuran jendela Modal Dialog yang terlalu besar, karena konten yang ingin ditampilkan tidak mengandung banyak field. Kalian juga bisa melihat kode untuk mewujudkan hal ini pada project demo2026 yang aku sediakan.
Selain itu, Masino Extensions for PHPMaker 2026 juga sudah menambahkan kemampuan untuk menampilkan sebuah icon kecil di sebelah kanan dari judul halaman pada jendela Modal Dialog tadi, yang ketika diklik akan menampilkan sebuah jendela khusus menggunakan Alertify JS, yang berisi konten bantuan atau penjelasan mengenai halaman yang terbuka di jendela Modal Dialog tadi.
Fitur yang terakhir ini sering dikenal dengan istilah Help Online, atau bantuan yang dapat ditampilkan sesuai dengan konten halaman yang sedang diakses. Contoh, ketika kita membuka halaman View milik table Order Details pada jendela Modal Dialog, maka di sebelah kanan judul Modal Dialog View tadi terdapat icon tanda tanya, yang jika diklik oleh user, akan menampilkan jendela kecil lainnya berisi bantuan yang menjelaskan halaman View tadi.
Ini pun salah satu improvement yang selama ini sudah aku tambahkan di Masino Extensions untuk menampilkan jendela Modal Dialog selain menggunakan fitur Modal Dialog dari Bootstrap. Harus ada Javascript library lain yang melengkapi supaya dapat ditampilkan di atas jendela Modal Dialog tadi.
Penasaran ingin melihat demonya? Klik di sini, login menggunakan username admin dan password master, lalu buka menu OTHER TABLES -> Order Details, lalu terserah di salah satu row pada tabel di halaman List tadi, klik menu View, maka system akan menampilkan halaman View pada jendela Modal Dialog.
Kalian bisa melihat ada icon tanda tanya di sebelah kanan dari tulisan View. Cobalah klik icon tanda tanya tadi, maka kalian akan melihat jendela kecil lainnya yang muncul secara pop-up dengan konten penjelasan dari halaman View tadi, dengan judul View Order Details, dan posisinya berada di atas dari jendela Modal Dialog tadi.
Setelah itu, silahkan tutup Help Online tadi. Kemudian sekarang cobalah geser jendela Modal Dialog yang memiliki judul View tadi, dengan cara menyeret bagian Header-nya. See? Sekarang Modal Dialog tersebut dapat digeser ke posisi yang kalian inginkan di layar.
Di demo tadi, kalian juga sudah melihat bahwa ukuran jendela Modal Dialog sudah bisa disesuaikan secara dinamis hanya untuk menu atau table tertentu lewat project PHPMaker 2026. Karena jumlah field pada menu Order Details tadi tidak terlalu banyak, apalagi karena ditampilkan pada layout dua kolom, maka ukuran jendel Modal Dialog tadi perlu kita perkecil ukurannya.
Semua keuntungan yang sudah aku jelaskan itu bisa kalian rasakan sendiri pada project-project PHPMaker 2026 kalian, jika menggunakan Masino Extensions for PHPMaker 2026. Jadi, tidak ada lagi alasan untuk menunda-nunda tidak menggunakan Masino Extensions for PHPMaker 2026.
O iya…, mengenai fitur Help Online yang di atas tadi, akan kita bahas lebih detail pada tulisan berikutnya. So, stay tuned!
Tinggalkan Balasan