Preview Button - View Print Dialogue in Oracle Apex

When building applications in Oracle APEX, you often want to let users print a specific region on the page — for example, a report or invoice — with just a click of a button. But sometimes, the print dialog opens in a new tab or window, disrupting the user experience.

In this post, I’ll show you a simple and effective way to create a Preview (Print) button that prints a specific region on the same page, without opening a new browser tab or window.

Step 1: Assign a Static ID to Your Region

1. First, assign a Static ID to the region you want to print.
2. Go to your region’s Attributes.
3. Find the Static ID property.
4. Enter a unique name, for example: printRegion.

This Static ID allows us to easily reference the region in JavaScript.

Step 2: Create the JavaScript Function to Print the Region

Add this JavaScript function to your page (you can place it in the Function and Global Variable Declaration section of your page):

javascript

function printRegionById(regionId) {
    var originalContents = document.body.innerHTML;
    var printContents = document.getElementById(regionId).innerHTML;
    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
    location.reload(); // Optional: reload page to restore any JS and interactivity
}

1. What this function does:
2. It saves the current page content.
3. Replaces the page content with only the region content.
4. Opens the browser print dialog.
5. Restores the original page content.
6. Reloads the page to reset JavaScript and interactive components.

Step 3: Add a Button and Dynamic Action to Call the Print Function

1. Add a button to your page region and name it PREVIEW (or whatever you prefer).
2. Create a Dynamic Action on the button’s Click event.
3. Set the True Action to Execute JavaScript Code and enter:

javascript

printRegionById('printRegion');

This will trigger the print function targeting the region with the Static ID printRegion.

Result:

Clicking the PREVIEW button will open the Print dialog for just that region, on the same page, without opening a new tab or window.

Notes & Tips:

Using location.reload() after printing helps restore your page’s interactivity, especially if your page uses a lot of dynamic content or plugins.

If your region contains complex interactive content, test carefully as the content is temporarily replaced during printing.

For better print styling, use CSS with @media print rules targeting your region.

Conclusion

This simple technique enhances user experience by allowing clean, focused printing of any Oracle APEX region without new tabs opening. It’s great for invoices, reports, or any printable content.

IN short :

Give a Static ID in the region :  printRegion

Function and Global Variable :

function printRegionById(regionId) {
    var originalContents = document.body.innerHTML;
    var printContents = document.getElementById(regionId).innerHTML;

    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
    location.reload(); // Optional: reload the page to restore any JS
}

Dynamic Action JS code on Click event of the Button:

printRegionById('printRegion');

ADD CSS  to omit PREVIEW AND EXIT BUTTONS.

 @media print {
 #previewButton {
    display: none !important;
  }
  #exit {
    display: none !important;
  }
}

to preview without PREVIEW & EXIT buttons.

must add STATIC ID TO preview and exit button as previewButton and exit respectively.