1. Overview
This document will explain the detailed process involved in Using Java Script, Oracle Apex’s print option can be customized. This special printing option includes several pagination options, a customized page format, and the ability to adjust the paper size and major point Removed the header, a button for the region, and a side navigation bar while using JavaScript and etc.
2. Technologies and Tools Used
The following technologies have been used to achieve the same.
- Oracle APEX
- JavaScript
3. Use Case
customize print option in Oracle Apex using Java Script:
When the custom print option is chosen in the adjustable menu, we must print the invoice at that time. We can then simply print the various formats by adjusting the page size, layout, and scale. And major point Removed the header, button for the region, and side navigation bar while using the JavaScript
4. Architecture
- a) Setting up Basic Apex Interactive Report:-
make a new page, then Make a department form or report page so that we can handle all of the records. then Establish a button choosing the hot option and setting the icon with the print option button.
- b) Add DynamicAction on Print Option:–
Put together a dynamic action and event. Choose the “Click” option, then “Button” as the selection type, and then “Print” as the button name. And True Action Select by Execute JavaScript Code
C)The code then continues with comments indicating different sections of the code:–
Hide: This section shows a series of statements to hide certain elements in the web page:
The navigation bar list with the ID “t_Header” is hidden.
The navigation menu with the ID “t_Body_nav” is hidden.
The breadcrumb element with the ID “t_Body_title” is hidden.
The content offset element with the ID “t_Body_content_offset” is hidden.
The elements with the class “apex-edit-page” (likely report column edit links) are hidden.
The elements with the class “t-Report-links” (likely report download links) are hidden.
The elements with the class “t-Button” (likely buttons) are hidden.
The elements with the class “t-Footer” (likely footer elements) are hidden.
Browser Print: This line executes the window.print() function, which triggers the browser’s print dialog. It allows the user to print the content of the page.
Show: This section shows a series of statements to show the elements that were previously hidden:
The navigation bar list with the ID “t_Header” is shown.
The navigation menu with the ID “t_Body_nav” is shown.
The breadcrumb element with the ID “t_Body_title” is shown.
The content offset element with the ID “t_Body_content_offset” is shown.
The elements with the class “apex-edit-page” (likely report column edit links) are shown.
The elements with the class “t-Report-links” (likely report download links) are shown.
The elements with the class “t-Button” (likely buttons) are shown.
The elements with the class “t-Footer” (likely footer elements) are shown.
Expand Left Navigation Bar If It Was Colapsed: Finally, the code checks the value of the navCollapsed variable. If it was previously set to 1 (indicating that the navigation bar was collapsed), it simulates another click event on the element with the ID “t_Button_navControl.” This click event likely expands the left navigation bar to its original state.
Please note that the functionality of this code depends on the presence and behavior of specific HTML elements with the given IDs and CSS classes.
Without a complete understanding of the surrounding code and the structure of the web page, it is challenging to provide a full analysis of its intended purpose.
Additionally, the setTimeout function is not used correctly in the provided code snippet. If you intend to use it for a specific purpose, it should be modified accordingly.
Code:-
var navCollapsed = 0;
if ($(“body”).hasClass(“js-navExpanded”)) {
$(“#t_Button_navControl”).click();
navCollapsed = 1;
}
setTimeout(function() {
//////// Hide ////////
// Hide Navigation Bar List
$(“#t_Header”).hide();
// Hide Navigation Menu
$(“#t_Body_nav”).hide();
// Hide Breadcrumb
$(“#t_Body_title”).hide();
// Hide Content Offset
$(“#t_Body_content_offset”).hide();
// Hide Report Column Edit Link
$(“.apex-edit-page”).hide();
// Hide Report Download Links
$(“.t-Report-links”).hide();
// Hide Buttons
$(“.t-Button”).hide();
// Hide Footer
$(“.t-Footer”).hide();
//////// Browser Print ////////
window.print();
//////// Show ////////
// Show Navigation Bar List
$(“#t_Header”).show();
// Show Navigation Menu
$(“#t_Body_nav”).show();
// Show Breadcrumb
$(“#t_Body_title”).show();
// Show Content Offset
$(“#t_Body_content_offset”).show();
// Show Report Column Edit Link
$(“.apex-edit-page”).show();
// Show Report Download Links
$(“.t-Report-links”).show();
// Show Buttons
$(“.t-Button”).show();
// Show Footer
$(“.t-Footer”).show();
//// Expand Left Navigation Bar If It Was Collapsed ////
if (navCollapsed == 1) {
$(“#t_Button_navControl”).click();
}
}, 3000);
5. Conclusion
When compared to a standard printout, our printout utilizing Java Script removes borders and side navigation to make it simple to print specific pages.
By using the above Screenshots:
