Relocate APEX Interactive Report Loading Image

If you are in the situation where you have either deviated from the standard APEX theme, or have added an adjustments to your page header, you may have noticed that the AJAX loading image for the interactive report can get covered or simply look out of place. Using some jQuery and CSS adjustments, we can relocate the loading image to a position relative to the report that is being used.
The goal here is to define a dynamic position by re-locating the loading image relative to the interactive report.

Disclaimer: This method is dependent on your theme and css files used. Your mileage may vary.

The default location of the loading image is in the top middle of the page. This is done by referencing a SPAN item by ID (apexir_LOADER; which contains the loading image) and applying an absolute position to the element.
In the generated interactive reports region, the loader is located last in the returned HTML. In order to allow the image to be generated relative to the top of the region, we need to make the position RELATIVE to the container object. Because the image is generated at the bottom, moving the region to a better higher location allows it to flow with the top of the report.

// Change the location of the SPAN object
$("#apexir_LOADER").insertAfter("#apexir_TOOLBAR_OPEN");

By setting the loader position to “relative”, the location coordinates are now relative to the report container. This allows adjustment of left and top positions to work with the respective theme.

//Show image for demonstration purposes
$("#apexir_LOADER").css({"position":"relative", "left":"10px", "top":"10px", "height":"0px"});

For the demonstration code above, the following code is used:

Top of Region

  <script>
  //Change the location of the SPAN object to be inside the same container as the report table
    $("#apexir_LOADER").insertBefore("#apexir_TOOLBAR");
  //Container for the loading image - place in the middle of the container region at the top with no height
    $("#apexir_LOADER").css({"position":"relative", "left":"50%", "top":"0px", "height":"0px"});
  //Because the container is in the middle, center the loading image, shifting the top as needed
    $("#apexir_LOADER img").css({"position":"absolute", "height":"4px", "width":"200px", "left":"-100px", "top":"-8px"});
  //Change the default loading images to /i/htmldb/icons/loading-gray.gif
    $("#apexir_LOADER img").attr("src",#IMAGE_PREFIX#+"htmldb/icons/loading-gray.gif");
  </script>
  

Right of Search Bar

  <script>
  //Change the location of the SPAN object to be inside the same container as the report table
  // insert AFTER the tool bar DIV 
    $("#apexir_LOADER").insertAfter("#apexir_TOOLBAR");
  //Place the image to the RIGHT of the SEARCH BAR
    $("#apexir_LOADER").css({"position":"relative", "left":"10px", "top":"10px", "height":"0px"});
  //Undo any changes that may have been done to the image itself
    $("#apexir_LOADER img").css({"position":"", "height":"", "width":"", "left":"", "top":""});
  //Change the default loading images to /i/htmldb/icons/loading-gray.gif
    $("#apexir_LOADER img").attr("src",#IMAGE_PREFIX#+"htmldb/icons/loading-gray.gif");
  </script>
  


Putting it all together

Create a region either on the page with the interactive report, or on Page 0 with the code outlined below. I used jQuery to set the CSS in order to use conditional logic for when the SEARCH BAR is not included on an interactive report. This could be done by setting the styles directly, but the goal here was to have one script work for interactive reports with and without the query bar.

If you are using a template that has a 100% page width container, the element will wrap. You can then set an offset and float the region to the right (as shown below), allowing it to follow the placement of the region on the page. If using a template that does not have have a search bar with 100% width, letting the image appear normally to the right also useful.

The spacing in this script is designed for Theme 26 in APEX 4.2.3. The query bar is also full width of the region, so having the query bar float to the right allows the image to show without overlap. Adjustment may be needed for other themes.

Demonstration Oracle APEX
Demonstration Enkitec

<!-- For Theme 26 in apex 4.2.3 -->
<script>
  // Test to see if the "Search Bar" has been disabled
  if ($("#apexir_TOOLBAR").html()=="")
  { // there is NO SEARCH BAR
    // Add a thin version of the image before the report where the tool bar would be
    // Change the location of the SPAN 
    $("#apexir_LOADER").insertBefore("#apexir_TOOLBAR");
    // set the SPAN to be before the empty toolbar div with a height of 0px
    $("#apexir_LOADER").css({"position":"relative", "left":"50%", "top":"0px", "height":"0px"});
    // alter the image to make it smaller for the space alotted
    // to center, move LEFT half of the image width
    $("#apexir_LOADER img").css({"position":"absolute","height":"4px","width":"200px","left":"-100px","top":"-6px"});
  }
  else
  { //There is a tool bar
    //Place the image to the RIGHT of the SEARCH BAR
    $("#apexir_LOADER").css({"position":"relative", "float":"right", "left":"-10px", "top":"20px", "height":"0px"});
    // Change the location of the SPAN object
    $("#apexir_LOADER").insertBefore("#apexir_TOOLBAR_OPEN");
  }
  //Show image for demonstration purposes
  // only for testing // $("#apexir_LOADER").css({"display":"inline"});
  //Change the default loading images to /I/htmldb/icons/loading-gray.gif
  $("#apexir_LOADER img").attr("src",#IMAGE_PREFIX#+"htmldb/icons/loading-gray.gif");
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *