Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

    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

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

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

    PHP Code:
            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',
                    
    noCloseButtontrue,
                    
    backdrop'static',
                    
    escapeDisabledtrue,
                    
    attributesattributes,
                }, (
    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'

    PHP Code:
    this.createView('quickCreate''custom:views/modals/detail-small', { 
    PHP Code:
    define('custom:views/modals/detail-small', ['views/modals/edit'], function (Dep) {
        return 
    Dep.extend({
          
    escapeDisabledtrue,
          
    noCloseButtontrue,
          
    backdrop'static',
          
    fullFormDisabledtrue,
        });
    });
    ​ 
    "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?
    Last edited by yuri; 04-15-2023, 02:26 PM.

  • #2
    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.

    Comment


    • #3
      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.

      Comment


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

        Comment


        • #5
          Thanks.

          Solved it by overriding.

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

          Comment


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

          • Kharg
            Kharg commented
            Editing a comment
            Thanks Yuri.

        • #6
          Is this a potential extension [Coming Soon]?!

          Comment


          • Kharg
            Kharg commented
            Editing a comment
            esforim No, not for this!
            I have so many projects I'd love to publish!
        Working...
        X