Implementing fancybox in oracle APEX application

Recently in one of my application I have implemented Fancybox to give better user experience. I guess this is quite useful when you have too many items in one page and user has to scroll down to view details in the page. This will give better user experience hiding extra stuff from the page and make it available on demand or request.

I wanted to implement this functionality because in my relational database I have a master table which holds most of the common fields and I have created some child tables for store extra information for different types of assets e.g. furniture, building, structure etc. Instead of sending user to different page to enter additional information, I wanted to give a bit flexibility so that user will be in the same page and they can enter details of specific asset information in fancy popup window if they want to. It will also give a bit better experience in terms of page load as it will load only necessary fields. The page looks like this –

First of all, you have to download the script from http://fancybox.net and Once you downloaded zip file, extract it where ever the location you like.

Copy only these three files – jquery.fancybox-1.3.4.css,  jquery.fancybox-1.3.4.pack.js,  fancybox.png and place into your APEX application image directory. Assuming you already have jQuery js file included in the template if not then include the jQuery js file as well. Here is my APEX image directory, I have used theme folder to store this files and make sure all files in the same location so that css file can find the image for fancybox style.

Now, edit the page template to include these js and css files. I have used global template to load those files as I want to use them from various pages however you can load or call this files from specific page. Click on the edit page link in the page where you want to implement this functionality.

Include the following script in the head section of the template, see the image below.

<script src="#IMAGE_PREFIX#themes/calm/jquery-1.4.2.js" type="text/javascript"></script>
<script src="#IMAGE_PREFIX#themes/calm/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<link rel="stylesheet" href="#IMAGE_PREFIX#themes/calm/jquery.fancybox-1.3.4.css" type="text/css" />

Here is the screen shot.

Once you done with the template, click on apply changes button. Now include the anchor into the page, I wanted to include this in facility details page. I have used dynamic parameters in the link to set the value dynamically.

&APP_ID. – get the application id

&P3_DEST_PAGE. – this is the page number that I want to send, get this value from the page item

&SESSION. and &DEBUG. – include the session and debug in the url

Set :P5_AST_ID value with &P3_AST_ID value.

<a id="assetLink" href="f?p=&APP_ID.:&P3_DEST_PAGE.:&SESSION.::&DEBUG.::P5_AST_ID:&P3_AST_ID.">Building Details</a>

Here is the screen shot –

Include the following javascript in the header section of this region.

$(document).ready(function () {

$("#assetLink").fancybox({
				'width'			: '60%',
				'height'		: '70%',
				'autoScale'		: true,
				'transitionIn'		: 200,
				'transitionOut'	        : 200,
				'type'			: 'iframe'
			});
 });

</script>

Here is the screen capture -

Well, now it is time for testing. Click on apply changes and see if the fancybox pop-up. So far so good. Now this anchor link does not looking so good for me, I want to give it like a button style look and feel. I have wrote the style for this anchor and placed this into the head section. Here is the style code –

<style type="text/css">
a#assetLink{
border: 1px solid gray;
text-decoration:none;
display:block;
line-height:14px;
padding: 3px;
width:120px;
text-align:center;
float:right;
background-color:#E1842A;
color:#fff
}
a#assetLink:hover
{
color:#000
}

</style>

The screen capture –

This is looking better now, here is the screen looks like –

Now, I can see it is all working good but I do not want to display the link when entering new record. So I have to write some javascript to do this –

// get the value of the primary key
var dl = $('#P3_FAC_ID').val();
if (dl.length===0)
{
      $('#assetLink').hide();
}

Get the value of the primary key in the page and set the visibility of the link accordingly.

Let me know if you have any problem with instruction and implement.