Using properties inside created views (escape key in edit modal)

[Kharg]

Hello All!

I am trying to create a modal dialog (https://docs.espocrm.com/development/modal/#modal-form) that based on the selected option it will open other dialogs for the user to do different actions (like planning a call/meeting/task)
The user should not be able to close the view using the Escape Key or by pressing outside of the window.


Properties added to the modal dialog works correctly

define('custom:views/modals/lead-update', ['views/modal', 'model'], function(Dep, Model) {
    return Dep.extend({
        className: 'dialog dialog-record',
        templateContent: '<div class="record">{{{record}}}</div>',
        escapeDisabled: true,
        noCloseButton: true,
        backdrop: 'static', // 'static', true, false​ 

But when I do the same in a 'quickcreate' view it doesn't work, properties are not applied.

        actionCreateCall: function () {
            var attributes = {};
            attributes.parentId = this.options.id;
            attributes.parentType = this.options.entityType;
            attributes.parentName = this.options.title;
            attributes.name = "Recall" + " " + this.options.title;
            Espo.Ui.notify(' ... ');
            var viewName = this.getMetadata().get('clientDefs.Call.modalViews.edit') || 'views/modals/edit';
          
            this.createView('quickCreate', viewName, {
                scope: 'Call',
                noCloseButton: true,
                backdrop: 'static',
                escapeDisabled: true,
                attributes: attributes,
            }, (view) => {
                view.removeButton('cancel');
                view.removeButton('fullForm');
                view.render();
                view.notify(false);
                this.listenToOnce(view, 'after:save', () => {
                    view.close();
                });
                this.listenToOnce(view, 'after:relate', () => {
                    this.actionRefreshData();
                });
            });
        },​ 

If I use a custom view for the 'quickCreate'

this.createView('quickCreate', 'custom:views/modals/detail-small', { 

define('custom:views/modals/detail-small', ['views/modals/edit'], function (Dep) {
    return Dep.extend({
      escapeDisabled: true,
      noCloseButton: true,
      backdrop: 'static',
      fullFormDisabled: true,
    });
});
​ 

"noCloseButton: true" and "fullFormDisabled: true" will work, but "escapeDisabled: true" and "backdrop: 'static'" will not work.

Is there any way to use these 2 properties in a 'quickCreate' view?

[yuri]

Escape key is handled separately in views/modals/edit: https://github.com/espocrm/espocrm/b...ls/edit.js#L90

If form data is not changed, it allows to escape. Otherwise, it does not allow and shows a dialog to prevent accidental entered data loss.

[Kharg]

Thanks Yuri.
Is there a way to block escape even when the form is not changed? The call quickcreate view will be prefilled already, so it will not always be edited.

[yuri]

You can override anything in your child view. Override shortcutKeys in setup method.

[Kharg]

Thanks.

Solved it by overriding.

define('custom:views/modals/detail-small', ['views/modals/edit'], function (Dep) {
    return Dep.extend({
      noCloseButton: true,
      fullFormDisabled: true,
    
      shortcutKeys: {
        Escape: function(e) {
          return;
        }
      },
      onBackdropClick: function () {
            return;
    },
  
    });
});
​ 

[yuri]

You suppressed all shortcut keys. Instead, override in the setup method. this.shortcutKeys['Escape'] = () => {};

[Kharg]

Thanks Yuri.

[esforim]

Is this a potential extension [Coming Soon]?!

[Kharg]

esforim No, not for this!
I have so many projects I'd love to publish!