Mudahnya Membatasi Jumlah Record di Halaman Detail Preview dari PHPMaker

Jika Anda menggunakan extension Preview atau MasinoPreviewRow13 di project PHPMaker, maka Pengguna Akhir Aplikasi Web dapat melihat record Detail dengan cara mengklik tanda plus (+) di samping record Master-nya. Selanjutnya record Detail akan ditampilkan di bagian bawah record Master tadi menggunakan AJAX, tanpa memuat ulang halaman tersebut. Fitur ini di PHPMaker disebut dengan Detail Preview Row.

Selain dengan cara tadi, record Detail juga dapat ditampilkan dengan cara menggeser kursor mouse ke atas tombol Detail. Selanjutnya sistem akan menampilkan record Detail di jendela kecil yang muncul secara PopUp, juga masih menggunakan AJAX. Fitur yang kedua ini disebut dengan Detail Preview Overlay.

Kedua fitur Detail Preview Row dan Detail Preview Overlay tadi cocok digunakan jika jumlah record Detail tidak terlalu banyak. Misalkan hanya sekitar 5 atau 10 record. Jika jumlah record Detail sudah relatif banyak, katakanlah di atas 20, 50, 100, atau lebih dari itu, maka area tempat menampilkan record Detail tadi menjadi sangat panjang ke bawah. Hal ini terjadi, karena di area Detail Preview tadi tidak menggunakan Paging untuk membagi record ke dalam beberapa halaman.

Sering kali Web Developer dituntut untuk dapat membatasi maksimal jumlah record Detail yang akan ditampilkan di Detail Preview Row dan Detail Preview Overlay tersebut. Pertanyaannya adalah, bagaimana caranya? Sementara yang kita ketahui, tidak ada Property di PHPMaker yang disediakan untuk menentukan jumlah maksimal record yang bisa ditampilkan di kedua area tadi.

Hehe, bukan PHPMaker namanya jika kita tidak dapat mengatasi hal tersebut. Lagi-lagi dalam hal ini kita dapat menggunakan fitur Server Events. Katakanlah kita ingin membatasi hanya 5 record saja yang ditampilkan di area Detail Preview tadi. Cukup dengan menambahkan sedikit kode PHP saja ke dalam server event Row_Rendered, sehingga kode selengkapnya menjadi seperti ini:

// Row Rendered event
function Row_Rendered() {
	// To view properties of field class, use:
	//var_dump($this-><FieldName>); 
	if (CurrentPageID() == "preview" && $this->RowCnt > 5) {
		$this->RowAttrs["style"] = "display: none";
	}
}

Kita menggunakan server event Row_Rendered, karena dieksekusi oleh sistem ketika table sedang dirender ke browser. Dari kode di atas, kita harus memastikan bahwa kode tersebut hanya untuk halaman Detail Preview saja, dengan menggunakan fungsi global CurrentPageID(). Nilai yang dikembalikan fungsi ini harus sama dengan preview.

Untuk membatasi jumlah record, maka kita mengoptimalkan Property RowCnt milik object Page atau Table. Jika jumlahnya lebih besar dari 5, maka cukup set Property RowAttrs milik object Page atau Table yang bernama style. Caranya, dengan menugaskan kode CSS untuk menghilangkan tampilan di baris record tersebut yaitu display: none;.

Tentu saja kode di atas belum dapat mengubah informasi jumlah record Detail yang sebenarnya. Nah, supaya Pengguna tidak bingung karena jumlah record yang ditampilkan tidak sama dengan informasi jumlah record yang sebenarnya, kita bisa mengakali dengan menambahkan informasi di bagian bawah dari table Detail tadi menggunakan server event Page_DataRendered yang terdapat di bawah lokasi Server Events -> Table-Specific -> Preview Page, sehingga kode selengkapnya menjadi seperti ini:

// Page Data Rendered event
function Page_DataRendered(&$footer) {
	// Example:
	$footer = "Only 5 records are displayed at the moment ...";
}

Dengan cara ini, jika jumlah record Detail yang sebenarnya lebih dari 5, maka Pengguna dapat memaklumi bahwa yang ditampilkan di area tersebut maksimal hanya 5 record saja.

See? Betapa mudah, cepat, dan menyenangkan sekali membangun Aplikasi Web dengan menggunakan PHPMaker, bukan? Tidak perlu menulis kode dari titik nol. Kita hanya cukup menambahkan sedikit kode saja pada server event yang terkait. Selebihnya akan diselesaikan oleh PHPMaker.

Bagi Anda yang belum menggunakan PHPMaker, bisakah metode pengembangan Aplikasi Web yang Anda gunakan saat ini seperti yang terdapat di PHPMaker tersebut? 😉

Artikel ini saya perbarui pada hari Selasa, 23 Juli 2019, setelah menjawab salah satu komentar yang menanyakan paging di area DetailPreviewRow dan DetailPreviewOverlay. Perubahan yang terjadi di PHPMaker versi 2019, sekarang extension Preview (bawaan asli PHPMaker 2019) maupun MasinoPreview15 (salah satu dari Masino Extensions yang bisa Anda download dari ILovePHPMaker.com) sudah mendukung pemakaian Paging.

Ada satu pengaturan baru yang bernama PageSize yang bisa diatur dari menu pengaturan extension bertalian. Lokasinya berada di bawah Advanced -> Table. Dengan adanya pengaturan baru ini, maka kode di atas tidak perlu lagi kita gunakan.

Perubahan ini lagi-lagi membuktikan bahwa PHPMaker selalu diperbarui di setiap versi major-nya dengan menambahkan fitur yang sering dibutuhkan oleh Web Developer. Fitur ini semakin membuat PHPMaker menjadi tools yang begitu powerful sekaligus flexible untuk membangun Aplikasi Web.