Oracle Apex - Wykonywanie procedury PL/SQL z poziomu JavaScript

Czasami w aplikacji web zachodzi konieczność połaczenia informacji pobranych z bazy z tymi które właśnie wprowadza użytkownik. Pełnego zestawu potrzebnych informacji nie ma ani w bazie, ani w formularzu użytkownika - trzeba te części połączyć.

To co jest po stronie klienta, w przeglądarce, najlepiej odczytać używając JavaScript. To co jest w tabeli, pisząc kod PL/SQL. Jak to połączyć? Używając metody AJAX. Za wikipedia:

Asynchroniczny JavaScript i XML (Asynchronous JavaScript and XML, AJAX) – technika tworzenia aplikacji internetowych, w których interakcja użytkownika z serwerem odbywa się bez przeładowywania całego dokumentu, w sposób asynchroniczny. Ma to umożliwiać bardziej dynamiczną interakcję z użytkownikiem niż w tradycyjnym modelu, w którym każde żądanie nowych danych wiąże się z przesłaniem całej strony HTML.

Przykład - odczytujemy wartość z tabeli po wciśnięciu przycisku

Po wciśnieciu przycisku uruchomimy funkcje JavaScript która używając metody Ajax uruchomi procedurę PL/SQL. Zwrócona przez procedurę PL/SQL wartość zostanie przechwycona przez JS i wyświetlona dla użytkownika.

Tworzymy procedurę PL/SQL

Rozpoczynamy od napisania procedury PL/SQL. Mając otwartą stronę Apex do edycji wchodzimy do Processing => Ajax Callback i klikając prawym przyciskiem wybieramy "Create Process".Nazwijmy naszą procedurę np "check_category_value" (będziemy wywoływać ją z poziomu JS po tej nazwie).

Nasza procedura, by było łatwiej zrozumieć przykład, zwraca tylko jedną zmienną.

declare
  l_cat_val varchar(20);
begin
  Select sum(net_price) as sum_val into l_cat_val
  from OFFERS_DETAILS
  where OFFER_ID = APEX_APPLICATION.g_x01;
  htp.p(l_cat_val||chr(10));
end;

Jak widzisz, do procedury przesyłamy jeden parametr: numer oferty. Procedura zwróci sumę ceny netto dla wszystkich rekordów tej oferty.

Tworzymy funkcję JavaScript

Nasz przykład zademonstruje jak wykonać uruchomienie procedury PL/SQL poprzez kliknięcie przycisku. Równie dobrze jednak możesz użyć tej funkcji w innych rodzajach Dynamic Action czy np. jako Event kiedy ładuje się strona.

OK, dodajemy przycisk w dowolnym miejscu strony. Następnie klikamy prawym klawiszem myszy na przycisk i wybieramy "Create Dynamic Action".Pozostawiamy typ 'eventu' Click i dla akcji "TRUE" tworzymy akcję typu "Execute JavaScript code". W polu kod wklejamy funkcję i polecenie jej uruchomienia:


function testFunction () {
apex.server.process("check_category_value",{x01: 37},
{
dataType: 'text',
success: function(pData){alert(pData);} 
}
);
}
testFunction()

Zapisujemy i klimamy na przycisk. Po kliknięciu Apex wyświetli okno alertu z wartością odczytaną z tabeli.

Modyfikacje procedury PL/SQL

Nasza procedura może zwracać więcej pól danego rekordu. Np. mieć taką postać:

declare
  l_emprow emp%ROWTYPE;
begin
  select * into l_emprow
  from emp
  where empno = apex_application.g_x01;
  htp.p('EMPNO: '||l_emprow.empno||chr(10)||
        'ENAME: '||l_emprow.ename||chr(10)||
        'SAL:   '||l_emprow.sal  ||chr(10)||
        'JOB:   '||l_emprow.job);
end;

Procedura może zwracać i przyjmować też dane w postaci JSON.

Modyfikacjie funkcji JavaScript

W produkcyjnej wersji aplikacji z pewnością lepszym pomysłem będzie umieszczenie kodu funkcji nie pod przyciskiem a we właściwościach strony "Java Script => Function and Global Variable Declaration". Następnie uruchamianie tej funkcji poprzez odwoływanie się do niej. Możemy też bardziej skomplikowane funkcje umieścić w pliku i dołączyć odwołanie do tego kodu w "Java Script => URL Files", np: #APP_IMAGES#calculate_function.js