Friday, March 28, 2008

Dynamic Breadcrumb in APEX

I got a question during the training how to create a dynamic breadbrumb. If you don't know what a breadcrumb is, it looks like this:

Breadcrumbs are nice to have a hierarchical navigation view or a visual flow how you came to that page. In Oracle Application Express breadcrumbs are rather static. You specify for which page the breadcrumb counts and if it has a parent. It's not "out-of-the-box" to make it more dynamic, so I made a quick example to show how you can create a dynamic breadcrumb.

In my example you've three different pages. The request was if you go to page 3, it should know from which page you came, so you can click the breadcrumb to go back to the page you came from. In my case Page 1 or Page 2.

You can use different breadcrumbs which you show based on a condition, but that's not really dynamic. So let's try to make it more dynamic!

Create 3 pages and call them: Master 1, Master 2 and Child


On the Master Pages add a Submit button to the Child Page. Also add a breadcrumb on all pages like you normally would do.

Do you see you have a problem? For the Child breadcrumb you need to specify a master, but you've two masters! So how to get around this?

Create two Application Items: AI_PARENT_PAGE, AI_PARENT_PAGE_NAME
(in the screenshot I've one more, but in this example you don't need it)


On the Master Pages, in the Branch for the Submit button, specify that it need to go to Page 3 and give the Application Items the value of the master page you're on. On the screenshot in my case Page 1 (Master 1).

Page 2 would be the same expect from the last line where you would have 2, Master 2.

In the breadbrumb you would reference the Application Items instead of the fixed page number and page name. Change the original breadcrumb for Master 1 to:


The result will be a dynamic breadcrumb!
You can download the example application which shows the feature here.

I thought it might be useful for others too, hope it helps some of you.

18 comments:

Anonymous said...

Dimitri,

it is not possible to import the file f126.

reason : if I press on "here"the file is shown within internet explorer. and with copy/paste it can not realize an adequate import-file.

Leo

Dimitri Gielis said...

Hi Leo,

Right click on the file and you should be able to download it as a file.

Thanks,
Dimitri

Anonymous said...

Dimitri,

silly me !

thanks.

Leo

Anonymous said...

Thanks for tip :)

Anonymous said...

Thanks for this it proved very helpful for my current app. One thing missing was the mention of a before header page process on the initial page to specify the name there. If you submit on Master 2 then change to Master 1 on the breadcrumbs it still says it is Master 2 without the process.

Dird

Nieruchomości said...

Dimitri, would you have a solution for two masters on diffrent hierarchy levels?

Thanks,

Art

Augie Reis said...

One word - Awesome. saved me so much time. worked like a charm. My page was even more complicated in that it could be called by numerous pages from numerous heirarchy levels but I was able to use your logic as a starting point and customize it to my needs.
Thanks Again

Anonymous said...

This is no longer possible in APEX 4.0

Gene said...

I was able to port this into a 4.0 app without problem using the button's action when button clicked properties to set these app items.

Can this be done from an interactive report item that is being linked to another page? I can't identify a propoerty to do this on the Link tab

Gene said...

I played with this a little longer and answered my own question - it may not be pretty and I would still like to hear your comments

For both pages I added 2 computations at the page level
First Computation
BC_PARENT_PAGE_NAME as a static assignment- before header - computation (static) of "Master 1"

Second Computation
BC_PARENT_PAGE_NUMBER as a static assignment- before header - computation (static) of "1"

For the second page it was "Master 2" and "2"

Thank you - this worked well

Gene

Gene said...

This worked very well for two layers of tabs - is there a simple way to turn this into multiple layers such that it can follow - page 1 going to page 1.1 going to 1.1.1 etc

Anonymous said...

Hi. This really is a great example. How to expand the breadcrumbs to 3 levels of navigation. i.e., Page1 leads to page2, page2 in turn leads to page3. Page2 should display page1 as the breadcrumb. page3 should display page1 and page2 as the breadcrumb. Is there a way to achieve this?

Dimitri Gielis said...

sure, you could use collections or application items for example

Unknown said...

i am not able to understand the dynamic action could you please explain clearly.

Anonymous said...

Very helpful! Saved me a lot of headache.

Anwar

Anonymous said...

How to pass those parameters in SQL query

Anonymous said...

Still valid today :-) Good work!

Anonymous said...

Thank you!