Using Fancybox in Oracle APEX

In Oracle APEX, showing master-details, or drilldown data can be achieved by using two pages: one for the master data, and using a link to pass the key value to the opening page.  Depends on the volume of presenting data , the opening page can be:
A lot of data: a complete page
Moderate amount of data: a popup page
Just a couple of data: a Fancybox page
In here I show these three page types and you can compare which one is best-fit for your situation.

Tables: EBA_DEMO_MD_DEPT and EBA_DEMO_MD_EMP (the data is the same as in tables DEPT and EMP in schema SCOTT)

Master Page
Department Name with employee count for each department.  The opening page is the list of employee for each department, which is invoked from the link in the employee count column.

SQL Query:
select A.DEPTNO
     , initcap(A.DNAME) DNAME
     , initcap(A.LOC) LOC
     , B.EMP_COUNT
  from EBA_DEMO_MD_DEPT A
     , (SELECT COUNT(*) EMP_COUNT
             , DEPTNO 
          FROM EBA_DEMO_MD_EMP
         GROUP BY DEPTNO) B
 where A.DEPTNO=B.DEPTNO
ORDER BY DNAME



Opening Page
Employees list for a given department. This page contains a hidden item P11_DEPTNO
SQL Query:
SELECT A.EMPNO 
     , initcap(A.ENAME) ENAME
     , initcap(A.JOB) JOB
     , initcap(B.ENAME) MANAGER
     , A.HIREDATE 
     , A.SAL 
     , A.COMM
FROM EBA_DEMO_MD_EMP A
   , EBA_DEMO_MD_EMP B
where A.DEPTNO=:P11_DEPTNO
  AND A.MGR=B.EMPNO(+)
order by ENAME

Two-Page Setup

Using Column Link is the most standard way of linking two pages.  In our case, the column EMP_COUNT in the master page is linked to the opening page by passing the DEPTNO value.

The opening page is a standard, stand-alone page.

Popup Page Setup

To make this opening page as a popup (a new browser window), first you have to change the page template of the opening page to "Popup".

Next, the column link is changed to URL, and using the built-in Javascript function popUp2([link], [width],[height]) to construct the URL of the opening page:  

javascript:popUp2('f?p=&APP_ID.:11:&SESSION.::&DEBUG.::P11_DEPTNO:#DEPTNO#', 600, 300)

As as result, when you click the Emp. Count for a department, a popup window of the opening page will be created. 

FancyBox Page Setup

To setup Fancybox 2, you need to add the javascript file and css to the master page:

JavaScript File URLs: jquery.fancybox.js or jquery.fancybox.pack.js

CSS File URLS: jquery.fancybox.css

You can easily add these files in your environment if you host your own APEX site and it is setup with APEX connector and Servlet container.

Alternatively, you can add links for these files from external CDN under HTML Header by:

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" media="screen" />

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>

Write a piece of Javascript code to setup Fancybox for any object using the class called "fancybox". The most important parameter is the type: 'ajax'.   You can use other parameters as specified in here.

<script type="text/javascript">

$(document).ready(function() {

  $('.fancybox').fancybox({

    maxWidth    : 600,

    maxHeight   : 300,

    fitToView   : false,

    autoSize    : false,

    closeClick  : false,

    openEffect  : 'elastic',

    closeEffect : 'fade',

    scrolling   : true,

    type        : 'ajax'

  });

});

</script>

Finally, you just need to add the Link Attribute class="fancybox" for the column link in the master page.

After the setup has done, when you click the Emp. Count link in the master page, the Fancybox popup will be shown.

Demo

Popup

Fancybox