Anchoring Links in APEX 18.1 Page Designer

Matt Mulvaney Aug 16, 2018 4:43:12 PM

APEX 18.1 page designer now includes a new “Advanced” setting called Anchor in the Link Builder Modal.

APEX 18.1 Page Designer

The Link Builder Model can be accessed in several places, but most noticeably in the Target Section of Template Options.

Link builder model-1

So what’s this all about, and how to use it? Unfortunately, unlike in Page Designer there’s no in-line help in these Modals Dialogs. So let me explain…

Simply put, the Anchor attribute allows the page to focus on a specific Static ID on the target page.

In my example, I’m building a button which navigates to page 3 of my application. On page 3 I have 24 regions stacked vertically i.e. enough for the vertical scrollbar to appear – else it would be difficult to know if the Anchored item was actually focussed. I also have assigned Region 15 to have a static ID of Region15.

On my Link Builder, I set the Advanced > Anchor setting to Region15. Please be aware, this needs to be plain text, this is not a JQuery selector so you can’t use a notation like #Region15 or .myClass etc.

When I click on my button, not only does it navigate to page 3 but also super-fast scrolls to Region 15.

Link builder splitter demo

This also works when the target is a modal dialog.

Anchor links

It also works when the target is within a Region Display Selector (RDS).

Anchoring Links in APEX 18.1 Page Designer

However, it only works if Show All is activated within the RDS. If the Show All is removed, it tries and fails to focus on the Region leaving the Page partially scrolled.

Anchor links (1)

Now we’ve worked out how to provide an anchor link using a button; how can we provide an anchor link using html.
Again this is straightforward, you just need to include #AnchorLink on the end of the URL e.g.

f?p=88563:3:9347324600508::::P3_PARAMETER:MY_VALUE#Region15

In my URL example above the Anchor Link, together with the # sign, is placed after the ItemValues. Click this link to read more about the components of the URL syntax… which coincidentally also contains an anchor link.

Address bar

See below to see a standard URL with an anchor link

Anchor links (2)

And also working as a link within an Interactive Report

Anchor link (3)

If you would live to test drive my application, you can do so here.

If you would like to find out more information speak to one of our Oracle APEX experts, get in touch through enquiries@dsp.co.uk or book a meeting...

Book a Meeting


 

Author: Matt Mulvaney

Job Title: Senior Oracle APEX Development Consultant

Bio: Matt is an experienced APEX solution designer having designed numerous complex systems using a broad range of Oracle Technologies. Building on his previous experience of Oracle Forms & PL/SQL, he is entirely focused on providing functionally rich APEX solutions. Matt promotes APEX as a software platform and openly shares best practises, techniques & approaches. Matt has a passion for excellence and enjoys producing high quality software solutions which provide a real business benefit.