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 5 / 18  - Mit JQuery AJAX JSON in einer APEX Seite darstellen=====

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

In einer JSON Schnittstelle, die ORDS und PL/SQL verwendet um den REST Service zu implementieren, wird eine einfache Admin Oberfläche für den Support benötigt.

Um es dem Support zu erleichtern die einzelnen Aufrufe der Schnittstelle mit diversen Parametern zu testen, wird dazu eine APEX Oberfläche entwickelt.

In der Oberfläche wird der JSON Record der Schnittstelle in der Seite angezeigt, gleichzeitig werden auch die Basis Daten aus der Applikation dargestellt. 

Damit kann der Support dann vergleichen, ob die Daten von uns auch richtig ausgelesen wurden und bei Fehler einfacher selber nach Datenfehlern suchen.

Die Verwendung der nativen Möglichkeiten von Apex/Oracle DB kommt nicht nicht Frage, da hier die Architektur von APEX versieht das der Rest Call von der Datenbank aus erfolgen muss. Die DB Maschine muss dazu dann wieder das SSL Zertifikat verarbeiten können und es muss eine Sicherheitsregel in der DB hinterlegt werden. In gehosteten Umgebungen ist das aber meist nicht so einfach umsetzbar.


<fc #008000>**Lösung:**</fc>

Der Aufruf der Schnittstelle erfolgt über JQuery.ajax, die diversen Kurzformen und anderen Vorschläge im Internet haben leider nicht das gewünschte Ergebnis gegeben, zumal ich GET und POST für die Schnittstelle verwende und beides einfach funktionieren soll.

Wird mit JQuery.ajax direkt gearbeitet kann einfach auf alle möglichen Settings zugegriffen werden, siehe => http://api.jquery.com/jquery.ajax/#jQuery-ajax-settings.


<note important>In Apex ist es zum Beispiel keine gute Idee den Header einer REST Anfrage mit "$.ajaxSetup" vor dem Aufruf zu setzen!</note>

Das beeinflusst dann auch alle weiteren APEX internen REST Aufrufe! 

Wird so zum Beispiel der Content Type angepasst, gilt das für alle weiteren Calls! Und führt zu sehr merkwürdigen Fehlern in APEX 8-o !


----

==== Ein einfaches Beispiel für den notwendigen Code auf einer Seite ===


Das ganze lässt sich wie immer noch schöner gestalten, z.B. in eine eigene Library auslagern, noch dynamischer etc.




=== Code für die notwendigen Aufrufe===

JavaScript Code für die Seite unter "Page/JavaScript/Function and Global Variable Declaration" abgelegt:

<code javascript>
// page Global
var xapikey  = $v("P200_X_API_KEY");
var pageResultItemName='P200_RESULT';
var pageURLItemName='P200_URL';



//Page Methods for the handling of the results
$.showMyError=function(jqXHR, textStatus, errorThrow){
    var message_text = '<p>Error call URL :: ' + $v(pageURLItemName) + '<p> <p style="color: red; font-size: 3rem;" > Error Code :: ' + jqXHR.status + '</p>';
    $s(pageResultItemName, jqXHR.responseText);
    apex.message.showErrors([  {
                          type     :  "error"
                         ,location : [ "page", "inline" ]
                         ,pageItem : pageResultItemName
                         ,message  : message_text
                         ,unsafe   : false
        }
     ]); 
 }

// set my Element on the page
$.setPageItem = function (json) {
    console.log(json);
    var textJson=JSON.stringify(json,undefined, 4);
    $s(pageResultItemName,textJson);  
 }

// AJAX Methods for the AJAX Call

// before sending something
// show spinner popup

 $.onBeforeSend=function(jqXHR ,settings) {
    console.log(settings);
    $.popup = apex.widget.waitPopup();
}

// if all was fine 
// Populate the page Item
$.onSucess = function (response) {
    if (response instanceof Object) {
        var json = response;
    }
    else {
       var json = $.parseJSON(response);
    }
    $.setPageItem(json)
 }    

// if error happens
// show error Message
 $.onError = function (jqXHR, textStatus, errorThrow) {
     $.showMyError(jqXHR, textStatus, errorThrow) ;
 } 

// after all is finshed
// this wil be called also after an error!
// remove the spinner popup

 $.onComplete = function (jqXHR,errorStatus) {
      console.log(errorStatus);
      console.log($.popup);
      $.popup.remove();
 }



//
// overwrite JQuery.ajax for our need
//

$.gpiJSON = function(url
                    , header
                    , myMethod
                    , data
                    , onBeforeSend
                    , onSucess
                    , onError
                    , onComplete) {
    return jQuery.ajax({
        'method'     :  myMethod
     ,  'url'        : url
     , 'headers'    : header
     , 'contentType': 'application/json'
     , 'data'       : JSON.stringify(data)
     , 'dataType'   : 'json'
     , 'beforeSend' : onBeforeSend
     , 'success'    : onSucess 
     , 'error'      : onError
     , 'complete'   : onComplete
    });
  };


</code>


----
=== Verwenden ===

Der Aufruf der Schnittstelle erfolgt über einen Button auf der Seite, das Ergebnis wird in einem Textfeld dargestellt, sehr gut eignet sich dazu dieses Code Mirror Code Editor Plugin für APEX => https://apex.world/ords/f?p=100:710:16328505602228::::P710_PLG_ID:COM.APEXBYG.BLOGSPOT.CODEMIRROR .

Der Button ist mit einer Dynamic Action verknüpft, bei Click wird JavaScript ausgeführt.

Dargestellt sind nur die notwendigsten Fragmente:

<code javascript>
apex.message.clearErrors();

.....

    if ( call_method == 'POST' ) {
       data={  
            ,  'value'    : wert

            };
        //debug - show data
        $s("P200_BODY",JSON.stringify(data,undefined, 4));
     
    }
    else {
        data={};
        $s("P200_BODY",{});
    }    
    
    // define the data Header
    header= {  
                 'x-api-key'     : xapikey   
          ....
            ,    'Content-type'  : 'application/json'   
    };  
        
    //call
    $.gpiJSON (
              url
            , header
            , call_method
            , JSON.stringify(data)
            , $.onBeforeSend
            , $.onSucess
            , $.onError
            , $.onComplete
        );        
}      

</code>



----

==== Quellen ====

JQuery API => http://api.jquery.com/jquery.ajax/#jQuery-ajax-settings