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
