How to add a "beforeClose" or "close" callback in OroCRM Dialogs?

jQuery UI dialogs has some callbacks like ‘close’ and ‘beforeClose’:

https://api.jqueryui.com/dialog/#event-close
https://api.jqueryui.com/dialog/#event-beforeClose

My PHP render a dialog, like that below:

PHP

{{ UI.clientButton({ 'dataUrl': path('ibv_household_member_create', oro_action_params(entity, 'assign')), 'aCss': 'no-hash', 'iCss': 'fa-user-o', 'dataId': entity.id, 'label': 'ibv.household.householdmember.action.add'|trans, 'widget': { 'type': 'dialog', 'multiple': false, 'refresh-widget-alias': 'member-list-widget', 'options': { 'alias': 'member-dialog', 'dialogOptions': { 'title': 'ibv.household.householdmember.action.add'|trans, 'allowMaximize': true, 'allowMinimize': true, 'dblclick': 'maximize', 'maximizedHeightDecreaseBy': 'minimize-bar', 'width': 1000 } } } }) }}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

{{ UI.clientButton({             'dataUrl': path('ibv_household_member_create', oro_action_params(entity, 'assign')),             'aCss': 'no-hash',             'iCss': 'fa-user-o',             'dataId': entity.id,             'label': 'ibv.household.householdmember.action.add'|trans,             'widget': {                 'type': 'dialog',                 'multiple': false,                 'refresh-widget-alias': 'member-list-widget',                 'options': {                     'alias': 'member-dialog',                     'dialogOptions': {                         'title': 'ibv.household.householdmember.action.add'|trans,                         'allowMaximize': true,                         'allowMinimize': true,                         'dblclick': 'maximize',                         'maximizedHeightDecreaseBy': 'minimize-bar',                         'width': 1000                     }                 }             }         }) }}

How do I define a javascript callback, that shows a ‘alert()’ (for example), when dialog is closed?

Topic

[Hryhorii HrebiniukParticipant]

Hello @spyout98

Since, close handler it’s a javascript function, we can not define it over widget declaration in twig, due to definition gets serialized into JSON.

But you can extend existing dialog widget

JavaScript

define(function(require) { 'use strict'; var NoteDialogWidget; var DialogWidget = require('oro/dialog-widget'); NoteDialogWidget = DialogWidget.extend({ _bindDialogEvents: function() { this.widget.on('dialogbeforeclose', this.onBeforeClose.bind(this)); NoteDialogWidget.__super__._bindDialogEvents.call(this); }, closeHandler: function(onClose, event) { if (event.isDefaultPrevented()) { return; } NoteDialogWidget.__super__.closeHandler.call(this, onClose, event); }, onBeforeClose: function(event) { // define your handler here } }); return NoteDialogWidget; });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

define(function(require) {     'use strict';       var NoteDialogWidget;     var DialogWidget = require('oro/dialog-widget');       NoteDialogWidget = DialogWidget.extend({         _bindDialogEvents: function() {             this.widget.on('dialogbeforeclose', this.onBeforeClose.bind(this));             NoteDialogWidget.__super__._bindDialogEvents.call(this);         },           closeHandler: function(onClose, event) {             if (event.isDefaultPrevented()) {                 return;             }             NoteDialogWidget.__super__.closeHandler.call(this, onClose, event);         },           onBeforeClose: function(event) {             // define your handler here         }     });       return NoteDialogWidget; });

Declare it in requirejs configuration

YAML

config: paths: 'oro/note-dialog-widget': 'bundles/oronote/js/note-dialog-widget.js'

1 2 3

config:     paths:         'oro/note-dialog-widget': 'bundles/oronote/js/note-dialog-widget.js'

And change you action button definition

{{ UI.clientButton({ ... 'widget': { 'type': 'note-dialog', ... } }) }}

1 2 3 4 5 6 7

{{ UI.clientButton({     ...     'widget': {         'type': 'note-dialog',         ...     } }) }}

[spyout98Participant]

Thanks, this solution worked here! I have one more doubt:

Every dialog can be closed in two situations:

* 1 – User cancels or close explicitly
* 2 – User fill correctly the form and the dialog is automatically closed

How to I execute a custom code when the user do the situation 2? Sometimes I can execute codes only when User cancel/close explicitly a dialog. Other times I want to execute some code when users fills the form and dialog is automatically closed.

[Hryhorii HrebiniukParticipant]

In the second case, user does not close dialog directly. Users submits form data and if it’s valid, server returns back the command to close the widget.

JavaScript

{ "widget": { "message": "Note saved", "triggerSuccess": true, "remove": true } }

1 2 3 4 5 6 7

{   "widget": {     "message": "Note saved",     "triggerSuccess": true,     "remove": true   } }

So, it is too late of preventing dialog from closing at this stage. The content of dialog is disposed.

See other methods of DialogWidget and AbstractWidget that you can overload and change logic to suite your needs.

Probably methods that implement data submit.

[Author]

Replies