Begini Mudahnya Membuat Field Lookup dengan Modal Dialog Menjadi ReadOnly

Sejak versi 2017 atau 13, PHPMaker memiliki fitur baru berupa Modal Dialog pada field yang Lookup ke Table tertentu. Tujuannya, agar Pengguna dapat mencari atau mem-browse record dengan lebih mudah dan cepat, apalagi jika jumlahnya relatif sangat banyak. Jadi, record yang banyak tadi tidak lagi ditampilkan di control Combobox.

Adanya fitur baru ini tentu saja mengubah cara PHPMaker menampilkan data pada field tersebut menjadi sedikit lebih kompleks. Artinya, PHPMaker menambahkan kode lebih banyak, hanya untuk me-render control tadi dengan menyertakan tombol browse yang memiliki icon kaca pembesar.

Tombol browse ini berada di samping field tersebut pada Aplikasi Web yang dihasilkan oleh PHPMaker. Jika Pengguna Akhir Aplikasi Web mengklik tombol tersebut, maka sistem akan menampilkan form dalam jendela Modal Dialog, untuk mencari data, lalu memilih data yang diinginkan.

Tidak hanya itu saja. PHPMaker juga menambahkan kemampuan supaya Pengguna Akhir Aplikasi Web dapat menampilkan jendela Modal Dialog, dengan cara mengklik data pada field tadi. Jadi, selain mengklik tombol browse di atas, mereka juga dapat mengklik tulisan pada field tersebut untuk membuka jendela Modal Dialog.

Semua perubahan di atas tentu saja berpengaruh kepada cara kita sebagai Web Developer dalam memodifikasi kode jika ingin membuat field tersebut menjadi Read Only. Dengan kata lain, kita tidak dapat lagi menggunakan property ReadOnly milik field tersebut, untuk men-disable control tersebut pada Form.

Pertanyaan selanjutnya, lalu bagaimana cara kita men-disable field yang Lookup ke Table tertentu dan menggunakan Modal Dialog untuk memilih/mencari data?

Bukan PHPMaker namanya, jika kita sebagai Web Developer tidak dapat mengatasi permasalahan tersebut. Solusinya sangatlah sederhana. Cukup menambahkan sedikit kode jQuery saja ke bagian Startup Script.

Katakanlah dalam hal ini kita fokus ke halaman/form Edit, karena biasanya kita ingin men-disable field tersebut saat Pengguna Akhir mengubah data di halaman Edit.

Supaya kita lebih mudah memahami dan langsung mencobanya, misalkan kita menggunakan field Trademark dari table cars di project demo. Untuk itu, pastikan kita sudah mengaktifkan pengaturan Use modal dialog for lookup dari bagian Fields project demo tersebut.

Setelah itu, tambahkan kode berikut ke bagian Startup Script yang terdapat di bawah lokasi Client Scripts -> Table-Specific -> Edit Page:

$(document).ready(function() {
	$("div #r_Trademark .ewLookupBtn").hide(); // sembunyikan tombol browse yang ada icon kaca pembesar
	$("#aol_x_Trademark").hide(); // sembunyikan tombol untuk menambah data Trademark on-the-fly
	$("div #lu_x_Trademark").removeAttr("onclick"); // hilangkan kemampuan click
	$("div #lu_x_Trademark").click(function() { // bila perlu tampilkan pesan bahwa field ini tidak bisa diubah
		ew_Alert("Tidak bisa diubah ya!");
	});
});

Terakhir, generate ulang semua file script seperti biasa menggunakan PHPMaker. Kemudian, jalankan Aplikasi Web dari browser, dan perhatikan sekarang bahwa tombol browse bergambar icon kaca pembesar tadi sudah tidak ditampilkan lagi.

Jika Pengguna mengklik data pada field, maka sistem akan merespon dengan menampilkan pesan bahwa data tidak bisa diubah. Jadi, fungsi Modal Dialog sudah dinonaktifkan, alias tidak dapat digunakan lagi. Seperti yang kita inginkan.

Selain itu, tombol untuk menambah data Trademark juga ikut disembunyikan. Hal ini sekaligus membuktikan bahwa untuk men-disable fungsi penambahan data Trademark on-the-fly, kita cukup menyembunyikan elemennya saja menggunakan kode jQuery.

Tentu saja, kita bisa menambahkan kondisi sesuai kebutuhan kita untuk men-disable field tersebut. Contoh, kita ingin hanya untuk Level Pengguna 1 saja field tersebut di-disable. Kita bahkan bisa menambahkan pemeriksaan kondisi tersebut menggunakan kode PHP di bagian kode jQuery tadi, sehingga kode di atas menjadi seperti ini:

<?php if (CurrentUserLevel() == "1") { ?>
$(document).ready(function() {
	$("div #r_Trademark .ewLookupBtn").hide(); // sembunyikan tombol browse yang ada icon kaca pembesar
	$("#aol_x_Trademark").hide(); // sembunyikan tombol untuk menambah data Trademark on-the-fly
	$("div #lu_x_Trademark").removeAttr("onclick"); // hilangkan kemampuan click
	$("div #lu_x_Trademark").click(function() { // bila perlu tampilkan pesan bahwa field ini tidak bisa diubah
		ew_Alert("Tidak bisa diubah ya!");
	});
});
<?php } ?>

Satu lagi fakta dari sekian banyaknya fitur yang membuktikan bahwa PHPMaker semakin powerful, tapi juga masih tetap fleksibel dari dulu sampai sekarang.

Betapa PHPMaker semakin membantu meringankan pekerjaan Web Developer. Buat yang belum menggunakan PHPMaker, masihkah Anda bertahan menggunakan cara-cara kuno atau konvensional dalam membangun Aplikasi Web? 🙂