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");
}

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