Wednesday, August 18, 2010

APEX 4.0 Interactive Reports - Customize Wait Display

Over a year ago I wrote about how to customize the APEX IR wait logo (http://www.talkapex.com/2009/04/apex-interactive-reports-customize-wait_28.html). If you read that post you'll notice it's quite lengthy and can be intimidating if you're new to JavaScript.

With APEX 4.0 this is a lot easier to do since they're plugins to declaratively add this functionality. This post will go over how to customize the APEX IR Wait logo in APEX 4.0. You can try a demo here: http://apex.oracle.com/pls/apex/f?p=20195:3200

- Create an IR report region

SELECT e.*, SUM (e.sal) OVER () test
FROM emp e
CONNECT BY LEVEL <= 5

- Install Plugin

- Download the Simple Modal plugin: http://www.apex-plugin.com/oracle-apex-plugins/dynamic-action-plugin/simple-modal.html
- Shared Components / Plug-ins / Import
- They're 2 plugins included in the zip file. Import both of them (Show and Close)

- Create Show Dynamic Action

- RClick on the IR region and click "Create Dynamic Action:
- Advanced
- Name: Show IR Wait
- Next
- Event: Before Refresh
- Selection Type: DOM Object
- DOM Object: apexir_WORKSHEET_REGION
- Note: We're using the DOM object and not the region since we can port this example to Page 0 and it will apply to all your IRs
- Next
- Action: Select Simple Modal - Show
- You can modify some of the plugin attributes here if you'd like
- Next
- Selection Type: DOM Object
- DOM Object: apexir_LOADER
- Create

- Create Close Dynamic Action

- RClick on the IR region and click "Create Dynamic Action:
- Advanced
- Name: Close IR Wait
- Event: After Refresh
- Selection Type: DOM Object
- DOM Object: apexir_WORKSHEET_REGION
- Next
- Action: Select Simple Modal - Close
- Create

Now when you run the IR it'll make the screen modal while it's reloading the data. If you want to run on all IRs then you can add this dynamic action to Page 0.

If you run the demo in a console-enabled browser (Firefox, Chrome, Safari) you'll notice that the plugin includes some additional debug information. I'll be posting the logging JavaScript package that was used in the plugin soon.

4 comments:

  1. Thanks Martin it is good example...
    Do you know which event will fire when clicking IR column Header..
    Basically i am trying to show simple modal page loader when user clicking the IR Column header

    Thanks
    Prabahar

    ReplyDelete
  2. Hi Prabahar,

    I think you can leverage the above example with the following modifications:

    SHOW:
    - Selection Type: jQuery Selector
    - jQuery Selector: .apexir_WORKSHEET_DATA th

    HIDE:
    - Event: Change
    - Selection Type: DOM
    - DOM Object: apexir_rollover

    The event selection for the Hide option may not be the best since it'll trigger several times, however it shouldn't cause any usability issues since it's hiding something that's already hidden.

    Please let me know if this works.

    Martin

    ReplyDelete
  3. Hi Martin
    Txs.. When i tried it is not working..
    This what i tried
    SHOW:
    WHEN Event: Click
    Selection Type: jQuery Selector
    jQuery Selector: .apexir_WORKSHEET_DATA th

    Thanks
    Prabahar

    ReplyDelete
  4. Hi Martin, was trying out your Customize Wait Display for Apex 4... works a treat. But then I had two issues:
    1) if I format a chart, the chart displays but the Wait never ends.
    2) my report is run in conjunction with a few cascading multiselect lists. I click a Run button after all selected. The Wait doesnt fire.
    Would you have any suggestions?
    Many thanks.
    Rob

    ReplyDelete