Single Article

Page help in modal dialog

Category APEX and jQuery

To show help in modal dialog you need jQuery and SimpleModal jQuery plugin. Load SimpleModal library in page template header. If you are on APEX 3.x you need also load jQuery.

 

First create application item called G_HELP_URL. Set item Session State Protection to "Restricted - May not be set from browser". Then create application computation for this item.

  • Computation Point: Before Header
  • Computation Type: PL/SQL Expression
  • Computation:
APEX_UTIL.PREPARE_URL (
  p_url => 'f?p=&APP_ID.:HELP:&APP_SESSION.:&APP_PAGE_ID.:NO:1500::',
  p_checksum_type => 3
);

In above code we make assumption that page showing help id will be 1500.

Then create HTML region to page zero.

  • Template: No Template
  • Display Point: After Header
  • Region Source:
<script type="text/javascript">
function htmldbShowHelp(){
 $.modal($("<iframe/>",{
  "id":"htmldbIFrame",
  "src":"&G_HELP_URL.",
  "height":400,
  "width":600,
  "frameborder":0}),{
  overlayClose:true,
  containerCss:{
   background:"#FFF",
   padding:10,
   height:400,
   width:600
  },
  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("input[type='button']:first").removeAttr("onclick").click(function(){
     $.modal.close();
    });
   });
  }
 });
}
</script>

Next create blank page to show help.

  • Page Number: 1500
  • Page Alias: HELP
  • Page Name: Help

Do not select/set tabs or breadcrumbs for this page.

Edit page attributes:

  • Template: Popup
  • Cursor Focus: Do not focus cursor
  • Page Access Protection: Arguments Must Have Checksum
  • Form Auto Complete: Off

Create new PL/SQL Dynamic Content region and set Region Source:

APEX_APPLICATION.HELP(
  p_flow_id        => :APP_ID,
  p_flow_step_id   => :REQUEST,
  p_show_item_help => 'NO',
  p_show_regions   => 'NO'
);

Create CLOSE button to region. You can accept all wizard defaults, except set Button Style to "HTML Button". It is important for JavaScript that Button Style is "HTML Button".

Then create e.g. navigation bar entry for help link. See Creating a Navigation Bar Entry. Set target type to URL and URL target:

javascript:htmldbShowHelp();

You can show link conditionally if page have help. Use condition type "Exists (SQL query returns at least one row)"

SELECT 1
FROM apex_application_pages
WHERE application_id = :APP_ID
AND page_id = :APP_PAGE_ID
AND DBMS_LOB.getlength(help_text) > 0

Now you can edit your application other pages and write help to page attributes.

See working example.

Page right top navigation bar have link to show help dialog.

Comment Button

Comments

  • Jari Laine 15 Aug 2011  

    Hi,

    Thank you for your feedback. Also thank you for sharing plugin.

    Regards,
    Jari

        
  • Martin Giffy D'Souza 15 Aug 2011  

    Hi Jari, Thanks for posting this technique. For those that are using APEX 4.0 and above I wrote a plug-in for Simple Modal already:

    http://apex-plugin.com/oracle-apex-plugins/dynamic-action-plugin/clarifit-simple-modal_56.html

    All it will do is simplify the integration with APEX. The region source from the blog post will remain the same etc. Martin

        

Global Right Column

Search

Archives

Subscribe in a Reader