Gunther Oracle APEX und Datenbank Wiki

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
=====Oracle Apex 18 - Formular Daten mit JSON Apex REST Call aktualisieren, Enter Query Form Verhalten von Oracle Forms simulieren =====

**2019/04**

<fc #008000>**Aufgabe**</fc>

Im ersten Schritt soll nur ein Web Formular aus der Datenbank per APEX REST CALL mit Werten versorgt werden.

Im nächsten Schritt kann über das selbe Formular das Verhalten von Oracle Forms simuliert d.h. im gleichen dem selbem Formular kann auch nach den Daten gesucht werden.


<fc #cd5c5c>**Fachlich**</fc>

Ein Kunde kann 7 Eigenschaften haben, diese Eigenschaft wird mit einen Datum gesetzt, ist das Problem behoben, kann die Eigenschaft wieder gecleart werden.

D.h, wir haben im Prinzip ein Master-Detail Form - Kunde -> "Eigenschaften gesetzt mit Datum" 


Die gesetzten Eigenschaften werden als einzelne Records in einer Detail Tabelle abgelegt. 


Nach dem ersten Versuch das mit einem Interaktiv Grid Excel Artig sehr dynamisch zu lösen hat sich herausgestellt das diese Ansicht nicht so recht zum Workflow des Kunden passt.

Leider war es mir aber auch nicht möglich auf die Schnelle die ganze JavaScript Logik mit Dynamic Actions auf eine mit "htp.p" generiertes Formular zu übertragen.

Daher die notwendigen Felder als einzelne Page Items angelegt, nun können weitere Aspekte der Oberfläche einfach mit Dynamic Actions gelöst werden. 

Aber wie kommen nun die Daten in die Maske?



Und um das im Detail nicht jedesmal neu mit allen Feldnamen etc. entwickeln  zu müssen muss der REST Call möglichst 
dynamische funktionieren und in der Antwort z.B. bereits die richtigen Feldnamen kodiert zurück geben.




Der Trick besteht darin, das die Bezeichner der Formular Elemente auf der Apex Seite genau den Spaltennamen der Tabelle/View hinter dem Formular entsprechen. 

Aus diesen Daten wird das passende JSON erzeugt mit  " "ElementName":  "Wert" " Paaren.

Mit JavaScript kann das wieder ausgelesen und den jeweiligen Elementen Ihr Wert zugewiesen werden. 



Hier im ersten Schritt ein paar Code Fragmente bzgl. der generellen Idee.


Da wir nun jedes Feld als Parameter an die JSON Abfrage übergeben können kann mit diesem Architekur Pattern genau die alte Forms Logik, suchen in einen Eingabe Formular wieder abgebildet werden.




Demnächst mehr.


----


==== PL/SQL Part ====


Auf der Datenbank wird die JSON Antwort mit PL/SQL erzeugt.

In PL/SQL wird per Select Abfrage die Daten für das Formular ausgelesen werden und aus den Name der Ergebnisse ergeben sich die Daten für die Formular Felder.



Auszug aus dem Package für die Daten Abfrage ( Die Parameter für die Abfrage werden über die APEX internen Variablen **"apex_application.g_x0[1-9]"** übergeben.


das Code Fragment ( stark gekürzt da aus aktuellen Projekt):

<code pl/sql>

.....
   
    -- =====================
    -- read the actual the xxx data for this customer
    -- =====================

    procedure get_customer_data( p_kundenummer varchar2, p_institut varchar2 )
    is
    
    cursor c_utp( p_kundenummer varchar2, p_institut varchar2 )
        is select customer_type, status
      from customers 
     where KUNDENNUMMER=p_kundenummer 
       and INSTITUTSZUORDNUNG= p_institut;
    
    begin
     
       apex_json.open_object;
    
       -- write query parameter for debugging purpose back to the json answer
       APEX_JSON.WRITE (
              p_name     => 'Kundennummer'
            , p_value    => apex_application.g_x02
            , p_write_null   => true);
            
       APEX_JSON.WRITE (
              p_name     => 'Institut'
            , p_value    => apex_application.g_x03
            , p_write_null   => true);       
      
       --  
       for rec in c_utp( p_kundenummer => apex_application.g_x02, p_institut => apex_application.g_x03 )
       loop
           APEX_JSON.WRITE (
              p_name     => upper(rec.customer_type||'')
            , p_value    => 'Y'
            , p_write_null   => true);
            
           APEX_JSON.WRITE (
              p_name     => upper(rec.customer_type||'_status')
            , p_value    => to_char(rec.status,pkg_global.g_date_format_mask_key_date)
            , p_write_null   => true);
            
          .....
          
        end loop;
    
        apex_json.close_all;
    
     end get_customer_data;

....

</code>




----

==== Java Script Code für die Dynamic Action hinter dem Such Button====


Code Fragment um eine AJAX Call auf APEX Seite abzusetzen.

Unter "Function and Global Variable Declaration" hinterlegen:
<code javascript>

function setUTPData () {

   apex.server.process(
 
   'GET_CUSTOMER_DATA',                                   // Process or AJAX Callback name
	{     x01: apex.item("P3200_KEYDATE").getValue()    // Parameter "x01"
  	    , x02: apex.item("P3200_CLIENT_ID").getValue()  // Parameter "x02"
	    , x03: apex.item("P3200_INSTITUT").getValue()   // Parameter "x03"
	}
	,{
          success: function (pData) {             // Success Javascript
           ;
            console.log(pData);
            var jdata = JSON.parse(pData);
           
            // set all values and enable clear           
            for (var key in jdata) {
                if (jdata.hasOwnProperty(key)) {                    
                    console.log(key + " -> " + jdata[key]);
                    apex.item( 'P3200_'+ key ).enable();
                    apex.item( 'P3200_'+ key ).setValue(jdata[key]);
                    
                }
            } 
           // disable all UTP If Clear was selected
           var utpReason='';
           for (var key in jdata) {
            
                if (jdata.hasOwnProperty(key)) {   
                      
                      console.log(key)  ;
            
                      if ( key.indexOf('_')== -1 || ( key== 'SPECIFICUTP_SOFT' ) || ( key=='SPECIFICUTP_HARD' )  ) {
                          utpReason=key;                          
                      }
            
                      console.log(utpReason) ; 
            
                      if ( key == ( utpReason +'_CLEAR' )  && jdata[key]=='Clear') {
                          //disable this fields
                          apex.item( 'P3200_'+ utpReason ).disable(); 
                          apex.item( 'P3200_'+ utpReason + '_KEYDATE').disable(); 
                      }
                }
           }
       }
	  ,error: function(pData, err, message) {   

        alert();

	  }
      , dataType: "text"                        // Response type (here: plain text)
    }
  );
}

</code>