Wednesday, February 18, 2009

Multiple breadcrumbs on APEX page

Oracle Application Express (APEX) provides breadcrumb functionality on a page for smooth navigation around your web application. This is good but, It has one limitation. One page can have only one breadcrumb. Whereas you may need more then one breadcrumb on a single page. Let's understand it by taking one example.

Consider following pages of your web application.
  1. Students Home - Home page for students
  2. Science Students - List of all students studying science
  3. Commerce Students - List of all students studying Commerce
  4. Student Details - Display all details of a student.

We are interested on page number 4. Here we are going to display details of a particular student. Now consider following flow in your application.
  • After visiting Science student page, One need detail of a particular science student. Your breadcrumb will be
Students Home -> Science Student -> Student Details
  • After visiting Commerce student page, One need detail of a particular Commerce student. Your breadcrumb will be
Students Home -> Commerce Student -> Student Details

Student Details page should have two different parent entries. This problem can have multiple solutions.
  1. Create two different "Student Details" page.
  2. Use application item and use it inside breadcrumb entry.
  3. Create multiple conditional breadcrumbs.
First alternative seems easy but, condition becomes worse in case of more parent pages.

Second alternative, well... we can say good but not best. You can create application level item and you can use it inside breadcrumb entry by this syntax

&F501_BC_DISP.
&F501_BC_RETURN.

But you may need to do extra stuffs on other pages to initialize these items.

I will explain you the third alternative.

Create Multiple Conditional Breadcrumbs

Well, The logic here is to create multiple report region which looks exactly like breadcrumb. And of course, We will provide link to report columns. We will created two different SQL report regions with following properties.
  • Region source : select 'Student Home','>' arrow1,'Science Student','>' arrow2,'Student Details' from dual;
  • Region template : breadcrumb region
  • Display point : It is generally what you select for your breadcrumb ( page template body 1. items below region content)
  • Heading type : None
  • Report template : Borderless.
Second Report is exactly same as Report 1 except report source.

select 'Student Home','>' arrow1,'Commerce Student','>' arrow2,'Student Details' from dual;

arrow1,arrwo2 are aliases given for separator. These are manually created breadcrumbs. By using APEX Views, You can create dynamic breadcrumbs as well. You can use following views to created dynamic breadcrumb.

APEX_APPLICATION_BREADCRUMBS and
APEX_APPLICATION_BC_ENTRIES

If you want me to provide dynamic breadcrumb, just put comment to this post.

If you run your page now. you can see two different breadcrumbs on your page exactly same what we expected. Now we are left with the branching of breadcrumb entries. We are actually seeing columns of report. We need to give link to column values in order to provide branching. Here we knows that,
  • 2nd entry of 1st breadcrumb will land to page number 2. and
  • 2nd entry of 2nd breadcrumb will land to page number 3
We can give link accordingly. In order to give link to the column:
  • Go to Report Attributes by clicking on "Report" link next to report region.
  • It will show you all the columns inside your report. Just edit respective column by clicking on edit link under column attribute.
  • Go to Link Tab and provide "Link Text" and set "Page" to respective page.

Everything works fine till here. But what is this? we are seeing 2 different breadcrumb. Will it not confuse to user? Of course, It will. That is why, we have to display it conditionally.

But when to display which breadcrumb?
Of Course, If user is coming from page 2 then 1st breadcrumb else 2nd breadcrumb.

But how to find previously visited page. Read Find Previously Visited Page in APEX. Once you get previously visited page, you can give condition accordingly.

3 comments:

Anusha said...

Can you provide information on how to do dynamic breacrumbs.

YHowe said...

Do you have a working sample that you can provide for dynamic breadcrumbs?

Erik Trip - Darwin IT Professionals said...

can you please provide me with the dynamic solution?