Single Article

Column value in modal dialog

Category 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 unchek 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".

Apply changes.


Next add Link Column to report.

Enter to Link Text:

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

Change Target to URL and enter to URL field:


Change Display As to "Standard Report Column".

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


See working example.


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 · 9 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...     

Global Right Column



Subscribe in a Reader