Minggu, 22 Juli 2012

Modal Dialog using iFrame

Kebutuhan tingkat lanjut dalam penggunaan jQuery UI untuk form dialog bisa di penuhi dengan dua cara yaitu.
  • Memakai cara biasa dengan mendefinisikan <div></div> yang ada didalam page tersebut, kemudiann mendefinisikan code jQuery di page tersebut. Tehnik ini memiliki kelemahan jika kita butuh proses yang sama untuk banyak page yang nantinya akan memerlukan code spesifik terhadap page tersebut. bayangkan jika kebutuhan seperti itu ada 10 page?. Anda bisa pelajari dasarnya di sini.
  • Memakai iFrame dalam page 0 (zero) . Tehnik ini memerlukan definisi jS di page zero, dan memodifikasi branching di page form process memakai  : Branch to PL/SQL Procedure.

Detail prosesnya adalah sebagai berikut
  1. Pada page zero buatlah region (Before footer)sbb
  2. <script type="text/javascript">
    function iFrameModal(pHref, pW,pH,pT){
    var vpad=10;
    $( "#iFrameModal:ui-dialog" ).dialog( "destroy" );
    $('<iframe id="iFrameModal"  src="' + pHref + '" />').dialog({
            autoOpen: true,
            title:pT,
            width: pW,
            height: pH,
            modal: true,
            resizable: true
        }).width(pW-vpad).height(pH-vpad); 
    };
    </script>
    
  3. Buatlah page form with report tabel EMP contoh akan memakai page 21 (report) dan 22 (Form)
  4. Pada page 21 (report) lakukan perubahan berikut:
    • Tombol Create ubah menjadi :
    • javascript:iFrameModal('f?p=&APP_ID.:22:&SESSION.::NO:22::',390,435,'Create: EMP');
    • Link Report ubah menjadi :
    • javascript:iFrameModal('f?p=&APP_ID.:22:&APP_SESSION.::::P22_EMPNO:#EMPNO#',600,400,'Edit : EMP');
      
  5. Pada page 22 (Form) lakukan perubahan berikut:
    • Delete atau buat conditional Never untuk existing branching
    • Buatlah branching baru dengan tipe Branch to PL/SQL Procedure :
    • BEGIN
      --closes this popup window
      htp.p('<body>');
      htp.p('<script type="text/javascript">');
      htp.p('parent.doSubmit(''DUMMY'');');
      htp.p('parent.$(''this'').dialog(''close'');');
      htp.p('</script>');
      htp.p('</body>');
      END;
      

Catatan : Page template untuk page 22 (Form) gunakan popup atau modifikasi template printer friendly dengan menghilangkan bagian navbar dan logo.
Contoh demo bisa dilihat di sini.
Sumber : Oracle APEX Forum.

Tidak ada komentar :

Posting Komentar