Opening a new Tab

Every now and then, I need to have a control on my page open a new tab. And for anchors, that’s easy–just stick a target=”_blank” on the anchor tab and get on with your life. Unfortunately, you very rarely build the anchor tabs in APEX; the engine handles all of that for you. And sometimes, it just doesn’t do what you expect.

In one of my current projects, I needed a button in the sidebar which opened a new tab. I created a region button, set its Action to “Redirect to URL” and the URL Target to what I needed; in order to get the new tab functionality, I added the good old target=”_blank” to the Button Attributes (our button templates are actually anchor tabs around CSS-styled spans).

Unfortunately, this…didn’t work. Chrome didn’t open a new tab; it just took over the existing one. Firefox opened a blank tab, but didn’t go anywhere. And IE opened a new tab with an error message (“Internet Explorer cannot display the webpage”). Not good.

At this point, I looked at what the engine had generated. The anchor tag had this for its HREF:

javascript:apex.navigation.redirect(...);

(where the ellipses was my desired URL). After some digging around–and careful testing in all three browsers–I found that I needed to set the URL target to this:

javascript:var x=window.open('...','_blank');

(Setting the Button Attributes isn’t necessary with this solution.) The part that took me the longest to figure–and the reason I’m writing this post–is the “var x=” section. Without it, all three browsers will happily open a new window, but Firefox went a step further, sending the original browser page to one that says, simply, “[object Window]”. This seems like a rather odd decision on the part of Firefox; I really struggle to picture an instance where this would be viewed as “the right thing to do”.

Regardless, now I know. And knowing is half the battle.

Comments

  1. Frank Luke says

    Thank you for posting this. It is very close to what I need. How would I make it open a new tab if the action selected was “Redirect to Page in this Application”?

    • says

      Frank–good question. You could probably hack something in with an “on click” dynamic action, but that’s probably more of a headache than you want. (That, and no one else would know how you did it!) I’d suggest changing the action to “Redirect to URL”, us the above technique, and set the URL to f?p=&APP_ID.: :&APP_SESSION. (plus any page items you need to set).

      However, I’d be a little cautious, since APEX doesn’t generally work well having the same application open in multiple tabs. It’s very easy for your session to get confused; you may find yourself in situations where edits from one tab affect an item open in the other. Ultimately, you know your app and your users–but I wouldn’t feel I was doing my job if I didn’t throw out that warning.

      • Frank Luke says

        The caution was more than justified. Weird things are happening. My graphs in the first tab sometimes go blank when I open the second tab (which is read only, more information about the graph the user was just looking at).

        • says

          That’s…not what I was expecting. Opening a link in a new tab shouldn’t cause the opening page to redraw anything. I’m not sure what could be causing what you’re seeing.

          Are you using one of the standard themes, or one of your own? Any chance you could set up an example app on apex.oracle.com and let me look into it?

        • says

          Found it! With some sloppy copy pasting, I had wound up with an actual session id instead of &APP_SESSION. in the URL target. So it works now. I just have to decide if this is the best way for the users to see the information with the caveats you’ve given. Thank you so much!

          • says

            Congratulations! And, if it’s truly a read-only page and doesn’t have navigation–other than a close window link, perhaps–you shouldn’t run into any issues with the session state getting confused. The problems I mentioned above typically only come up when a user is trying to be over-efficient and edit two different items at the same time (or similar).

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>