Skip to Main Content

Sunday, October 9, 2011

Column value in modal dialog

APEX and jQuery

Here is how show column value in modal dialog using classic report and jQuery UI dialog.

Example is based on Product Portal sample application, DEMO_PRODUCT_INFO table.

First create classic report from query:

SELECT product_id,
FROM demo_product_info

Edit report attributes and uncheck Show checkbox from column PRODUCT_DESCRIPTION.

Go edit PRODUCT_NAME column attributes.

Enter to HTML expression:

#PRODUCT_NAME#<div id="prod#PRODUCT_ID#" class="prod-dialog">#PRODUCT_DESCRIPTION#</div>

Change Display As to "Standard Report Column" and apply changes.

Next add Link Column to report and enter to Link Text:

<img src="#IMAGE_PREFIX#magnifying_glass.png" alt="Details" />

Change Target to URL and enter to URL field:


Change Display As to "Standard Report Column" and apply changes.

Go edit page attributes and add to page HTML header:

<style type="text/css">

Add to JavaScript Function and Global Variable Declaration:

function setDialogs(){
  title:"Product Description",
function openDialog(pId){

Create dynamic Action. Select Advanced

  • Name: Set Dialogs
  • Event: After Refresh
  • Selection Type: Region
  • Region: {select your report region}
  • Condition: No Condition
  • Action: Execute JavaScript code
  • Fire On Page Load: True
  • Code:
  • Selection Type: None

Create another dynamic Action. Select Advanced

  • Name: Unset Dialogs
  • Event: Before Refresh
  • Selection Type: Region
  • Region: {select your report region}
  • Condition: No Condition
  • Action: Execute JavaScript code
  • Fire On Page Load: False
  • Code:
  • Selection Type: None

Read more about jQuery UI dialog options to tweak dialog look and feel.



  • Jari Laine 22 Apr 2013

    Hi Scott,

    Please read carefully post instructions.

    You have entered to PRODUCT_NAME column "Element Attributes" string that should go "HTML Expression".

    You have not created link column.

    Regards, Jari  

  • scott 21 Apr 2013

    Jari, I created a sample in Application 39376 page 9 region at the bottom of the page(testing dialog), userid/pwd=xxx/xxx wkspace=xxx

  • Jari Laine 21 Apr 2013

    Hi Scott,

    Please create example about problem to and share developer loging details to workspace.

    Regards, Jari

  • scott 20 Apr 2013
    Hi Jeri, I am creating the same dialog with my classic report after following every steps it doesnt seem to show the dialog/popup. Also the value for LINK TEXT seem too long. Can you please help me on this i created a sample in paex 4.2.x, thanks
  • Dave 9 May 2012
    Jari, I found the problem. I missed the first step in updating the HTML expression. It's working fine now. Dave
  • Jari Laine 9 May 2012

    Hi Dave,

    This post instructions works on APEX 4.1.1. Please see my example (OTN account needed for login).

    Could you please reproduce your problem on ?

    Regards, Jari

  • Dave 8 May 2012
    I used this in an APEX 4.0 application and it worked great. When I upgraded to 4.1 I had to recreate my tabular form and now it doesn't work anymore. Any ideas why it won't work in 4.1?
  • ruijt 24 Jan 2012
    found the problem! Strip HTML was turned on on the report attributes pages... Once I've turned it off, the html was shown! Thanks :)
  • Jari Laine 24 Jan 2012


    Do you have HTML in your column data?

    Have you try add white-space

    Regards, Jari

  • ruijt 24 Jan 2012
    Tnx Jari, But what about brakes etc. inside the text? When I put paragraphs inside the column text, it won't show inside the prod-dialog div...