Mudahnya Membuat Nilai Total di Preview Row Menjadi Bold dan Rata Kanan dari PHPMaker

Berawal dari usulan yang saya sampaikan kepada author PHPMaker melalui forum diskusinya supaya menambahkan fitur Client Scripts untuk Preview Page, akhirnya saya menjadi tahu sebuah trik baru yang sangat sederhana tapi hasilnya luar biasa. Untuk itulah melalui artikel ini saya membagikannya kepada Anda.

Sampai dengan versi 11, PHPMaker belum menyediakan fitur Client Scripts untuk Preview Page. Baru hanya Server Events saja yang tersedia untuk Preview Page tersebut. Alasan mengapa saya ingin supaya Client Scripts juga tersedia untuk Preview Page, karena ada kebutuhan untuk membuat tulisan pada baris Aggregate (Total, Count, dan Average) pada bagian Preview Page menjadi rata kanan dan huruf tebal (bold). Termasuk juga pada fitur Preview Overlay, yaitu jendela popup yang muncul ketika Pengguna menggeser kursor mouse ke tombol Dropdown Master/Detail di baris Record Master pada halaman List.

Sekedar informasi tambahan juga bagi Anda, bahwa untuk menerapkan Preview Row atau Preview Overlay, maka Anda harus menggunakan extension Preview yang selanjutnya saya kembangkan lagi dengan menambahkan beberapa fitur tambahan menjadi extension MasinoPreviewRow11 (untuk PHPMaker 11). Jika tidak, maka trik pada artikel ini tidak berpengaruh kepada Aplikasi Web yang Anda bangun dengan PHPMaker.

Kembali ke laptop, eh ke inti bahasan. Setelah mencoba-coba bereksperimen (sesuatu yang sangat saya sukai ketika membangun Aplikasi Web dengan PHPMaker), dan setelah author PHPMaker memberikan tanggapan beserta solusinya yang lebih simpel, ternyata untuk membuat tulisan pada baris Aggregate pada bagian Preview Page sangatlah mudah. Kita cukup menambahkan kurang dari 5 baris kode jQuery saja dari bagian Startup Script yang terdapat di bawah lokasi Client Scripts -> Table-Specific -> List Page:

$(document).on("preview", function(e, args) {
    var $tabpane = args.$tabpane; 
    $tabpane.find("td:has(.ewAggregate)").css({"text-align": "right", "font-weight": "bold"}).find(".ewAggregate").hide();
});

Perhatikanlah dari kode jQuery tadi. Kita cukup mengoptimalkan variabel $tabpane. Variabel ini merupakan object jQuery berupa tab yang ditampilkan pada bagian Preview Row. Kita mencari kolom (td) yang memiliki class ewAggregate, lalu menambahkan kode CSS berupa rata kanan dan cetakan tebal, dan setelah itu menyembunyikan class ewAggregate itu sendiri untuk menghilangkan tulisan atau awalan seperti Total:, Count:, dan Average: (tentu masing-masing beserta karakter titik dua).

Kesimpulannya, trik ini sangat berguna jika kita ingin menghilangkan awalan tulisan pada baris Aggregate tadi, untuk lebih menghemat ruang pada kolom yang menampilkan nilai Aggregate, sekaligus membuat tulisan di baris ini menjadi lebih eye-catching.

Luar biasa memang rapinya struktur kode yang telah disediakan oleh PHPMaker pada Aplikasi Web yang dihasilkannya. Bayangkan bahwa hanya dengan beberapa baris itu saja, dan cukup kita tambahkan dari dalam project PHPMaker (bukan mengkostumisasi kode di file script yang sudah dihasilkan), maka kita dapat menerapkan style tertentu pada bagian Preview Row.

PHPMaker memang benar-benar luar biasa keren! 😀