HOLD / UNHOLD in APEX Report
In Report Attributes, Call below function in link – URL function fun(a) { //alert(a); var str = a.substring(4); // alert(str); str =…
Read MoreKey Controlled Report View in APEX
Every application all over world is in fond of key controlled or having shortcuts to report view. I have implemented this with some Javascript. Step:1: By Default , report should not be visible , So we have added attribute to region as: Region Attributes : style= “display:none;” Step: 2: Create a new html region and following javascript code for key recognition and report view : [Shortcut Key: Ctrl+S] <html> <head> <script> function test(e) { e = e || window.event; //Get event if (e.ctrlKey) { var c = e.which || e.keyCode; //Get key code switch (c) { case 83:// Block Ctrl+S e.preventDefault(); // Prevents Default Fuctionality e.stopPropagation(); $(“#TEST_REPORT”).dialog(); // Opens Dialog } } }; </script> </head> <body onkeydown=”javascript:test(event);”> </body> </html>
Read MoreGlobal Alert Box in APEX
GLOBAL ALERT BOX is developed as we need customized alert boxes all over application. A region created in global page and been referred in dialog box wherever been called. Step:1: Create region in global page with Static ID. For Example: alert. Step:2: For alert box, JQuery Dialog been called.Alert messages can be dynamically changed and customized. $(“#alert”).html(“Blank row already exists. Hence cannot add row”); // .html() – Dynamically we can change content of region $(“#alert”).dialog({modal:true,resizable: false,minHeight: 105,width:380,dialogClass: ‘testclass’}); //$(“#alert”) – Global region referred for dialog. Output: You can notice change of message dynamically.
Read MoreFull View/ Normal View of Tabular Form Columns in APEX
Step:1: Create relation between table header and table data <td class=”t-Report-cell” rel=”#COLUMN_HEADER_NAME#” #ALIGNMENT# headers=”#COLUMN_HEADER_NAME#”>#COLUMN_VALUE#</td> Step:2: Normal View Functionality: Show / Hide required columns on-click Order the Columns accordingly, 1.Create Button with dynamic action as Execute Javascript Code, 2. For Example, If you have 25 columns, Arrange first 6 as your main visible columns and so that you can form a loop and hide after 6, Use following Jquery inside your loop var a = $(‘.t-Report-report’).find(“td:eq(“+i+”)”).attr(“rel”); $(‘.t-Report-report’).find(“th:eq(“+i+”), td:eq(“+i+”)”).hide(); $(‘td[rel=’+a+’]’).hide(); i Represents the nth column of <table> .t-Report-report Class of the report .find Finds the selector specified in braces td:eq(“+i+”) equals (eq) nth(i) table data(td) .attr(“rel”) Finds attribute rel .hide() Hides the selector Step:3:…
Read MoreDynamic addition of data on clicking of link in a pop-up
Step:1: On Click of tabular form column of parent report, execute below javascript code to open pop-up with latest modification of parent report Dynamic Action Event : Onclick Selection type : JQuery Selector Execute Javascript Code, var i = 1; var a = “”; var b = “”; var c= “”; while (i != 0) { b = “000” + i; b = pad(i,4); a = $(“#f10_” + b).val(); if (typeof a === “undefined”) { i = 0; } else { if (a==’U’) { $(“#f11_” + b).val(“”); //alert($(“#f02_” + b).val()); c=c+”^~”+$(“#f03_” + b).val()+”|~”+$(“#f05_” + b).val()+”|~”+$(“#f06_” + b).val()+’|~’+$(“#f07_” + b).val()+’|~’+$(“#P77_MASTER_PDVD_ID”).val(); } i=i+1; } } var get = new htmldb_Get(null,$x(‘pFlowId’).value, ‘APPLICATION_PROCESS=AP_REP_VAL’,0); get.add(‘AI_UNIQ_VAL’,c); gReturn = get.get();…
Read MoreConditional Link in APEX Tabular Form
Conditional link is the common requirement all over application development. As requirement goes with Users and Roles, Conditionally we may have to hide / disable link for different users and roles. Form level it will be easy. But when comes to tabular form, it is somewhat typical. I have done this in tabular form with JQuery, without using any loop which will lead to performance issue. It has been done as Role-based Conditional link. Step:1: Maintain hidden column in tabular form to maintain role against each entry. Step:2: In Page Load and after refresh event include this Execute Javascript code event $(“#report_del_item .t-Report-report td[headers=’GENERAL_COMMENTS’]”) .each(function(){var a = $(this).children(“input[name=’f15′]”).val(); if (a ==’Developer’ || a ==’Validator’ || a ==’Reviewer’) { $(this).closest(‘tr’).find(“td[headers=’TITLE’] a”).attr( “href”, “javascript:void(0);”).css({“cursor”:”default”,”color”: “black”}); } }); #report_del_item – Static Id of Report. td[headers=’GENERAL_COMMENTS’] – Represents General Comments Column $(this).children(“input[name=’f15′]”) – Represents role hidden column …
Read MoreConditional Alert / Comments on Hover
Conditional Alert / Comments on Hover is common requirement, In Old days, it is common to use drill-down pop-up user has to click and view comments and after that he has to close it. If he had 100 records it takes time to click and check on it. Instead of Click, It is better to visualize comments / alert on hover. Step:1: In Link / Element Attributes, we can call function on mouse hover using javascript as follows: onmouseover=”fun_status(#DELIVERY_ITEM_ID#,#DELIVERY_PDVD_ID#);” Step:2: In function we will check our condition and display it conditionally. It is simple, But we used it for field locks as user can be restricted to click on link when other user is using it , during hover itself we will alert him and restrict. Following javascript is used to check whether particular field is locked or not and we will conditionally alert them or allow in accordance to condtion function fun_status(a,b) { var get = new htmldb_Get(null,$x(‘pFlowId’).value, ‘APPLICATION_PROCESS=AP_DEL_OUTPUT_CHECK’,0); get.add(‘AI_PDVD_ID’,a); get.add(‘AI_DELIVERY_PDVD_ID’,b); gReturn = get.get(); var x=gReturn; x = x.trim(); //alert(x); if (x != “Not Exists”) { $(“#alert”).html(“Field has been locked by <b>”+x+”</b>”); $(“#alert”).dialog({modal:true,resizable: false,minHeight: 105,width:380,dialogClass: ‘testclass’}); } } $(‘#alert’).on(‘dialogclose’, function(event) { $(“#alert”).dialog(“destroy”); }); Output:
Read MoreComments Differentiation in Oracle APEX
Comments Differentiation is some recent requirement as new advancements in CSS been implemented. Customer requires differentiation in Image when some comment been added. It has been implemented with css and little Jquery. Step:1: Include following icon tag in Link Text in report column attributes <i class=”fa fa-comments-o fa-3x icon-grey” aria-hidden=”true”></i> Step:2: Create hidden column to find comments exists for particular row. Step:3: Include following JQuery for color differentiation: Create Dynamic Action as Execute Javascript Code Event : After Refresh and Page Load $(“#report_del_item .t-Report-report td[headers=’GENERAL_COMMENTS’]”).each(function(){ var c = $(this).children(“input[name=’f17′]”).val(); if (c.length != 0) { $(this).closest(‘tr’).find(“td[headers=’GENERAL_COMMENTS’] a”).children(“i”).css({“color”:”red”}); } }); #report_del_item – Static Id of Report. td[headers=’GENERAL_COMMENTS’] – Represents General Comments Column $(this).children(“input[name=’f15′]”) – Represents general comments hidden column , Children been specified as all hidden columns will be children to last visbile/display column. .closest(‘tr’) – Finds closest table row <tr> .children(i) – Represents child icon tag inside parent general comments .css – Adds style element to selector Output: You can notice General Comments to see Comments Differentiation
Read MoreBlank Row Restriction in Oracle APEX
Blank Row Restriction is to avoid unwanted addition of rows in detail report (tabular Form) when a blank row already exists. This functionality can be achieved by Javascript. It is simple but can be reused everywhere. Step:1: Change Add Row Button action as “Defined by Dynamic Action” Step:2: Create Dynamic Action with action as Event : Click Button Action : Execute Javascript Code Code : var i = 1; var count = 0; var c; while (i != 0) { b = “000” + i; //alert(b); b = pad(i,4); // calls function pad and pads 4 zeros a = $x(“f05_” + b).value; // id of mandatory column //alert(a); if (typeof a === “undefined”) { i = 0; } else { c = a.trim(); if (c.length == 0) { count = count + 1; } else { count = 0; } i = i + 1; } }…
Read MoreAdd Row on the Top in the APEX Tabular Form
Step 1: Give the Add row button, Action when Button Clicked as Defined by Dynamic action. Step 2: Create a Dynamic action with Event as Click, Selection Type as Button, Button as Add_row and true action as Execute JavaScript Code with Fire on Page load No and add code as addRowTop(); Step 3: Create a function in page header as function addRowTop() { apex.widget.tabular.addRow(); apex.jQuery(apex.widget.tabular.gTabForm).find(“tr”).last().insertBefore(apex.jQuery(apex.widget.tabular.gTabForm).find(“tr”).first()); }
Read More