Mudahnya Menyembunyikan Tab di PreviewRow Jika Tidak Ada Data di Table Detail

Belum pernah ada Aplikasi Web yang saya lihat saat menampilkan data yang memiliki relasi Master/Detail secanggih, sebagus, dan sefleksibel Aplikasi Web yang dihasilkan oleh PHPMaker. Apalagi jika relasinya Master/Multiple-Detail, yang artinya satu tabel Master yang dihubungkan dengan beberapa tabel Detail sekaligus.

Mengapa saya katakan demikian? Karena PHPMaker memiliki kemampuan menghasilkan fitur PreviewRow untuk menampilkan data table Detail di bawah baris record Master di halaman List milik tabel Master menggunakan teknik AJAX. Artinya, Pengguna Akhir Aplikasi Web dapat menampilkan dan menyembunyikan tabel Detail cukup dengan mengklik tombol plus (+) atau tombol Preview Row.

Jadi, tabel Detail dapat ditampilkan dan disembunyikan tanpa harus memuat ulang semua konten di halaman List milik tabel Master-nya. Bahkan, Pengguna Akhir semakin dimanjakan lagi dengan adanya kemampuan untuk menampilkan tabel Detail tersebut menggunakan fitur Preview Overlay, yaitu dengan menggeser kursor mouse ke tombol tertentu. Benar-benar canggih dan bagus.

Lalu di mana letak kefleksibelannya? Di artikel ini kita akan membuktikannya. Katakanlah di project demo, kita menggunakan contoh tabel orders sebagai Master, sedangkan untuk tabel Detailnya, kita menggunakan dua tabel sekaligus, yaitu orderdetails (di tab pertama) dan order details extended (di tab kedua).

Selanjutnya kita ingin ketika Pengguna menampilkan tabel Detail melalui fitur PreviewRow, jika tidak ada record ditemukan di tabel Detail yang bernama order details extended, maka kita menyembunyikan tab kedua yang memuat tabel tersebut.

Solusinya cukup dengan menaruh sedikit kode jQuery ke dalam bagian Startup Script yang berada di bawah lokasi Client Scripts -> Table-Specific -> List Page milik tabel orders, sehingga kode selengkapnya menjadi seperti ini:

$(document).on("preview", function(e, args) {
	// Ambil panel tab dari variabel args
	var $tabpane = args.$tabpane;
	// Ambil data link berdasarkan class ewAddEditOption 
	var sLink = $tabpane.find("div:has(.ewAddEditOption)").find("a").attr("href");
	// Ambil data atribut data-target sebagai key unique tab di row tertentu
	var sDataTarget = $(".ewTablePreviewRow td ul li a").attr("data-target");
	// Proses hanya yang memiliki data link
	if (sLink) {
		// Ambil nilai kunci untuk setiap row setelah karakter = yang terakhir
		var myKey = sLink.substr(sLink.lastIndexOf("=") + 1);
		// Ambil jumlah record untuk "order details extended" menggunakan AJAX
		var vRecCount = ew_Ajax("<?php echo ew_Encrypt("SELECT COUNT(*) FROM `order details extended` WHERE OrderID = '{query_value}'"); ?>", myKey);
		// Proses hanya jika jumlah record kurang dari satu alias tidak ada record ditemukan
		if (vRecCount < 1) {
			// Deklarasikan variabel yang terkait atribut untuk menandai tab di setiap row
			var hideThis = {
				'data-table': ['order_details_extended'],
				'data-target': ['' + sDataTarget + '']
			};
			// Mulai proses sembunyikan tab dengan memfilter berdasarkan variabel atribut yang sudah ditentukan sebelumnya
			$('tr > td > ul > li >').filter(function(){
				for (var i in hideThis) {
					var attr = $(this).attr(i),
						match = ('|' + hideThis[i].join('|') + '|').indexOf(attr) > -1;
					if (!match) {
						return false;
					}
				}
				return true;
			}).hide();
		}
	}
});

Sebagai informasi, kode di atas saya hasilkan beberapa menit yang lalu, untuk menjawab pertanyaan di Forum Diskusi PHPMaker: Master Details Hide Second Tab on Condition.

Salah satu pelajaran penting yang bisa kita peroleh dari kode di atas adalah, ternyata PHPMaker sudah menyediakan fungsi Javascript ew_Ajax() yang dapat mengembalikan data tertentu dari Database.

Fungsi ew_Ajax() ini bahkan sudah menyediakan fungsi callback yang bisa dioptimalkan oleh Web Developer untuk menjalankan perintah tertentu.

Dalam contoh di atas, kita tidak menggunakan callback tersebut, karena kita hanya mengambil jumlah record dari Database View yang bernama order details extended berdasarkan field OrderID sebagai kunci yang membedakan antara satu row dengan row yang lain.

Betapa fleksibelnya PHPMaker bagi Web Developer.