Popup In Report

While recently trying to help someone in the ApEx forum, I decided a blog post was in order. If you have a report with limited real estate but need to allow the user to enter comments (requiring a textarea), what is the best strategy to employ? The person that posted the thread wanted to have something in the report that would allow the user to click it triggering a popup window to open allowing the user to edit the comments.

While that's possible, it doesn't involve jQuery which just isn't cool. So I thought of a way I could do it with jQuery ;) Click here to view the example. One of my favorite jQuery plugins is Impromptu. Impromptu allows you to create custom popups with those slick background fades. You can learn more about Impromptu here:

• http://trentrichardson.com/Impromptu/index.php

I choose to show how this works with a canned tabular form as I figure that's what most people use. I almost always use custom tabular forms using the APEX_ITEM package but those of you doing that should be able to adjust this procedure to work in your implementation. Also it's important to note that a few things are lacking... The text displayed should indicate if a comment exists or not, the mouseover could indicate that a click would do something, and code could be added to remind the user to save changes if they made some and tried to navigate away from the page without doing so.

Here's how to get it working...

1. Install jQuery in ApEx.
2. Download impromptu from the link above. Create a new folder called impromptu in your i/jquery directory (created in step 1) and save impromptu there.
3. Create a tabular form as you normally would and include the column you would like to hold the text for the popup.  FYI, I used the employees table and added a DETAILS column to hold the extra data.
4. Go to edit the tabular form and change the column that will be holding the data  for the popup (details for me) from a text input to a hidden item. It's important to note the order/rows in which the both the ID and the details items are. Just count down starting from the top, in  my case they are numbers 2 and 10 respectively. You'll see these referred to later as "f02" and "f07" in jQuery filters.
5. Add a derived column to the tabular form and put the following code in the HTML Expression: 

   Add/Edit Details

6. When the tabular form renders you shouldn't see the ID or the details columns. But using a tool like firebug, you'll see that ApEx placed them in the last td element in the row along with span we created in the derived column. In fact, there are a few different elements there, all siblings of one another. jQuery has a great way to find and filter siblings. Combined with Impromptu, the following code is all that's necessary to get everything working. Place it in the page's HTML Header after you've replaced &JAVASCRIPT_DIR. with the appropriate path.