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

javascript:openDialog('prod#PRODUCT_ID#')

Change Display As to "Standard Report Column".

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

    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

    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

    Hi Scott,

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

    Regards, Jari

        
  • scott 20-APR-13
    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
    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

    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 09-MAY-12
    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
    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

    Hi,

    Do you have HTML in your column data?

    Have you try add white-space

    Regards, Jari

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

Archives

Subscribe in a Reader