Introduction

In this blog post, I'm going to share a way to embed a page from another Oracle APEX application in the same workspace into your app, all without users even noticing they're switching applications. This means the navigation menu from the main app stays the same, and there's no need to log in again. After doing some research, I thought of using the URL region available in Oracle APEX. Honestly, even after 10 years of working with APEX, I hadn't used this region before. It might not be the perfect solution, but for me and my client's needs, it works perfectly without any issues. If you know any other ways to do this, I'd love to hear about them in the comments 😉

Prerequisites

• Access to an APEX Instance, of course ✅

• Application A ✅

• Application B, the one with the page you want to embed in Application A ✅

Let's get started!

First, log in to your APEX Workspace. Head over to Application A and create a new blank page. Next, add a URL Region to the “Full Width Content” slot. In the Attributes section of this region, enter the APEX URL of Application B along with the page you want to embed (e.g., f?p=USER-MANAGEMENT:2:&SESSION.).

Let's start the application and see what happens!

Oops, that doesn't look quite right 🤔

As you can see, we have two issues:

1. A new login screen pops up

2. The URL region isn't showing up in full width and height

Let's solve the first problem first.

First Problem: Authentication

To fix the login issue, APEX has a nice feature called "Session Sharing" that we can turn on easily. Jump over to Application B, go to Shared Components, and then find Authentication Schemes. Pick the Authentication Scheme you're using, scroll down to Session Sharing, set the Type to "Custom," and enter a Cookie Name (e.g. MY_SESSION).

Let's refresh the page in Application A with the URL Region and see how it looks now.

Oh, awesome... we've fixed the first problem! But it still doesn't look quite right, does it?
What we really want is for the URL Region to fill the full width and height, right?
And what's this? A second Header and Navigation Menu... okay, let's first figure out how we can display the region in full width and height.

Second Problem: The Width and Height of an iframe

To solve the second problem of showing the URL Region in full width and height, we can use the iFrame Attributes available in the URL Region settings. Just set the height and width attributes to "100%" so the iFrame fills the entire space. Also, set the frameborder attribute to "0" to get rid of any borders around the iFrame. Here's how you can set these attributes:

height="100%" width="100%" frameborder="0"

Let's refresh the page and check if everything looks the way we want it to:

Hmm, we've got the full width, but not the height. What's going on here?

If we inspect the page using the browser's Developer Tool, we'll notice a few containers holding the iFrame. The issue is that we need to adjust these containers to full height so the iFrame can stretch to fit them.

So, we'll need to add some CSS for t-body-fullContent, container, and row to set their height to 100%.
You can easily do this by using the Inline CSS Code Editor and entering the following CSS code:

.t-Body-fullContent {
    height: 100%;
}

.container {
    height: 100%;
}

.row {
    height: 100%;
}

Alright, let's refresh the page again and see how it looks now:

That looks much better, but we still have an issue with the navigation menu and header from Application B.

Third Problem: Second Header and Navigation

Last but not least, we need to fix the issue with the second header and navigation menu. This one's a bit tricky because we can't just fix it with CSS. To adjust an iFrame, we'll need some JavaScript. But don't worry, it's not too difficult! 😊

First, we need to assign an ID to the iFrame to make it easier to reference in our JavaScript code. To do this go again to the iFrame attributes and add e.g. id="myFrame".

Next, enter the following JavaScript in the "Execute when Page Loads" Code Editor:

const iframe = document.getElementById("myFrame");

iframe.addEventListener("load", () => {
    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    const style = iframeDoc.createElement("style");
    style.textContent = ".t-Header { display: none !important; }";
    iframeDoc.head.appendChild(style);
});

This JavaScript code snippet waits for the iframe to load, then adds a <style> to the iframe’s document to hide any .t-Header element. This way, the header is removed only within the iframe’s content.

Let's give it another try and refresh the page.

Yeah, that looks really awesome, doesn't it? 🌟

Conclusion

In conclusion, embedding a page from another Oracle APEX application using the URL Region is a practical way to keep the user experience smooth across applications in the same workspace. By tackling authentication with session sharing, adjusting the iFrame to fit fully, and using a bit of JavaScript to hide extra headers and navigation, you can build a unified and seamless application interface. While this method isn't flawless, it does a great job for users who want easy navigation without dealing with multiple logins or clunky interfaces. If you have other ideas or improvements, sharing them could make this solution even better!

References

• Oracle APEX URL Region