Tuesday, 20 August 2013

Oracle APEX 4.2 - Creating a modal window

One of the many really exciting things to be added to APEX in version 4.1 were the jQuery 1.6.2 and jQuery UI 1.8.14 JavaScript libraries. Then in version 4.2 they upped the jQuery version to 1.7.1,the  jQuery UI to 1.8.22, and added jQuery Mobile - 1.1.1 RC1 JavaScript libraries.

So I thought I'd have a play.....In this blog I wanted to have a go at creating a modal window and calling it from a report - a live demo of this working can be seen at http://apex.oracle.com/pls/apex/f?p=35936:2

First of all I created a new page with an interactive report using the following query:

On the same page I then created a HTML region called "Employee Details" which has a display point of 'After Header'. Once created I edited the attributes of the region as follows:

The Static ID is set to uniquely identify the region when the empDetails function is called (see below) and  the Region Attributes are set to style=“display:none;” so the region does not display when the page is rendered.Next I created 'Display Only' items on that region for the following: empno, ename,job,hiredate,sal.

Now comes the fun part - I added the following Javascript function in the Page attributes 'Function and Global Variable Declaration' section

To call this Javascript function I added a 'Column Link' to the EMPNO column.  The 'Target to URL' needs setting and the following added:


into the URL field as shown below:

So this means that when the user clicks on one of the EMPNO values in the report the Javascript function empDetails() will be called and the value of the EMPNO passed into it. If we now look at what the function is doing we will see first of all it uses the $s function to set the P2_EMPNO item to the value of the jsEmpno variable ie the EMPNO the user clicks on in the application.

Next the jQuery function is called and it picks up the region's Static Id value (employeeDetails in this example) and calls dialog method. The parameters I'm passing in sets the behaviour and size of the dialog box. When the user closes the box the focus is passed back to the element that opened it in the first place.
If you try running the page at the moment and click on an employee's EMPNO the modal window displays as follows:

As you can see only the EMPNO field is populated.To pick up all the other enployee's details a dynamic action is added on the P2_EMPNO item. The dynamic action fires when the P2_EMPNO is changed. This then sets the items values based on a SQL query. The screen shots below show the dynamic action once it has been created:

The SQL that I used to pick up the values can be seen by clicking on the Edit pencil icon:

Once the dynamic action has been correctly created if you now click on an EMPNO off the report you will see that the dialog box displays with the employee's details:

No comments:

Post a Comment