Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / PHPMaker / Menampilkan Modal Dialog Saat Baris Tabel Diklik atau Dobel Klik di PHPMaker 2020
Mudahnya Menangani Data Secara Hirarki Menggunakan PHPMaker 2020
Mudahnya Mengubah Kode di Class ExportCSV dari PHPMaker 2020

Menampilkan Modal Dialog Saat Baris Tabel Diklik atau Dobel Klik di PHPMaker 2020

Sab, 4 April 2020 oleh Masino Sinaga 11 Komentar

Entah sudah berapa banyak keuntungan yang kita peroleh ketika menggunakan PHPMaker untuk membangun Aplikasi Web. Selain fitur-fiturnya yang sangat lengkap, demikian juga fleksibilitas yang sangat tinggi.

Kita bisa menambahkan sedikit kode saja, untuk menampilkan fitur yang sebelumnya tidak pernah kita sangka bisa dilakukan dari PHPMaker.

Di artikel ini kita akan membahas bagaimana mudahnya menampilkan jendela Modal Dialog, ketika Pengguna Akhir mengklik atau melakukan dobel klik pada baris tabel yang terdapat di halaman List.

Sebelumnya, pastikan kita sudah mengaktifkan opsi Modal dialog masing-masing pada kelompok Edit Page maupun View Page yang terdapat di bawah Table setup dari project PHPMaker.

Setelah mengaktifkan kedua pengaturan itu, selanjutnya kita cukup menambahkan kode berikut dari bagian Startup Script yang terdapat di bawah lokasi: Client Scripts -> Table-Specific -> List Page pada project PHPMaker 2020:

<?php if (Security()->canEdit()) { // jangan lupa untuk security, jika akses bisa mengubah record ?>
	$(".table.ew-table tr").dblclick(function(e) { // event dobel klik untuk Edit Page
		// periksa saat kondisi apa saja event dobel klik tidak dieksekusi
		if (!$(e.target).hasClass('ew-preview-row-btn') && !$(e.target).hasClass('custom-control-label') && !$(e.target).hasClass('btn')) {
			var edit_modal = $(this).find("a.ew-row-link.ew-edit").attr("onclick"); // ambil sintax javascript modal dialog
			var edit_url = edit_modal.substring(edit_modal.lastIndexOf(":'") + 2, edit_modal.lastIndexOf("'")); // ambil url dari setiap baris tabel
			ew.modalDialogShow({lnk:this, url: edit_url, caption: '<?php echo Language()->phrase("Edit"); ?>', btn: 'SaveBtn'}); // tampilkan Edit Page dalam Modal Dialog
		}
	});

	$(document).on("preview", function(e, args) { // preview row 
		args.$tabpane.find("tr").dblclick(function (e) { // dobel klik
			// periksa saat kondisi apa saja event klik tidak dieksekusi
			if (!$(e.target).hasClass('btn') && !$(e.target).hasClass('ew-preview-row-btn') && !$(e.target).hasClass('custom-control-label')) {
				var edit_modal = $(this).find("a.ew-row-link.ew-edit").attr("onclick"); // ambil sintaks javascript modal dialog
				var edit_url = edit_modal.substring(edit_modal.lastIndexOf(":'") + 2, edit_modal.lastIndexOf("'")); // ambil url dari setiap baris tabel
				ew.modalDialogShow({lnk:this, url: edit_url, caption: '<?php echo Language()->phrase("Edit"); ?>', btn: 'SaveBtn'}); // tampilkan Edit Page dalam Modal Dialog
			}
		});
	});
<?php } ?>

<?php if (Security()->canView()) { // jangan lupa untuk security, jika akses bisa menampilkan satu record ?>
	$(".table.ew-table tr").click(function(e) { // event klik untuk View Page
		// periksa saat kondisi apa saja event klik tidak dieksekusi
		if (!$(e.target).hasClass('ew-preview-row-btn') && !$(e.target).hasClass('custom-control-label') && !$(e.target).hasClass('btn')) {
			var view_modal = $(this).find("a.ew-row-link.ew-view").attr("onclick"); // ambil sintaks javascript modal dialog 
			var view_url = view_modal.substring(view_modal.lastIndexOf(":'") + 2, view_modal.lastIndexOf("'")); // ambil url dari setiap baris tabel
			ew.modalDialogShow({lnk:this, url: view_url, caption: '<?php echo Language()->phrase("View"); ?>', btn: null}); // tampilkan View Page dalam Modal Dialog
		}
	});

	$(document).on("preview", function(e, args) { // preview row 
		args.$tabpane.find("tr").click(function (e) { // singel klik
			// periksa saat kondisi apa saja event klik tidak dieksekusi
			if (!$(e.target).hasClass('btn') && !$(e.target).hasClass('ew-preview-row-btn') && !$(e.target).hasClass('custom-control-label')) {
				var view_modal = $(this).find("a.ew-row-link.ew-view").attr("onclick"); // ambil sintaks javascript modal dialog
				var view_url = view_modal.substring(view_modal.lastIndexOf(":'") + 2, view_modal.lastIndexOf("'")); // ambil url dari setiap baris tabel
				ew.modalDialogShow({lnk:this, url: view_url, caption: '<?php echo Language()->phrase("View"); ?>', btn: null}); // tampilkan View Page dalam Modal Dialog
			}
		});
	});
<?php } ?>

Sekarang, mari kita bahas kode di atas.

Secara garis besar, kode di atas terbagi dua. Pertama untuk menangani event dblclick atau dobel klik, dan yang Kedua untuk menangani event click atau single klik.

Kita harus menangani beberapa kemungkinan berikut supaya kode untuk menampilkan jendela Modal Dialog tersebut tidak dieksekusi:

1. Jika control Checkbox ditampilkan di kolom pertama pada tabel di halaman List. Control ini akan ditampilkan jika pilihan Selected records untuk Export dipilih dari lokasi PHP -> Page Options (Global) -> Export -> Export type pada project PHPMaker 2020.

Selain itu, control Checkbox akan ditampilkan, jika kita menulis kode di server event Row_CustomAction dan Page_Load dengan kondisi multiple records.

Selengkapnya baca artikel saya berjudul Cara Menampilkan Checkbox di Setiap Record pada Halaman List dari PHPMaker,

2. Jika fitur Master/Detail diaktifkan, sehingga sistem akan menampilkan icon plus kecil di sebelah kiri dari setiap baris (+) untuk meng-expand, termasuk tombol minus kecil (-) untuk meng-collpase area tabel Detail,

3. Jika pilihan Use button dropdown for links diaktikfan dari lokasi PHP -> Page Options (Global) project PHPMaker 2020, sehingga di setiap baris tabel memiliki tombol Dropdown yang menampilkan menu-menu seperti View, Edit, Copy, Master/Detail, dan sebagainya.

Artinya, selain dari ketiga kondisi tadi, maka kita boleh mengeksekusi kode yang untuk menampilkan jendela Modal Dialog tersebut.

Jika beberapa kondisi tadi tidak ditangani, maka ketika Pengguna Akhir memberi tanda centang pada Checkbox, atau mengklik icon plus kecil atau minus kecil, atau mengklik tombol Dropdown, maka kode untuk menampilkan jendela Modal Dialog tadi akan dieksekusi.

Supaya fitur ini efektif dijalankan di Aplikasi Web kita, maka disarankan supaya kita tidak mengaktifkan opsi Use button dropdown for links dari lokasi berikut: PHP -> Page Options (Global) project PHPMaker 2020.

O iya, sebelumnya saya sudah share mengenai fleksibilitas PHPMaker ini, melalui Forum Diskusi PHPMaker, dengan topik berjudul How to Display ViewPage in Modal Dialog on Row Click (v2019).

Ditempatkan di bawah: PHPMaker Ditag dengan:Belajar PHPMaker, Client Scripts, Edit Page, Modal Dialog, PHPMaker 2020, PHPMaker Indonesia, Startup Script, Tutorial PHPMaker, View Page

Masino Sinaga

Web Developer pengguna PHPMaker untuk membangun Aplikasi Web sejak tahun 2004. Sampai sekarang masih aktif dan rajin membagikan pengalamannya menggunakan PHPMaker melalui situs masinosinaga.com, ilovephpmaker.com, dan phpmakerprojects.com.

Mudahnya Menangani Data Secara Hirarki Menggunakan PHPMaker 2020
Mudahnya Mengubah Kode di Class ExportCSV dari PHPMaker 2020

Komentar

  1. Sagaf mengatakan

    Ming, 5 April 2020 pada 5:51 am

    Pak bisa minta email / nomer wa
    Saya mau tanya masalah membership di ilovephpmaker

    Balas
    • Masino Sinaga mengatakan

      Ming, 5 April 2020 pada 9:22 am

      Barusan sudah saya kirim ke Email Anda.

      Balas
  2. Slavan mengatakan

    Rab, 21 Oktober 2020 pada 3:31 pm

    Bgmn cara menampilkan suatu dialog box yang akses tabel lain saat akses suatu menu (dari suatu tabel) yang dibuat dari javascript di Client SCRIPT -> Table Specific -> List Page -> Startup Script sebelum List Page. Dialog box itu bisa di-close. Sya cba mengakali dg konsep menaruh coding look up table di script tapi belum ketemu codingnya, apakah bisa dengan mengakali ini atau enaknya gmn ? Terima kasih

    Balas
    • Masino Sinaga mengatakan

      Kam, 22 Oktober 2020 pada 7:55 am

      Contoh kodenya sudah pernah saya buatkan di project khusus: Download Stock Inventory Management Project.

      Info lebih lanjut mengenai project tersebut ada di artikel ini: Inventory Stock Management Project, Why Should You Have It?, penjelasannya ada di poin 22 artikel tersebut:

      “How to display the Payment form by using Bootstrap 4 Modal Dialog via click event on button in each row.”

      Jadi, contoh kasusnya di situ menampilkan jendela Modal dialog yang berisi form Add untuk menambahkan data Payment (ke table payments) dari menu/table yang berbeda, yaitu masing-masing: Purchases dan Sales.

      Demo: Demo Stock Inventory Management.

      Balas
    • Slavan mengatakan

      Jum, 23 Oktober 2020 pada 8:34 am

      Hampir mendekati Pak. Semoga kalau pertanyaannya seperti ini bisa lebih jelas : Bagaimana cara membuat dengan client event di PHPMaker, mau menampilkan suatu tabel dalam dialog box ketika suatu sub-menu di-klik (di event Startup Script) ? atau kalau dari server event jg gpp. Terima kasih.

      Balas
      • Masino Sinaga mengatakan

        Jum, 23 Oktober 2020 pada 8:50 am

        Apakah yang dimaksud menampilkan List Page di dalam Modal dialog melalui event click pada item sub-menu?

        Balas
        • Slavan mengatakan

          Jum, 23 Oktober 2020 pada 9:32 am

          Iya, seperti itu tetapi List Page yang ditampilkan adalah tabel lain.

          Balas
          • Masino Sinaga mengatakan

            Jum, 23 Oktober 2020 pada 9:37 am

            Sayangnya, List Page belum mendukung untuk ditampilkan menggunakan Modal Dialog.

            Saat ini PHPMaker baru bisa menampilkan List Page melalui fitur Lookup Table yang di-trigger dari control Select atau Combobox, dengan cara mengaktifkan pilihan Use modal dialog for lookup dari Fields setup -> panel Edit Tag.

            Balas
          • Slavan mengatakan

            Jum, 23 Oktober 2020 pada 10:28 am

            Klu pake AJAX untuk tammpilin tabel dari Client Event, startup script apakah memungkinkan ?

            Balas
            • Masino Sinaga mengatakan

              Jum, 23 Oktober 2020 pada 1:08 pm

              Kalau fitur bawaan PHPMaker nya belum ada.

              Balas
  3. Slavan mengatakan

    Jum, 23 Oktober 2020 pada 1:04 pm

    Maaf OOT. Pada lookup table, ada 4 yg bisa muncul sebagai display field. Gmn caranya mengambil display itu dan diisikan ke field lain, sdh saya coba document.getElementById(‘x_kode’).value; yang keambil justru nilai id dan bukan nilai yg display. Terima kasih.

    Balas

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

Pos-pos Terbaru

  • ReadOnly vs Disabled, Sebaiknya Pilih yang Mana?
  • Mudahnya Menghilangkan Search Operator pada Extended dan Advanced Search di PHPMaker 2024
  • Masino Extensions untuk PHPMaker 2024 Sudah Dirilis, Silahkan Download!
  • Fitur-Fitur Masino Extensions untuk PHPMaker 2024
  • Review PHPMaker 2024

Menu

  • Siapa Saya?
  • Web Development
  • PHPMaker
  • Umum
  • Syarat dan Ketentuan
  • Sitemap (Peta Situs)
  • Komentar

Komentar Terbaru

  • Masino Sinaga pada Auto Fill yang Fleksibel di Aplikasi Web yang Dihasilkan oleh PHPMaker 2021
  • achmad pada Auto Fill yang Fleksibel di Aplikasi Web yang Dihasilkan oleh PHPMaker 2021
  • Masino Sinaga pada Menyisipkan Kode Saat Baris Record Ditampilkan di Aplikasi Web dari PHPMaker
  • Shandy pada Menyisipkan Kode Saat Baris Record Ditampilkan di Aplikasi Web dari PHPMaker
  • Masino Sinaga pada Menyisipkan Kode Saat Baris Record Ditampilkan di Aplikasi Web dari PHPMaker

Situs Terkait

  1. I Love PHPMaker
  2. Situs Resmi PHPMaker
  3. Forum Diskusi PHPMaker
  4. PHPMaker di IlmuKomputer.com
  5. PHPMaker Projects
  6. PHPMaker Learning

Baru di PHPMaker?

Baca ini terlebih dulu ...

  1. Ayo Menjadi Web Developer yang Cerdas!
  2. PHPMaker: PHP Code Generator + PHP Framework
  3. Pertanyaan-Pertanyaan yang Paling Sering Diajukan Seputar PHPMaker
  4. Tips buat Anda Pemula yang Baru Mengenal dan Menggunakan PHPMaker
  5. Bacalah Help, Bacalah Help, dan Bacalah Help di PHPMaker!

(c) Masino Sinaga 2009 - 2023 | WordPress | Catat masuk | Kembali ke atas