APEX

Search bar for Tabular form with auto complete option for Date values

Requirement: Tabular form Search bar Challenges faced: On default, in tabular form Oracle apex didn’t provided the Search option. Solution: 1. Created a page level select list item to display all the column names. 2. Created a text item (which will act as select list also on selecting date value in previous item) for user to enter the search value. 3. Created 2 buttons, one for searching and other to clear the previously entered value. 4. Modified the existing report query as SELECT NULL, delivery_item_id, master_item_id, delivery_pdvd_id, item_id, program_name, output_name, title, “Item_type”, “Theme”, “Unique_Replicate_Indicator”, “Replicate_of”, rerun, validation_type, “Hold”, “Hold Status”, developer_id, dev_proj_complete_date, dev_status, dev_pending_reason, dev_act_complete_date, dev_status_comments, validator_id, valid_proj_complete_date, valid_status, valid_pending_reason, valid_act_complete_date, valid_status_comments, reviewer_id, review_proj_complete_date, review_status, review_pending_reason, review_act_complete_date, review_status_comments, validation_program_name, dev_check, valid_check, review_check, overall_check, cdars_standards, “Role”, general_comments, SEQUENCE, gc FROM (SELECT ROWNUM rnum, NULL, delivery_item_id, master_item_id, delivery_pdvd_id, item_id, program_name, output_name, title, “Item_type”, “Theme”, “Unique_Replicate_Indicator”, “Replicate_of”, rerun, validation_type, “Hold”, “Hold Status”, developer_id, dev_proj_complete_date, dev_status, dev_pending_reason, dev_act_complete_date, dev_status_comments, validator_id, valid_proj_complete_date, valid_status, valid_pending_reason, valid_act_complete_date, valid_status_comments, reviewer_id, review_proj_complete_date,…

Shrinking of Navigation Menu on page load

Requirement: Navigation menu should be shrinking on page load. Challenges faced: In Oracle Apex 5, universal theme the navigation menu is strengthening on default page load. If we want to shrink the menu we need to click on the navigation menu controller. Resolution: 1. Created a dynamic action with event as page load and condition as JavaScript Expression and value as $(‘#t_Button_navControl’).attr(‘aria-expanded’) === “true”. 2. A true action is provided with JavaScript code as $(‘#t_Button_navControl’).click(); Output:

Displaying of 7 Consecutive Dates in Report Header

Step 1: Create a date field for selecting the date. Step 2: Create a report for displaying the data in those dates. Step 3: Enter the following code in the page header Code: $(function() { var month = new Array(); month[0] = “Jan”; month[1] = “Feb”; month[2] = “Mar”; month[3] = “Apr”; month[4] = “May”; month[5] = “Jun”; month[6] = “Jul”; month[7] = “Aug”; month[8] = “Sep”; month[9] = “Oct”; month[10] = “Nov”; month[11] = “Dec”; var from_date = $(“#P215_FROM_DATE”).val(); //alert(‘from_date’+from_date); var sec_date = new Date(from_date); //alert(‘sec_date’+sec_date)); sec_date.setDate(sec_date.getDate() + 1); //alert(sec_date.setDate(sec_date.getDate() + 1));…

Removal of close button from Select2 plugin

Requirement: The users who completed their tasks in selected Delivery PDVD must not be deleted from team allocation. Select2 plugin was used for selecting multiple users, which will have a cross button to remove the users. The cross button must be disabled for the users who completed their tasks in the selected Delivery PDVD Challenges faced: Select2 is an external plugin for selecting multiple values at a time. On default plugin don’t have any option to remove the close button. Solution: 1. Created a page level item to get all the completed users for selected Delivery PDVD. 2. Created a dynamic action with event as on Page load and called a JavaScript function. 3. Added JavaScript code in the page header to check the users from the previous page item and removed the close icon. function remove_close() { var a=$(“#P94_ROLE”).val(); //alert(a); if (a.length!=0) { var numbers = a.toString().split(‘,’); for(var i = 0; i < numbers.length; i++) { var b=numbers[i]; $(“ul.select2-choices li”).each(function(){ var s= $(this).text(); s=s.trim() if (s==b) { var z=$(this).find(“div”).next().removeClass(“select2-search-choice-close”); //alert(‘s = ‘+s); } …

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 =…

Key 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>

Global 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.

Full 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:…

Dynamic 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();…

Conditional 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 …

We take you from best practices to next practices of software implementation

Solutions that Ensure You Stay Ahead of Competition

Your Partner for Strategic Technology Solutions

Guiding Your Digital Transformation Journey