Gunther Oracle APEX und Datenbank Wiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Zuletzt angesehen:
prog:apex_json_form_enterquerymode

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung		Vorhergehende Überarbeitung
Letzte ÜberarbeitungBeide Seiten der Revision
prog:apex_json_form_enterquerymode [2019/04/08 22:30] – [Oracle Apex 18 - Formular Daten mit JSON Apex REST Call aktualisieren, Enter Query Form Verhalten von Oracle Forms simulieren] gpipperrprog:apex_json_form_enterquerymode [2019/04/08 22:36] – [Java Script Code] gpipperr
Zeile 1: Zeile 1:
 +=====Oracle Apex 18 - Formular Daten mit JSON Apex REST Call aktualisieren, Enter Query Form Verhalten von Oracle Forms simulieren =====
 +
 +<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 Fehler 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>
 +
  
prog/apex_json_form_enterquerymode.txt · Zuletzt geändert: 2021/03/23 10:23 von gpipperr