Skip to main content

Replicating Interactive Report Button Layout in Classic Reports – Oracle APEX Hack

In Oracle APEX, Interactive Reports provide built-in flexibility — including the convenient ability to place buttons right next to the  search bar. However, Classic Reports don’t offer that option out of the box.

While working with a project that used the Standard template, I wanted to achieve the same clean and functional layout in a Classic Report. With a bit of creative use of jQuery and APEX region structure, I successfully replicated the Interactive Report’s button placement, giving the Classic Report a modern and consistent look.

Paste the below code on Execute on page load section

$(document).ready(function () {

    if ($('#Btn_Open').length) { 

        $('#EMP .t-Region-headerItems--title').append($('#Btn_Open')); 

        $('#EMP .t-Region-headerItems--title').append($('#P8_DEPT_CONTAINER'));

    }

});


EMP                                     -  Static IDof the classic report
Btn_Open                             -  Static ID of the Button
P8_DEPT_CONTAINER    - Static ID of popup lov 


P8_DEPT_CONTAINER is not a user-defined ID — it was copied from the browser console. This ID represents the container div that wraps both the Popup LOV field and its associated button. When we use the Popup LOV item’s static ID directly, only the input field moves, not the LOV button. Therefore, to move the entire Popup LOV (including the button), we use its automatically generated container ID instead.


Comments

Post a Comment

Popular posts from this blog

Reusable JS Functions for Field Validation in Oracle APEX Forms

 These reusable JavaScript functions provide client-side validation for Oracle APEX forms, improving data accuracy before submission. They allow developers to enforce mandatory fields and ensure certain fields contain only numeric values . By using these functions, APEX forms become more user-friendly and robust , reducing the chance of invalid data entry. Step 1: Create a Static Content region on the Global Page using the Blank with Attributes template. Step 2: Paste the following code into the HTML Source section of the region. <script>     function validateInputField(inputFieldId, pageItemName, errorMessage) {         $(inputFieldId).focusout(function() {             var itemValue = apex.item(pageItemName).getValue();             apex.message.clearErrors(pageItemName);             if (!itemValue) {               ...
Post a Comment
Read more

Reusable JavaScript Function to Highlight Holidays on APEX Date Picker Item

Date pickers are an essential part of web applications, especially when users need to select dates for bookings, reports, or scheduling tasks. However, in many business scenarios, certain dates like holidays, weekends, or special events need to be visually distinguished to prevent users from selecting them by mistake. In this blog, we will create a reusable JavaScript function that highlights holiday dates in an Oracle APEX date picker. This approach allows developers to call the function anywhere in their application, ensuring consistency and reducing redundant code. By the end, you’ll have a flexible solution to visually mark holidays on any date picker item in your APEX applications. Step 1: Create a Static Content region and set it to Blank with Content under the region attributes. Step 2: Inside that region, enclose a <script> tag and paste the following JavaScript function. function applyHolidayFormatterToDateItems(itemNames) {   const holidayList = [   ...
Post a Comment
Read more

Customizing Classic Card Report Template with Collapse Option in Oracle APEX

 This customization adds collapse/expand controls to a Classic Card Report in Oracle APEX, enhancing user interaction and report usability. Step 1: Copy the existing Classic Report Card template and save it with a new name. Step 2: Add the following customized code in the Row Template 2 section. <li class="t-Cards-item #CARD_MODIFIERS#">   <div class="t-Card">     <!-- Icon and Title/Subtitle -->     <a href="javascript:void(0);" class="t-Card-wrap">       <div class="t-Card-icon u-color #CARD_COLOR#">         <span class="t-Icon fa #CARD_ICON#">           <span class="t-Card-initials" role="presentation">#CARD_INITIALS#</span>         </span>       </div>       <div class="t-Card-titleWrap">         <h3 class="t-Card-title">#CARD_TITLE#</h3> ...
Post a Comment
Read more