My little world of sharing

Feb01

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.

File location

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.

Edit page

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.

Main Template

 

 

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 –

Anchor Code

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 -

JavaScript

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 –

CSS CODE

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

Page with link

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.

8 Comments

  1. cstmic

    Hi,
    I tried to implement your solution with fancybox. When I call the target page I get a blank screen.
    Any help?
    Thanks in advance
    km

    PS. This is an excellent idea!!!

  2. cstmic

    Hi,
    I tried to implement your solution with fancybox. When I call the target page I get a blank screen.
    Any help?
    Thanks in advance
    km

    Apex 4.1
    ORCL 11.2.0.4
    Crome

    PS. This is an excellent idea!!!

  3. tajuddin

    Could you post your code here to check what are you doing wrong? Are you using link in report or in page item?

    1. cstmic

      Hi,
      my page 1001 contains an interactive report region and a form region.
      From form region i open page 1007 with detail info on resource table.
      My page 1007 appears blank.

      I hope is clear
      Best Regards
      km

      My steps:

      1. i created dir fancybox under my virtual image dir (…\images\fancybox)
      and i copied fancybox.png, jquery.fancybox-1.3.4.css, jquery.fancybox-1.3.4.pack.js
      2. i create a new page template as copy my page template and modified this

      #TITLE#

      #HEAD#

      ———————————————————————————————————-
      3. added javascript on page header and footer, header text session
      ————-

      $(document).ready(function () {

      $(“#resourceLink”).fancybox({
      ‘width’ : ‘60%’,
      ‘height’ : ‘70%’,
      ‘autoScale’ : true,
      ‘transitionIn’ : 200,
      ‘transitionOut’ : 200,
      ‘type’ : ‘iframe’
      });
      });

      a#resourceLink{
      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#resourceLink:hover
      {
      color:#000
      }

      ————————-
      4. added link on region header and footer, region footer session
      ————
      Resource Detail
      ———–

      1. tajuddin

        Hi again,
        I can see you have missed something in your code. First of all you have not included jquery.js file along with other js files. If you don’t have one then download from http://code.jquery.com/jquery-1.7.1.min.js site.

        In the javascript function seems to be ok. In the js function you want to set fancybox style for resourceLink but you did not define the id in the anchor –

        <a href="f?p=&APP_ID.:2:&SESSION.::&DEBUG.:" id="resourceLink" >Resource Details

        If you are using firefox, it is a bit hard to find any javascript error unless you install third party plugin like firebug etc. Try in Internet Explorer and if there is any javascript error it displays in the status bar with yellow exclamation icon. Click on the icon to view details of the error.

        Good luck.

        Cheers,
        Tajuddin

  4. scott

    Hi,
    Can you please take a look at my steps ive followed your instruction but it doesnt work for me in paex 4.2…regards

  5. jeff

    Hello,

    Thanks for your fancybox tutorial. I have successfully implement fancybox using your instruction. I have a question that I hope you can answer. I created a form using the form wizard. Page 360 in my case. It inserts a record into table “EX”. I set it up so that this form is loaded into the fancybox iframe. It works fine.

    Now I want to close the fancybox and and add the item that was created on page 360 to the parent page when the insert was successful but do not close the fancybox when the insert was not succesful.

    Do you know what process and where to create it that would check for the succesful insert and close the fancybox? I looked around and could not find anythong that helped understand how to do it.

    Thanks
    Jeff

    1. tajuddin

      Hi Jeff,
      You can refresh the parent page on fancybox close and disable overlay click if you want to, here is an example –

      $(document).ready(function () {

      $("#assetLink").fancybox({
      'width' : '60%',
      'height' : '70%',
      'autoScale' : true,
      'transitionIn' : 200,
      'transitionOut' : 200,
      'type' : 'iframe',
      'hideOnOverlayClick': false,
      'onClosed' : function() {
      parent.location.reload(true);
      }
      });
      });

      Hope this helps.

      Cheers,
      Tajuddin

Leave a Comment

Your email address will not be published. Required fields are marked *