Create custom REST AJAX call with RASD services

[Domen Dolar]

We will have one SELECT element. When element value is changed there will be ajax call. We will cal RASD REST service and set the response contenet to empty block.

1: We have to create custom RASD REST service. We can also use all created LOV services you have prepared. Look at Testing tab.

We created block A99 with SQL for Empoloyees data. The filter variable is named FEMPNO. The Block A99 is set to PAGE=19.

We can test service and result is:

Call:/!DEMO_AJAX_JSON_BLOCK.rest?restrestype=JSON&FEMPNO=7521&PAGE=19
Response:
{"form":{"@name":"DEMO_AJAX_JSON_BLOCK","@version":"1", "formfields": { "recnuma99":"1" ,"action":"" ,"error":"" ,"gbuttonbck":"GBUTTONBCK" ,"gbuttonclr":"GBUTTONCLR" ,"gbuttonfwd":"GBUTTONFWD" ,"gbuttonres":"GBUTTONRES" ,"gbuttonsave":"GBUTTONSAVE" ,"gbuttonsrc":"GBUTTONSRC" ,"message":"" ,"page":"19" ,"warning":"" }, "b10":[] ,"siteblock":[] ,"a99":[ { "a99empno":"7521" ,"a99ename":"WARD" ,"a99job":"SALESMAN" ,"a99mgr":"7698" ,"a99hiredate":"22-FEB-81" } ] }}

2: We prepare block with element for changing data - B10 and block where we sill put response data from AJAX call - SITEBLOCK. Both blocks are put to PAGE=1. We also set default PAGE=1. Element on B10 - B10EMPLOYEE - should have checked VS field. In this we will store custom HTML attribute.

3: We prapare javascript function. Function transfer json data from ajax response to fields on block SITEBLOCK. Function is stored on site "CSS, JS Surce" -> "FORM_JS"

function FillDynamicData(FEMPNO) {

   $.getJSON( '!'+document.forms[0].name+'.rest?FEMPNO='+FEMPNO+'&PAGE=19', {
    "restrestype" : "JSON",
    "call": "REST"
  })
    .done(function( data ) {
    //SET DATA FROM JSON TO ELEMENTS ON PAGE
    var x = document.getElementById('SITEBLOCKEMPNO_1_RASD').value=data.form.a99[0].a99empno;
    var y = document.getElementById('SITEBLOCKENAME_1_RASD').value=data.form.a99[0].a99ename;
    var w = document.getElementById('SITEBLOCKJOB_1_RASD').value=data.form.a99[0].a99job;
    var q = document.getElementById('SITEBLOCKMGR_1_RASD').innerText=data.form.a99[0].a99mgr;     
    var u = document.getElementById('SITEBLOCKHIREDATE_1_RASD').value=data.form.a99[0].a99hiredate;     
    }); 
  }

4: We set this function to the select item. Item trigges when data is changed. We put this code to trigger B10PRE_GUI

B10EMPLOYEE#SET.custom := 'onchange="FillDynamicData(this.value);"';

And results look like

Demo is on this link