Posts Tagged ‘APEX’

Enhanced APEX Shuttle Item

April 28, 2009 34 comments

Recently I have been really, really busy building some internal applications for my company. All of them using Oracle and APEX of course. To satisfy some of application’s requirements, and just for usability sake, I had to tweek the default behavior of the APEX shuttle item. The reason was the initial LOV that populated the shuttle contained over 500 values. About 490+ too many as far as I was concerned. The users felt the same way. They complained that it was too hard to find what they were looking for, even though the list was in alphabetical order and I agreed. So, I decided to add the functionality to allow the user to constrain the values in left-hand side of the shuttle. Similar to the Popup LOVs with a filter option, but I wanted to use AJAX to accomplish it to avoid a page submit. After a bunch of playing around and optimization, here is what I came up with:
Username/Password: demo/demo

I was surprised that it was not that hard to accomplish and there are very few moving parts. All you need is a javascript function to make the AJAX call, an On Demand process to fetch only those values that meet the filter’s constraint and a way to trigger it.

How It Works.

As the user types in the textbox the shuttle automagically filters itself. I use an onKeyUp event on the textbox P10_SEARCH_BY to trigger the AJAX call.

onKeyUp="populateShuttle( this,'P10_SHUTTLE');"

So everytime a KeyUp event happens in that textbox, a call to the populateShuttle function happens. That function is responsible for making the AJAX call to the On-Demand Process, which fetches the appropriate values, and then parsing the results and repopulating the left hand side of the shuttle.

function populateShuttle(filter,shuttleName)
  var right = $x(shuttleName+"_RIGHT");

  for ( var i=0;i<right .length; i++ )
    right.options&#91;i&#93;.selected = true;

  var req = new htmldb_Get( null, 19903, 
                          'APPLICATION_PROCESS=populateShuttle', 0 );

  req.addParam( 'x01', $v(right) );
  req.addParam( 'x02', $v(filter) );

  var resp = eval(req.get());

  var left = $x(shuttleName+"_LEFT");

  if (resp)
    for ( var i=0; i<resp.length; i++ )
      left.options&#91;i&#93; = new Option(resp&#91;i&#93;.data, resp&#91;i&#93;.id);	

  req = null;

Although APEX treats the shuttle as a single element, it is in fact made up of many HTML elements, 10 images and 2 multiselect list boxes.  With a little poking around the HTML of a generated APEX page with a shuttle item on it, I was able to determine that the actual DOM names of the multiselect list boxes of a shuttle were <strong>[SHUTTLE_NAME]_LEFT and <strong>[SHUTTLE_NAME]_RIGHT</strong>.   How convenient.  Accessing the actual elements was then trivial.  I just used the APEX supplied function <strong>$x()</strong> function to get the elements.

The first thing I do is get the right textbox and loop over its values, selecting each one.  This is so when I fetch its value, I get all the elements in the list.  I need this information so when I fetch the values for the left hand side of the shuttle, based on the user's filter, I do NOT bring back any values that have already been moved to the right hand side of the shuttle.  In my example say you had already selected KING and moved him to the right.  Then you type a 'K' in the filter_by textbox, you will only get back CLARK and BLAKE even though KING also meets the constraint of containing a 'K'.
Next, I get the value of the right hand side of the shuttle and the value of the filter_by textbox, using the <strong>$v()</strong> function and send the values to the On Demand process via the APEX global variables <strong>g_x01</strong> and <strong>g_x02</strong>.

The On Demand process is just a simple PL/SQL block that is a query loop.

  l_selected long  := wwv_flow.g_x01;
  l_search long := wwv_flow.g_x02;
  for c in (
    select ename, empno, rownum r
      from emp
     where regexp_like( ename, nvl(l_search,ename), 'i' )
       and nvl(instr(':'||l_selected||':',':'||empno||':'),0)=0 )
    htp.prn( case when c.r&gt;1 then',' else null end ||
             '{ id: ' || c.empno ||
             ', data: "' || c.ename || '"}' );
  end loop;

It fetches all the values that match the filter

where regexp_like( ename, nvl(l_search,ename), 'i' )

but not those already be selected by the user.

and nvl(instr(':'||l_selected||':',':'||empno||':'),0)=0)

Now it’s just a simple process of looping over the rows, packaging them up and sending them back. I have become a big fan of JSON ( JavaScript Object Notation ) , so that how I am packaging up the payload to pass back. Basically, I’m making the results into a javascript array of objects. Each object has an id and data element. The payload look something like this

[{id: 7839, data: "KING"}{id: 7698, data: "BLAKE"} ... ]

This makes it super simple easy to work with once it gets back to the calling javascript function. All you need to do is apply an eval() on it and its transformed into a true javascript array of objects that can be easily looped over and referenced.

In one line of code, I call the On Demand process, getting back the JSON packed result and eval() it.

var resp = eval(req.get());

Now the variable resp is an Array of objects with two elements in each object, id and data. Looping over the values and populating the left hand side of the shuttle is trivial now.

  if (resp)
    for ( var i=0; i<resp.length; i++ )
      left.options[i] = new Option(resp[i].data, resp[i].id);

And there you have it. I hope I have shown that with some minor tweeks, you can extend the functionality of the base APEX items to be much more functional and user friendly. As always, comments ( good and bad ) are always welcome. Read more…

Categories: APEX, Oracle, PL/SQL, SQL Tags: , , , ,

Pipelined Functions

December 5, 2008 4 comments

Well, it’s been a quite while since I posted (I know, I’m slacking) so I thought I’d just quickly blog about what I just helped someone with yesterday. It required me to use a pipelined function. Not everyone has seen of them so I thought it may be interesting.

Pipelined functions allow you to basically select from a function rather than a database table.

A colleague of mine had to build an APEX report of opportunities. The report was to be constrained by a multiselect listbox of product ids. Show all opportunities that have ANY of the selected product ids. So far it sound pretty easy. The tricky part was how the product ids were stored in the opportunity table.

create table opportunity(
  name varchar2(100),
  product_ids varchar2(255)

The PRODUCT_IDS column was populated with a colon delimited list of all the products that were used in that opportunity. Now before you yell that that is probably not the best way to store that data and that a master-detail table relationship is probably the better way to go, I 100% agree. But unfortunately, when you inherit an application, you many times must make do with what the original developer put in place (and that is the case here).

We all know when you submit a multiselect listbox in APEX, it comes in as a colon delimited list of all the values that were selected. What we need to do is tokenize that selectlist string and compare each value against the table.

I came up with two possible solutions:

1. Build the query by hand.

Using apex_util.string_to_table() on the input, loop over all the values and manually build the report query by hand. 

  l_ids apex_application_global.vc_arr2;
  l_query varchar2(32767) := null;
  l_ids := apex_util.string_to_table( :p9_product_ids );
  for i in 1 .. l_ids.count loop
    l_query := l_query || <insert query here>;
    if i <> l_ids.count then
      l_query := l_query || ' union all ';
    end if';
  end loop;
  return l_query;

This would have worked just fine (besides having to run the query N times and union all them together).

But I like to use nifty, (and more optimized) options and so I implemented my other solution:

2. Use a pipelined function.

To use this, we need to create a type and a function that returns that type.

create or replace type myTableType as
table of varchar2(255)
create or replace
function to_myTableType( p_string varchar2 ) 
return myTableType PIPELINED is
  l_arr apex_application_global.vc_arr2;
  l_arr := apex_util.string_to_table( p_string );
  for i in 1 .. l_arr.count loop
    PIPE ROW( ':' || l_arr(i) || ':' );
  end loop;

Notice that the function is declared as PIPELINED in its declaration. Also notice the PIPE ROW() syntax in the loop. That is where the function returns multiple values as rows in a query. Its using the string_to_table() function to tokenize the string and then looping over the tokens, pipes the results out as rows. And finally, this function contains a return clause without returning anything. It had already returned multiple values in the PIPE ROW() line.

Now that we have this we can write a single, simple query in APEX that looks like this:

select, o.product_ids
  from opportunity o,
        table( to_myTableType( :p1_product_ids )) p
 where instr( ':' || o.product_ids || ':', p.COLUMN_VALUE ) > 0;

Check out a working version here:

Categories: APEX, Oracle, PL/SQL Tags: , ,

WebLogic Server and APEX

September 15, 2008 7 comments

A good friend and colleague of mine at Oracle, Mark Greynolds, shared with me his work with WebLogic and APEX and getting them to work together. I thought it was something that everyone would be interested in and asked him if he would be willing to document the steps and allow me to post them here on my blog. He was and so here it is.

WebLogic Server and APEX

When a WebLogic Server (WLS) is the primary Web server, accessing APEX pages though the WLS requires a proxy. The configuration of APEX generally follows one of two configurations – Apache with mod_plsql or the Embedded PL/SQL gateway. When WebLogic (without Apache) is the main HTTP server, getting APEX to surface on the same port as WebLogic requires some form of proxy.

Overall Approach

This solution creates a very simple Web Application that invokes a Java Proxy Servlet when a user tries to access APEX pages. Wrapping this Web Application around the Java Proxy Servlet lets the WLS serve APEX without any port conflicts. The WLS Proxy Servlet is a fully documented out of the box tool. To create and deploy the Web Application simply build the files outlined in this document, deploy the application and then access APEX.

Exploded deployment

For convenience, this solution takes advantage of the exploded deployment feature of the WSL. In addition to the ability to deploy jar, war and ear files, the WLS can deploy Web Applications as an exploded directory that contains the same contents of the archive file. An exploded archive directory contains the same files and directories as a jar archive. However, the files and directories reside directly in the file system instead of as a single archive file (JAR). This example uses the exploded deployment style to create the Web Application for this example.

Default WebLogic application

The default Web Application is what the server sends to browser clients who do not specify a recognized URI (or specify only “/” as the URI). Each server has only one default Web Application and for this solution to work, this application must be set as the default. If there is already a default, this servlet could be added to the existing application by using an exploded deployment of the default with modification to the web.xml to register the APEX proxy.


1. An Oracle database successfully serving APEX pages. The APEX instance may be on the same or different machine and served from either Apache or the Embedded PL/SQL gateway. In this example, APEX uses the Embedded PL/SQL Gateway of a database running on the same machine as the WebLogic server and natively appears at the http://localhost:8080/apex URL.

2. An Oracle WebLogic Server 10.3 running a Node Manger, the Administration Console and a Managed server. This example uses a domain created specifically for this exercise named APEXDemo. The WLS Administration console uses port 7001 and the Managed Server uses port 80.

3. There is no other “default” WebLogic application for the Managed Server.

Create the APEX Proxy Servlet

1. Create the following directory structure somewhere on disk. This example assumes the C:\ drive is used. Note: the apexproxy.war directory name mimics the normal J2EE naming convention for Web Application archive (WAR).

2. In the apexproxy.war directory, create the index.html file. The WLS Managed Server renders this page when the server cannot map the browser’s URL to a valid destination. For this example, APEX becomes the default page due to a simple redirect to the full APEX path.

    <meta http-equiv="refresh" content="0;url=apex">

3. In the WEB-INF directory, create the web.xml file that defines this simple Web Application.

<?xml version="1.0" encoding="UTF-8"?>
  <display-name>APEX Proxy</display-name>

The <servlet-class> tag identifies the proxy servlet class and provides the
redirection URL to use when the container invokes the servlet. The two
<servlet-mapping> tags explicitly identify the two URL patterns used by APEX.
The WLS documentation suggests using a single mapping of “/” but this causes every
unmatched request to forward to the Oracle XML DB default splash page and ignores the
index.html file.
4. In the WEB-INF directory, also create the following weblogic.xml file. At deployment, WLS scans this file for the information on how to configure the deployment.

<?xml version='1.0' encoding='UTF-8'?>

The <context-root> tag is the key for making this example function. This tag
makes this the default application for the Managed Server.

Deploy the Proxy Servlet

5. Begin the deployment by accessing the WLS Administration Console using the http://localhost:7001/console URL. For this example, the Administration Console’s Username and Password are weblogic and weblogic.

6. On the left side navigation panel, click the Deployments link.

7. Click the Install button.

8. Use the Path: field to locate the C:\APEXProxy directory. NOTE: this page can
navigate directories on the drive by entering C:\ and clicking the Next button. The server
returns an error and shows the directories in a navigable list.

Click the radio button next to the apexproxy.war directory name and then click the
Next button. NOTE: do not type in the complete path to the war directory – clicking the
radio button for the WAR automatically completes the Path specification.

9. Click the Next button to accept installing the deployment as an application.

10. Select the desired server and click the Next button.

11. Click the Finish button to accept default values for all the remaining deployment values
and finish the deployment.

12. The Administration Console displays the configuration page for the newly deployed
application with the following messages.

Lower down the page, the server display the status of the new application.

13. Enter the Managed Server URL in to a browser to see the APEX login page.


The browser receives a redirect from the index.html page and displays the APEX login

Categories: APEX, Oracle Tags: , ,

Report Hierarchical Data With APEX

September 5, 2008 12 comments

Anyone familiar with Oracle and hearing the word hierarchical immediately thinks of the sql CONNECT BY clause.  And I would bet that when they think about displaying this data, they would use some sort of tree widget.  APEX has a built-in tree widget and for many applications, it works fine.  

The drawback to the built-in tree widget is that it brings back the entire dataset on the initial page render.  Good and Bad.  Saves round trips to the server, but could take a lot of initial time depending on the size of the data.  Showing/hiding branches of the tree with many elements also can make the application feel sluggish.  

On my current project, I needed to build an interface against just such a dataset.  So I needed an alternative to the built-in tree.  I looked at either writing my own tree using javascript and AJAX or using an already developed one.  Neither one appealed to me.  They both added development complexity and maintaining them weighed on my final decision.

What I chose to do was build a breadcrumb-like report displaying the path traversed and a second report displaying the elements at the current level.  All default APEX functionality.  Simple clean interface.  Easily developed and easily maintained.  You can check it out here.

Let me quickly walk you through how it was built:

1. Create a report on the base table constrained by the hidden item.  The query should look something like:

select *
  from emp
 where nvl(mgr,-1) = :p5_empno

I then linked the ENAME column back to the same page passing the EMPNO value into :P5_EMPNO.
2. Create a hidden Item to hold the manager’s id.  I put it in the step 1’s report region and called it P5_EMPNO and set its default value to -1.

3. Create a PATH report to manage the traversing the data.  This is where the magic happens.  I make use of the SYS_CONNECT_BY_PATH() function in conjunction with the START WITH…CONNECT BY clause. The query I used was:

select '<a href="f?p=' || :app_id || ':5:' ||
         :app_session || 
         '::::p5_empno:-1">Top</a> >>> ' || 
             '<a href="f?p=' || :app_id || ':5:' ||
             :app_session || '::::p5_empno:' || empno ||
             '">' || ename || '</a>', ' : ' ), 4 ) path 
  from emp 
 where empno = :p5_empno 
 start with mgr is null 
connect by prior empno = mgr

Some other tweeks to this region. No Pagination. Report Template of Value Attribute Pairs. Layout above the first report region. No region template.

4. ???

5. Profit!

Now you can use the main report to drill into the children of the row you selected, all the while maintaining the context of where you are in the hierarchy with the path.

It’s a quick simple technique, and 100% APEX. No additional javascript libraries or custom coding to accomplish a clean and simple interface. And it will be easily maintained, either by you, or by the developer that comes after you.

Let me know what you think.

Categories: APEX, SQL Tags: , , , ,

APEX 3.1.2 Is Available

August 29, 2008 6 comments

In case you were not aware, Oracle has released a new version of Application Express. From the APEX site on OTN:

Aug 28

I just finished upgrading my local apex instance. I chose to apply the patch instead of a full install and it worked fantastic. Took less than 5 minutes to patch on my dell 620 laptop  running Ubuntu 7.10.  4 minutes to apply the patch and another minute to load the new images.

I read the install notes and there are more than 80 bug fixes and enhancements.

Has anyone else installed it yet? What do you all think? I’ll blog my impressions once I kick the tires for a bit.

Categories: APEX Tags: , , ,

Regular Expression Searching With APEX

August 26, 2008 1 comment

Ever since Oracle introduced regular expression functions in the database, I have been a big fan of them.  They really make certain tasks much easier and give you added functionality.  One place I always used them is in my APEX apps where I supply the user with a search box to constrain the results of a query.

The old way I would have written the query constraint:

where upper(COL1) like ‘%’ || upper( :P1_SEARCH_TEXT ) || ‘%’

Now using REGEXP_LIKE() you can achieve the same functionality while simplifying the constraint.  And you get the added bonus of advance searching for the power user.

where regexp_like( COL1, nvl(:P1_REGEXP,COL1), ‘ix’ )

The first thing you will probably notice is that there is no conditional operator in that expression.   None is needed.  The regexp_like function is a boolean function and is used as such.

So now, any basic search will work just as before.  But now, you can issue regular expression searches as well.  If you want all the entries that start with S, search for ^s

End with R, use r$

Start with S and end with H, use ^s.*h$

Start with S or end with R, use ^s|r$

All 4 letter names, use ^….$

Contains B, C, D or K, use [b-d,k]

How about all names with double letters, use (.)\1

There are many more things you can do.  If you want to read up about regular expressions in oracle, docs can be found here.

Using regexp_like() opens up the advanced searching for all the regular expression junkies without compromising the simple searching and it add NO complexity to your applications.

I have staged a simple demo on, here

Multiple Date Selector

I am currently working on a project using ApEx that requires the user to have the ability to select multiple dates. So I came up with this pretty cool modified monthly calendar to accomplish that task. And I thought I’d share it with everyone else.

First create a new page. On that page create a calendar based on the following query.

For the Calendar Attributes, the date column will be based on sysdate, and the display column will be based on dummy. This is just for sample purposes. In a real implementation, you would want to based this on a table with some meaningful dates.

Next we need a MultiSelect list box to store all the selections. Create a new region in the second column of the page and then create a MultiSelect Item in that region. I based my LOV on another query that returns no rows since this is just a demo with no initial date to populate. The query I used was

select dummy a, dummy b from dual where 1=0

I called my element P2_DATES and set the height to 25. When you are done, your page will look something like this…



Ok, now for the magic. We want to be able to select a day, have it populate the list on the right and also give a visual indication that we have selected it. We will need to slightly modify the calendar template so we can locate each individual calendar cell. ( Or if you want to, copy the existing template and then use and modify that. Just remember, if you do do that, you need to set the calendar on the page to use the new copied template. ) From the ApEx development you will see a list of all the templates being used on the page


Click on the calendar template and then select the monthly template. We need a way for the javascript that we will write to locate the specific &lt;TD>&lt;/TD> that is the individual date we click on. We will give each date cell a unique ID.

In the Weekday format section, modify the Day Open Format to include the following ID attribute:

<td class=”t13Day” valign=”top” id=”CELL#YYYY##MM##DD#”>

And add the same ID attribute to both the Today Open Format:

<td valign=”top” class=”t13Today” id=”CELL#YYYY##MM##DD#”>

and the Weekend Open Format.

<td valign=”top” class=”t13WeekendDay” id=”CELL#YYYY##MM##DD#”>

Note: I am using the default template #13. If you chose a different default template, then your class attribute will be different. The important thing is that you add the correct ID attribute to the <TD> tag.

Now all that is left is to add the javascript that does the real magic. Go back edit the page and in the page section, add the following javascript to the Header Text

var selectedColor = '#CC3333';

function addToSelectList( pList, pDisplay, pValue )
  var s = document.getElementById( pList );
  s.options[s.length-1].text = pDisplay;
  s.options[s.length-1].value = pValue;

function removeFromSelectList( pList, pValue )
  var s = document.getElementById( pList );
  for ( i=0; i<s.length; i++ )
    if ( s.options&#91;i&#93;.value == pValue )

function toggleEvent( pCell, pList, pDisplay, pValue )
  var cell = document.getElementById( pCell );
  if ( == "" )
    addToSelectList( pList, pDisplay, pValue ); = selectedColor;
    removeFromSelectList( pList, pValue ); = null;



Last step. We need a way to trigger the toggleEvent function. We will attach that to the calendar dates. For that, you will need to edit the Calendar Attributes and define the Day Link like this:

Click to get the full size image.

You are passing 4 parameters to the toggleEvent function. The first is the ID that we set up in the template, the second is the ApEx name of the multiselect list, the third is the display value in the list and the forth is the actual value that will be submitted from the list.

Now we are ready to test. Run the page and select any day

Now as you select the days, they turn red and the date is populated in the multiselect list. Select it again and it will toggle off.

I have set up a quick working demo here ( )

There is still much work to be done to make this a functional page. The submit processess need to be written to take the the dates from the select list and do something with them. You may also want to modify the query that the calendar is based on and prepopulate the calendar selected dates. But I will leave those exercises to the reader at home. (Boy did I hate it when my college professors said that in class.) I have actually done all of that but its a bit more than I wanted to blog about in my first post ( well second, my iPhone post was my first ). But if people are interested in enhancing this and have questions, just ask. And if enough people are interested, I will do a part 2.

Well I hope you found this useful. Check back as I will be adding more cool tips and tricks like this in the future.

Categories: APEX Tags: , , ,