Saturday, 3 May 2014

Triggering dynamic actions from a dialog button

A typical usage scenario is you create a region, give it a static ID, and set the default display to be hidden - the latter is handled if you select your region template as modal region.

A typical JavaScript dynamic action to display the dialog, would be:

$('#dialog-region').dialog({
    width: 500,
    title: 'My Dialog',
    buttons: [
        {
            text: 'Submit',
            click: function() { 
                $(this).dialog("close"); 
} }, { text: 'Cancel', click: function() { $(this).dialog("close"); } } ] })

So the question is, how do we get some other dynamic action to fire when the button is clicked?

Option 1

On the button, give it an id property, such as:

{
    text: 'Submit',
    id: 'btn-submitDialog'
    click: function() { 
        $(this).dialog("close"); 

    }
}

And then, on your dynamic action definition, you can specify a click event and on the selection type specify jQuery Selector, passing in #<id>. So given the above button, you would pass in #btn-submitDialog. Also, specify the event scope as dynamic.

Option 2

Trigger a custom event. This option has the benefit that if you want the same dynamic action to fire from multiple sources, just trigger the same event.

On the button click handler, fire apex.event.trigger(document, 'btn-submitDialogClicked'), such as:

{
    text: 'Submit',
    click: function() { 
        apex.event.trigger(document, 'btn-submitDialogClicked');
        $(this).dialog("close"); 

    }
}

Then, create a dynamic action specifying the When as Custom (under the Custom Event heading). As from the triggered event above, specify the string: btn-submitDialogClicked. Specify Selection Type as DOM Object, and the DOM Object as document.

Option 3

Craft the display of the dialog based on a before page submit dynamic action adding a when condition such that it only appears when the field is empty.

E.g. You may want to display a dialog on certain conditions when the user submits the page.

In this case, the click handler would just submit the page

{
    text: 'Submit',
    click: function() { 
        apex.submit('SUBMIT');

    }
}

Then add a dynamic action with the event being Before Page Submit (under Framework Events heading). In the when condition, specify on what situations the dialog should appear. So in my sample I have a field P21_SAMPLE_FIELD1 that I want a value in before actually submitting the page, so I specify the when condition as JavaScript expression, and the value: $v('P21_SAMPLE_FIELD1') == '' && this.data == 'SUBMIT'

Then you want to add two true actions:

1. An Execute JavaScript Code dynamic action that will render the dynamic action (as described at the start of the article)
2. A Cancel Event action (under the Miscellaneous heading) so the page doesn't get submitted. Note: you will want to have this sequenced after displaying the dialog, otherwise the dialog won't appear.

nb: Option 3 isn't exactly firing another dynamic action when clicking the button, but continues submitting the page when the action's condition is not met - I hope it gives you an idea of some options in regards to page processing and dialogs.

I have set up a basic demo with the 3 options in force on the following page: https://apex.oracle.com/pls/apex/f?p=14882:21:

No comments:

Post a Comment