Entah sudah berapa banyak keuntungan yang kita peroleh ketika menggunakan PHPMaker untuk membangun Aplikasi Web. Selain fitur-fiturnya yang sangat lengkap, demikian juga fleksibilitas yang sangat tinggi.
Kita bisa menambahkan sedikit kode saja, untuk menampilkan fitur yang sebelumnya tidak pernah kita sangka bisa dilakukan dari PHPMaker.
Di artikel ini kita akan membahas bagaimana mudahnya menampilkan jendela Modal Dialog, ketika Pengguna Akhir mengklik atau melakukan dobel klik pada baris tabel yang terdapat di halaman List.
Sebelumnya, pastikan kita sudah mengaktifkan opsi Modal dialog masing-masing pada kelompok Edit Page maupun View Page yang terdapat di bawah Table setup dari project PHPMaker.
Setelah mengaktifkan kedua pengaturan itu, selanjutnya kita cukup menambahkan kode berikut dari bagian Startup Script yang terdapat di bawah lokasi: Client Scripts -> Table-Specific -> List Page pada project PHPMaker 2020:
<?php if (Security()->canEdit()) { // jangan lupa untuk security, jika akses bisa mengubah record ?>
$(".table.ew-table tr").dblclick(function(e) { // event dobel klik untuk Edit Page
// periksa saat kondisi apa saja event dobel klik tidak dieksekusi
if (!$(e.target).hasClass('ew-preview-row-btn') && !$(e.target).hasClass('custom-control-label') && !$(e.target).hasClass('btn')) {
var edit_modal = $(this).find("a.ew-row-link.ew-edit").attr("onclick"); // ambil sintax javascript modal dialog
var edit_url = edit_modal.substring(edit_modal.lastIndexOf(":'") + 2, edit_modal.lastIndexOf("'")); // ambil url dari setiap baris tabel
ew.modalDialogShow({lnk:this, url: edit_url, caption: '<?php echo Language()->phrase("Edit"); ?>', btn: 'SaveBtn'}); // tampilkan Edit Page dalam Modal Dialog
}
});
$(document).on("preview", function(e, args) { // preview row
args.$tabpane.find("tr").dblclick(function (e) { // dobel klik
// periksa saat kondisi apa saja event klik tidak dieksekusi
if (!$(e.target).hasClass('btn') && !$(e.target).hasClass('ew-preview-row-btn') && !$(e.target).hasClass('custom-control-label')) {
var edit_modal = $(this).find("a.ew-row-link.ew-edit").attr("onclick"); // ambil sintaks javascript modal dialog
var edit_url = edit_modal.substring(edit_modal.lastIndexOf(":'") + 2, edit_modal.lastIndexOf("'")); // ambil url dari setiap baris tabel
ew.modalDialogShow({lnk:this, url: edit_url, caption: '<?php echo Language()->phrase("Edit"); ?>', btn: 'SaveBtn'}); // tampilkan Edit Page dalam Modal Dialog
}
});
});
<?php } ?>
<?php if (Security()->canView()) { // jangan lupa untuk security, jika akses bisa menampilkan satu record ?>
$(".table.ew-table tr").click(function(e) { // event klik untuk View Page
// periksa saat kondisi apa saja event klik tidak dieksekusi
if (!$(e.target).hasClass('ew-preview-row-btn') && !$(e.target).hasClass('custom-control-label') && !$(e.target).hasClass('btn')) {
var view_modal = $(this).find("a.ew-row-link.ew-view").attr("onclick"); // ambil sintaks javascript modal dialog
var view_url = view_modal.substring(view_modal.lastIndexOf(":'") + 2, view_modal.lastIndexOf("'")); // ambil url dari setiap baris tabel
ew.modalDialogShow({lnk:this, url: view_url, caption: '<?php echo Language()->phrase("View"); ?>', btn: null}); // tampilkan View Page dalam Modal Dialog
}
});
$(document).on("preview", function(e, args) { // preview row
args.$tabpane.find("tr").click(function (e) { // singel klik
// periksa saat kondisi apa saja event klik tidak dieksekusi
if (!$(e.target).hasClass('btn') && !$(e.target).hasClass('ew-preview-row-btn') && !$(e.target).hasClass('custom-control-label')) {
var view_modal = $(this).find("a.ew-row-link.ew-view").attr("onclick"); // ambil sintaks javascript modal dialog
var view_url = view_modal.substring(view_modal.lastIndexOf(":'") + 2, view_modal.lastIndexOf("'")); // ambil url dari setiap baris tabel
ew.modalDialogShow({lnk:this, url: view_url, caption: '<?php echo Language()->phrase("View"); ?>', btn: null}); // tampilkan View Page dalam Modal Dialog
}
});
});
<?php } ?>
Sekarang, mari kita bahas kode di atas.
Secara garis besar, kode di atas terbagi dua. Pertama untuk menangani event dblclick atau dobel klik, dan yang Kedua untuk menangani event click atau single klik.
Kita harus menangani beberapa kemungkinan berikut supaya kode untuk menampilkan jendela Modal Dialog tersebut tidak dieksekusi:
1. Jika control Checkbox ditampilkan di kolom pertama pada tabel di halaman List. Control ini akan ditampilkan jika pilihan Selected records untuk Export dipilih dari lokasi PHP -> Page Options (Global) -> Export -> Export type pada project PHPMaker 2020.
Selain itu, control Checkbox akan ditampilkan, jika kita menulis kode di server event Row_CustomAction dan Page_Load dengan kondisi multiple records.
Selengkapnya baca artikel saya berjudul Cara Menampilkan Checkbox di Setiap Record pada Halaman List dari PHPMaker,
2. Jika fitur Master/Detail diaktifkan, sehingga sistem akan menampilkan icon plus kecil di sebelah kiri dari setiap baris (+) untuk meng-expand, termasuk tombol minus kecil (-) untuk meng-collpase area tabel Detail,
3. Jika pilihan Use button dropdown for links diaktikfan dari lokasi PHP -> Page Options (Global) project PHPMaker 2020, sehingga di setiap baris tabel memiliki tombol Dropdown yang menampilkan menu-menu seperti View, Edit, Copy, Master/Detail, dan sebagainya.
Artinya, selain dari ketiga kondisi tadi, maka kita boleh mengeksekusi kode yang untuk menampilkan jendela Modal Dialog tersebut.
Jika beberapa kondisi tadi tidak ditangani, maka ketika Pengguna Akhir memberi tanda centang pada Checkbox, atau mengklik icon plus kecil atau minus kecil, atau mengklik tombol Dropdown, maka kode untuk menampilkan jendela Modal Dialog tadi akan dieksekusi.
Supaya fitur ini efektif dijalankan di Aplikasi Web kita, maka disarankan supaya kita tidak mengaktifkan opsi Use button dropdown for links dari lokasi berikut: PHP -> Page Options (Global) project PHPMaker 2020.
O iya, sebelumnya saya sudah share mengenai fleksibilitas PHPMaker ini, melalui Forum Diskusi PHPMaker, dengan topik berjudul How to Display ViewPage in Modal Dialog on Row Click (v2019).