Item help text in modal dialog

I have found that Eric Martin SimpleModal jQuery plugin is very handy with APEX for creating different kind modal dialogs. Martin Giffy D'Souza have also created ClariFit Simple Modal APEX plugin using this jQuery plugin. Thank you Eric and Martin.

I did previously blog about Page help in modal dialog and Overwriting the customize link with jQuery where I have used SimpleModal jQuery plugin.

This post topic is how to get item help shown in modal dialog.

Load SimpleModal library in page template header. If you are on APEX 3.x you need also load jQuery.

First copy your original label template with help to new name e.g. "Optional with help dialog (Custom 1)". Then edit this new template and change Template Class to "Custom 1". Original Before Label Definition should have part

href="javascript:popupFieldHelp('#CURRENT_ITEM_ID#','&SESSION.')"

Change that part to be

href="javascript:htmldbFieldHelp('#CURRENT_ITEM_ID#')"

Then create HTML region to page zero.

• Template: No Template
• Display Point: After Header
• Region Source:

<script type="text/javascript">
function htmldbFieldHelp(pItem){
 $.modal($("<iframe/>",{
  "id":"htmldbIFrame",
  "src":"wwv_flow_item_help.show_help?p_item_id="+pItem+"&p_session=&APP_SESSION.",
  "height":200,
  "width":400,
  "frameborder":0}),{
  overlayClose:true,
  containerCss:{
   background:"#FFF",
   padding:10,
   height:200,
   width:400
  },
  persist:true,
  overlayCss:{backgroundColor:"#606060"},
  onOpen:function(d){
   d.overlay.fadeIn("slow",function(){
    d.data.hide();
    d.container.fadeIn("slow",function(){
     d.data.slideDown("slow");
    });
   });
  },
  onShow:function(){
   $("#htmldbIFrame").load(function(){
    $(this).contents().find(".xpbutton a:first").attr({"href":"#"}).click(function(){
     $.modal.close();
    });
   });
  }
 });
}
</script>

Now you can change your items use new label template and write help text to items. When you click item label help text will be shown in modal dialog.

See working example.