How to cascading single/multi values into tabular form on ORACLE APEX ?

  • Steps..

    1. Create tabular form, now i want that when changed value OR selected value on cascad_id column i see cascading values into other columns.
    2. Change cascad_id type column from number column to Popup LOV (Shows return value) and insert your LOV query .
      1. Now looking for ID for cascad_id column by INSPECT your browser (in our case ID=”f02_0001”).
        1
    3. Now we need create Application Process /process point = (On Demand)
      Name: Get_CscdValues

      Declare  
        p_cascadid  number ;  
        p_name      varchar2(200);  
        p_age       number;  
        p_type      varchar2(20);
        p_job       varchar2(20);
        l_json_str  varchar2(4000) := null;  
        Begin
        
            p_cascadid  := apex_application.g_x02;  
            -- #IMPORTANT NOTICE// 02 = name of cascad_id column in INSPECT browser. (( in our case >> name="f02" ))
            select name_,
      			 age_,
      			 type_,
      			 job_ 
      	    into p_name,
      			 p_age,
                   p_type,
      			 p_job
              from t_cascad  
              where ID = p_cascadid;  
        
      -- build a JSON string to return  
        l_json_str  := '{  
                        "NAME": "'||p_name||'",  
                        "AGE": "'||p_age ||'",
      				  "TYPE": "'||p_type ||'",
      				  "JOB": "'||p_job ||'"
                        }';  
        
      sys.htp.p(l_json_str);  
      End;

      2

    4. We want ID’s  (by Inspect browser) of tabular form column that we want to cascading values to them
      #in our case..
      Name column id=”f03_0001
      Age column id=”f04_0001”
      Type column id=”f05_0001”
      Job column id=”f06_0001”
    5. Now we need to create JS function

      function f_fetch_values(pThis) 
      {  
        var empDtlsJSON;   
        var row_id  = pThis.id.substr(4); 
        apex.server.process ( "Get_CscdValues",    
      									  {  
      										  x02: $(pThis).val()  // ID for cascad_id
      									  }, 
      									  
      									  { type: "GET", dataType: "json", success: function( json ) 
      											 {  
      											  var name = json.NAME;  
      											  var age = json.AGE; 
      											  var type = json.TYPE;
      											  var job = json.JOB;
      											  
      											  $('#f03_'+row_id).val(name);  //Change with id of column that we fetched before in step 4
      											  $('#f04_'+row_id).val(age);
      											  $('#f05_'+row_id).val(type);
      											  $('#f06_'+row_id).val(job);
      											 }  
      									  }
        
                            );  
      }
    6. Put JS function in (Function and Global Variable Declaration) Section of form page.
    7. Put (onchange=”javascript:f_fetch_values(this);”) into Advanced/Custom Attributes section, look Pic.
      Screenshot from 2016-01-13 20:09:31
      Screenshot from 2016-01-13 20:10:24

      onchange="javascript:f_fetch_values(this);"
    8. Now save, test your tabular form.
    • Now you can select from Popup lov and return all values for all column.
    • Now you can change value of cascad id column to change values of columns .
      #Sample     user:test   pass:test

      First, full thanks to my God.
      Then thank you  Jitendra and Oracle Apex community 

     

You may also like...

1 Response

  1. Great Great & Great
    Very Very Helpful 🙂
    Many Many Many Thanks…
    Amr Abdeen…