Menampilkan atau Menyembunyikan Field Berdasarkan Data di Field Lain pada PHPMaker 2023

Ada begitu banyak kondisi yang terjadi di sisi Client bisa ditangani dengan sangat mudah di PHPMaker 2023. Contoh paling sederhana, kita bisa menampilkan suatu field jika data di field lain sudah ada datanya, alias tidak blank.

Katakanlah di suatu table kita memiliki dua buah field, masing-masing bernama FieldA dan FieldB. Kondisi mula-mula, saat form Add ditampilkan, maka FieldB dalam keadaan ter-hidden alias tidak ditampilkan. FieldB baru akan muncul jika Pengguna Akhir aplikasi sudah mengisi data di FieldA.

Pada prinsipnya, kita bisa menulis kode di Startup Script di bawah bagian Client Scripts dari project PHPMaker. Selain itu, kita juga bisa menambahkan kode Javascript atau jQuery dari bagian Client side events di bawah Fields setup project PHPMaker 2023.

Langkah pertama, tambahkan kode ini di bagian Startup Script di bawah Client Scripts -> Table-Specific -> Add/Copy Page:

$("#r_FieldB").hide();

Kode itu khusus menangani FieldB yang kondisi mula-mula masih disembunyikan pada form/halaman Add.

Langkah kedua, masukkan kode ini dari bagian Fields setup -> FieldA -> panel Edit Tag -> Client side events:

{ // keys = event types, values = handler functions
	"change keyup": function(e) {
		// Your code
		var $row = $(this).fields();
		field_a = $row["FieldA"].value();
		if (field_a == "") {
			$row["FieldB"].visible(false);
		} else {
			$row["FieldB"].visible(true);
		}
	}
}

Kode di atas ini artinya, ketika Pengguna Akhir sedang mengetik data di FieldA, maka FieldB akan otomatis ditampilkan. Sebaliknya, ketika Pengguna Akhir menghapus atau mengosongkan seluruh data yang terdapat di FieldA, maka FieldB menjadi otomatis disembunyikan.

Langkah ketiga, generate ulang semua file script seperti biasa dari PHPMaker 2023.

Setelah semua kode berhasil di-generate, cobalah klik tombol Add di halaman List dari table yang bertalian, lalu Anda akan melihat kondisi mula-mula, hanya FieldA yang ditampilkan.

Sekarang ketikkan data di FieldA, maka FieldB akan otomatis ditampilkan. Cobalah hapus atau kosongkan lagi data di FieldA, maka FieldB akan disembunyikan.

Kesimpulannya, sekarang kita bisa menulis kode di sisi Client dengan sangat mudah dan cepat dari kedua bagian di atas. Bagian pertama dari Startup Script di bawah Client Scripts, sedangkan bagian kedua dari Client side events di bawah Fields setup.

Mengapa kita harus menulis di bagian Startup Script pada halaman Add/Copy? Karena kode ini akan dieksekusi saat form Add dimuat pertama sekali.

Sebenarnya kita bisa menggunakan hanya bagian Startup Script ini untuk menangani saat Pengguna Akhir sedang mengetik data di FieldA. Hanya saja, jika kita menggunakan cara seperti itu, maka kita harus menulis kode lagi di bagian Startup Script pada halaman Edit.

Nah, penggunaan Client Side Events bisa lebih menyederhanakan penulisan kode di dua tempat tadi menjadi cukup di satu tempat saja. Kode yang kita tulis di bagian ini akan otomatis digunakan juga di dua tempat, yaitu form/halaman Add dan form/halaman Edit.

Tidak itu saja, bahkan di halaman Copy dan Search pun kode tersebut masih berlaku. Jadi, jika kita menulis kode di bagian Client Side Events, maka kode tersebut akan berlaku di empat halaman sekaligus, yaitu: Add, Copy, Edit, dan Search!

Sedangkan kode di Startup Script, hanya untuk menangani saat form pertama kali dimuat, sesuai dengan jenis halaman yang diiginkan saja.

Gimana? Keren, ‘kan PHPMaker 2023?