Supaya Modal Dialog Edit Tetap Terbuka Setelah Proses Edit Record di PHPMaker

Seperti yang kita ketahui, fitur Modal dialog pada pengaturan level Table mulai ada sejak PHPMaker versi 2017. Halaman Add, Edit, dan View sekarang sudah bisa ditampilkan secara popup dalam kotak dialog Modal Bootstrap. Sebelumnya pada versi 12, baru halaman Advanced Search saja yang bisa ditampilkan menggunakan Modal Bootstrap.

Khusus untuk halaman Add dan Edit, kotak dialog Modal Bootstrap tersebut ternyata masih memiliki keterbatasan. Seperti apa itu? Begini. Jika misalnya kita ingin setelah Pengguna Akhir Aplikasi Web berhasil mengubah data dan ingin kembali lagi ke form Edit tadi, maka sistem akan menampilkan halaman Edit secara normal, dan tidak ditampilkan dalam kotak dialog Modal Edit.

Tentu saja kondisi ini tidak kita harapkan. Karena di samping tidak konsisten, Aplikasi Web kelihatan menjadi kurang begitu profesional. Sudah jelas di awal kita memutuskan untuk menggunakan kotak dialog Modal untuk form Edit tadi, lalu mengapa ketika sistem mengarahkan kembali ke form Edit tadi tapi sistem tidak menampilkannya dalam kotak dialog Modal?

Kondisi ketidakkonsistenan ini sebenarnya hampir mirip dengan kotak dialog Modal Bootstrap yang tidak bisa ditampilkan dari area Preview Row, seperti yang sudah saya tulis pada artikel yang berjudul Supaya Modal Dialog Bisa Dibuka dari Bagian Preview Row di PHPMaker.

Bedanya, kalau di artikel tadi solusinya bisa diatasi melalui extension MasinoPreviewRow13, maka solusi yang sedang kita bahas di artikel ini bisa diatasi melalui fitur Server Events dan Client Scripts. Artinya, bukan PHPMaker namanya jika kita tidak bisa mencari solusi di balik keterbatasan yang masih terjadi di PHPMaker.

Katakanlah di table kantor pada project PHPMaker, nama field yang berperan sebagai Primary Key adalah Kode_Kantor, kita ingin saat Pengguna mengklik link Edit di halaman List, maka sistem menampilkan dalam kotak dialog Modal Bootstrap, dan setelah Pengguna menyimpan data pada form Edit tadi, maka sistem tetap menampilkan form Edit tersebut, masih dalam kotak dialog Modal Bootstrap.

Bagaimana solusinya? Silahkan ikuti petunjuk berikut dengan teliti.

Pertama, pastikan kita sudah mengaktifkan pilihan Modal dialog dari Table setup -> Edit Page.

Kedua, salin kode berikut ke dalam server event Row_Updated yang terdapat di bawah lokasi Server Events -> Table-Specific -> Common, sehingga kode selengkapnya seperti ini:

// Row Updated event
function Row_Updated($rsold, &$rsnew) {
	//echo "Row Updated";
	$_SESSION["Redirect_Edit"] = "Yes";
	$_SESSION["Field_Kode"] = $rsold["Kode_Kantor"];
}

Artinya, kita ingin ada penanda yang memastikan setelah proses Edit data, maka kita akan menampilkan kembali kotak dialog Modal Bootstrap tadi, yaitu melalui variabel session yang bernama Redirect_Edit. Kita juga harus menyimpan data kunci dari field yang telah diubah tadi ke dalam variabel session yang bernama Field_Kode.

Ketiga, salin kode berikut ke dalam Startup Script yang terdapat di bawah lokasi Client Scripts -> Table-Specific -> List Page:

$(document).ready(function() {
	<?php if (isset($_SESSION["Redirect_Edit"]) && $_SESSION["Redirect_Edit"] == "Yes") { ?>
	<?php $_SESSION["Redirect_Edit"] = ""; ?>
	ew_ModalDialogShow({lnk:this, url:'kantoredit.php?Kode_Kantor=<?php echo $_SESSION["Field_Kode"] ?>', caption:'Edit'});
	<?php } ?>
});

Perhatikan kode yang terakhir ini. Kita dapat menyisipkan kode PHP di dalam kode jQuery pada bagian Client Scripts. Tujuannya, kita memeriksa apakah nilai variabel session Redirect_Edit tadi adalah Yes, dan jika ya, maka jangan lupa untuk mengosongkan nilai variabel session tadi terlebih dulu.

Mengapa harus dikosongkan? Tujuannya supaya kita tidak terjebak dengan logic yang terus-menerus menampilkan kotak dialog Modal Bootstrap tadi saat halaman List tadi diakses oleh Pengguna. Itulah makanya kita perlu memastikan bahwa penanda tadi sudah ditugaskan dari server event Row_Updated.

Setelah itu, panggil fungsi Javascript bawaan PHPMaker yang bernama ew_ModalDialogShow(), di mana parameter di dalamnya kita mengacu kepada URL dari Edit Page table kantor tadi. Pastikan juga kita sudah menyertakan parameter Kode_Kantor pada URL tersebut, yang nilainya kita ambil dari variabel session yang bernama Field_Kode.

Keempat, untuk mencegah sistem menampilkan halaman Edit yang normal (tanpa menggunakan kotak dialog Modal Bootstrap), maka pastikan kita mengosongkan pilihan pada Table setup -> Return Pages -> After edit.

Kelima atau yang terakhir, pastikan kita sudah men-generate ulang semua file script menggunakan PHPMaker, seperti biasa.

Setelah proses generate selesai, jalankan Aplikasi Web melalui browser favorit Anda. Klik link Edit pada salah satu record yang Anda inginkan di table kantor tadi, maka sistem akan menampilkan kotak dialog Modal Bootstrap. Sekarang ubahlah data di form tadi, lalu klik tombol Edit, maka sistem akan menampilkan kembali form Edit tadi masih dalam kotak dialog Modal Bootstrap.

Harus diakui memang, bahwa masih ada keterbatasan dari teknik ini. Apa itu? Pesan Update succeeded setelah proses Edit tadi, ditampilkan duluan atau berada di bawah kotak dialog Modal Bootstrap yang ditampilkan kemudian.

Meskipun demikian, trik yang kita gunakan ini paling tidak sudah mengatasi permasalahan utama dari halaman Edit normal yang ditampilkan jika menggunakan fitur redirect bawaan PHPMaker setelah proses Edit data dilakukan melalui kotak dialog Modal Bootstrap.

Betapa mudah, cepat, dan menyenangkan sekali menggunakan PHPMaker, bukan? 😉