Skip to Main Content

Column value in modal dialog

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,
  product_name,
  category,
  product_avail,
  product_description
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:

javascript:openDialog('prod#PRODUCT_ID#')

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

Go edit page attributes and add to page HTML header:

<style type="text/css">
.prod-dialog{display:none}
</style>

Add to JavaScript Function and Global Variable Declaration:

function setDialogs(){
 $(".prod-dialog").dialog({
  autoOpen:false,
  modal:true,
  resizable:false,
  title:"Product Description",
  buttons:{
   "Close":function(){
    $(this).dialog("close");
   }
  }
 });
}
function openDialog(pId){
 $($x(pId)).dialog("open");
}

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:
    setDialogs();
  • 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:
    $(".prod-dialog").dialog("destroy").remove();
  • Selection Type: None

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

Comments

  • Jari Laine 22-APR-13 03.53.54.000000 AM

    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-13 07.12.14.000000 PM

    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-13 07.19.08.000000 AM

    Hi Scott,

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

    Regards, Jari

  • scott 20-APR-13 07.45.15.000000 PM
    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 09-MAY-12 03.36.10.000000 PM
    Jari, I found the problem. I missed the first step in updating the HTML expression. It's working fine now. Dave
  • Jari Laine 09-MAY-12 07.13.48.000000 AM

    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 apex.oracle.com ?

    Regards, Jari

  • Dave 08-MAY-12 11.28.46.000000 PM
    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-12 01.01.47.000000 PM
    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-12 12.06.57.000000 PM

    Hi,

    Do you have HTML in your column data?

    Have you try add white-space

    Regards, Jari

  • ruijt 24-JAN-12 11.02.38.000000 AM
    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...