{"id":88,"date":"2016-01-13T21:07:47","date_gmt":"2016-01-13T19:07:47","guid":{"rendered":"http:\/\/geekinto.com\/?p=88"},"modified":"2016-01-14T00:05:49","modified_gmt":"2016-01-13T22:05:49","slug":"how-to-cascading-singlemulti-values-into-tabular-form-on-oracle-apex","status":"publish","type":"post","link":"https:\/\/howoracleapex.com\/?p=88","title":{"rendered":"How to cascading single\/multi values into tabular form on ORACLE APEX ?"},"content":{"rendered":"<ul>\n<li style=\"font-weight: 400;\">\n<h2>Steps..<\/h2>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Create tabular form, now i want that when <\/span><b><i>changed value<\/i><\/b><span style=\"font-weight: 400;\"> OR <\/span><b>selected value<\/b><span style=\"font-weight: 400;\"> on <\/span><b>cascad_id<\/b><span style=\"font-weight: 400;\"> column i see cascading values into other columns.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Change <\/span><b>cascad_id<\/b><span style=\"font-weight: 400;\">\u00a0type column from number column to <\/span><b>Popup LOV (Shows return value) <\/b><span style=\"font-weight: 400;\">and insert your LOV query .<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Now looking for ID for <\/span><b>cascad_id <\/b><span style=\"font-weight: 400;\">column by INSPECT your browser <\/span><span style=\"font-weight: 400;\">(in our case ID=\u201d<\/span><span style=\"font-weight: 400;\">f02_0001<\/span><span style=\"font-weight: 400;\">\u201d)<\/span><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><a href=\"http:\/\/geekinto.com\/wp-content\/uploads\/2016\/01\/1.png\" rel=\"attachment wp-att-90\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-90\" src=\"http:\/\/geekinto.com\/wp-content\/uploads\/2016\/01\/1.png\" alt=\"1\" width=\"1364\" height=\"660\" \/><\/a><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Now we need create <\/span><b>Application Process<\/b><b> \/<\/b><span style=\"font-weight: 400;\">process point = (On Demand) <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">Name: Get_CscdValues<\/span><\/p>\n<pre class=\"lang:plsql decode:true \">Declare  \r\n  p_cascadid  number ;  \r\n  p_name      varchar2(200);  \r\n  p_age       number;  \r\n  p_type      varchar2(20);\r\n  p_job       varchar2(20);\r\n  l_json_str  varchar2(4000) := null;  \r\n  Begin\r\n  \r\n      p_cascadid  := apex_application.g_x02;  \r\n      -- #IMPORTANT NOTICE\/\/ 02 = name of cascad_id column in INSPECT browser. (( in our case &gt;&gt; name=\"f02\" ))\r\n      select name_,\r\n\t\t\t age_,\r\n\t\t\t type_,\r\n\t\t\t job_ \r\n\t    into p_name,\r\n\t\t\t p_age,\r\n             p_type,\r\n\t\t\t p_job\r\n        from t_cascad  \r\n        where ID = p_cascadid;  \r\n  \r\n-- build a JSON string to return  \r\n  l_json_str  := '{  \r\n                  \"NAME\": \"'||p_name||'\",  \r\n                  \"AGE\": \"'||p_age ||'\",\r\n\t\t\t\t  \"TYPE\": \"'||p_type ||'\",\r\n\t\t\t\t  \"JOB\": \"'||p_job ||'\"\r\n                  }';  \r\n  \r\nsys.htp.p(l_json_str);  \r\nEnd;<\/pre>\n<p><a href=\"http:\/\/geekinto.com\/wp-content\/uploads\/2016\/01\/2.jpeg\" rel=\"attachment wp-att-91\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-91\" src=\"http:\/\/geekinto.com\/wp-content\/uploads\/2016\/01\/2.jpeg\" alt=\"2\" width=\"1153\" height=\"1485\" \/><\/a><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">We want ID\u2019s \u00a0<span style=\"color: #999999;\">(by Inspect browser)<\/span> of tabular form column that we want to cascading values to them <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">#in our case..<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">Name column id=\u201df03_0001<\/span><span style=\"font-weight: 400;\">\u201d<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">Age column id=\u201df04_0001\u201d<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">Type column id=\u201df05_0001\u201d<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">Job column id=\u201df06_0001\u201d<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Now we need to create JS function<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<pre class=\"lang:js decode:true\">function f_fetch_values(pThis) \r\n{  \r\n  var empDtlsJSON;   \r\n  var row_id  = pThis.id.substr(4); \r\n  apex.server.process ( \"Get_CscdValues\",    \r\n\t\t\t\t\t\t\t\t\t  {  \r\n\t\t\t\t\t\t\t\t\t\t  x02: $(pThis).val()  \/\/ ID for cascad_id\r\n\t\t\t\t\t\t\t\t\t  }, \r\n\t\t\t\t\t\t\t\t\t  \r\n\t\t\t\t\t\t\t\t\t  { type: \"GET\", dataType: \"json\", success: function( json ) \r\n\t\t\t\t\t\t\t\t\t\t\t {  \r\n\t\t\t\t\t\t\t\t\t\t\t  var name = json.NAME;  \r\n\t\t\t\t\t\t\t\t\t\t\t  var age = json.AGE; \r\n\t\t\t\t\t\t\t\t\t\t\t  var type = json.TYPE;\r\n\t\t\t\t\t\t\t\t\t\t\t  var job = json.JOB;\r\n\t\t\t\t\t\t\t\t\t\t\t  \r\n\t\t\t\t\t\t\t\t\t\t\t  $('#f03_'+row_id).val(name);  \/\/Change with id of column that we fetched before in step 4\r\n\t\t\t\t\t\t\t\t\t\t\t  $('#f04_'+row_id).val(age);\r\n\t\t\t\t\t\t\t\t\t\t\t  $('#f05_'+row_id).val(type);\r\n\t\t\t\t\t\t\t\t\t\t\t  $('#f06_'+row_id).val(job);\r\n\t\t\t\t\t\t\t\t\t\t\t }  \r\n\t\t\t\t\t\t\t\t\t  }\r\n  \r\n                      );  \r\n}<\/pre>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Put JS function in (<\/span><span style=\"font-weight: 400;\">Function and Global Variable Declaration) Section of form page.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Put (onchange=&#8221;javascript:f_fetch_values(this);&#8221;) into Advanced\/Custom Attributes section, look Pic.<br \/>\n<a href=\"http:\/\/geekinto.com\/wp-content\/uploads\/2016\/01\/Screenshot-from-2016-01-13-200931.png\" rel=\"attachment wp-att-97\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-97\" src=\"http:\/\/geekinto.com\/wp-content\/uploads\/2016\/01\/Screenshot-from-2016-01-13-200931.png\" alt=\"Screenshot from 2016-01-13 20:09:31\" width=\"1365\" height=\"657\" \/><\/a><br \/>\n<a href=\"http:\/\/geekinto.com\/wp-content\/uploads\/2016\/01\/Screenshot-from-2016-01-13-201024.png\" rel=\"attachment wp-att-98\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-98\" src=\"http:\/\/geekinto.com\/wp-content\/uploads\/2016\/01\/Screenshot-from-2016-01-13-201024.png\" alt=\"Screenshot from 2016-01-13 20:10:24\" width=\"1365\" height=\"637\" \/><\/a><br \/>\n<\/span><\/span><\/p>\n<pre class=\"lang:default decode:true\">onchange=\"javascript:f_fetch_values(this);\"<\/pre>\n<\/li>\n<li style=\"font-weight: 400;\">Now save, test your tabular form.<\/li>\n<\/ol>\n<ul>\n<li><span style=\"font-weight: 400;\">Now you can select from Popup lov and return all values for all column.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Now you can change value of cascad id column to change values of columns .<\/span><br \/>\n#<a href=\"https:\/\/apex.oracle.com\/pls\/apex\/f?p=38695:47::::::\" target=\"_blank\">Sample<\/a>\u00a0 \u00a0 \u00a0user:test \u00a0 pass:test<\/p>\n<p><span style=\"font-weight: 400;\">First, full thanks to my God.<br \/>\n<\/span><span style=\"font-weight: 400;\">Then thank you \u00a0<a href=\"https:\/\/community.oracle.com\/people\/Jitendra?customTheme=otn\" target=\"_blank\">Jitendra<\/a>\u00a0and <a href=\"https:\/\/community.oracle.com\/community\/database\/developer-tools\/application_express\" target=\"_blank\">Oracle Apex community<\/a>\u00a0<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Steps.. Create tabular form, now i want that when changed value OR selected value on cascad_id column i see cascading values into other columns. Change cascad_id\u00a0type column from number column to Popup LOV (Shows&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,12,6],"tags":[],"class_list":["post-88","post","type-post","status-publish","format-standard","hentry","category-apex","category-jscript","category-plsql"],"_links":{"self":[{"href":"https:\/\/howoracleapex.com\/index.php?rest_route=\/wp\/v2\/posts\/88","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howoracleapex.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howoracleapex.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howoracleapex.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howoracleapex.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=88"}],"version-history":[{"count":7,"href":"https:\/\/howoracleapex.com\/index.php?rest_route=\/wp\/v2\/posts\/88\/revisions"}],"predecessor-version":[{"id":100,"href":"https:\/\/howoracleapex.com\/index.php?rest_route=\/wp\/v2\/posts\/88\/revisions\/100"}],"wp:attachment":[{"href":"https:\/\/howoracleapex.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=88"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howoracleapex.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=88"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howoracleapex.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=88"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}