apply a custom view for all entities

[papermoon]

I modified EspoCRM to use tabs for the record and for the bottom view (all non-sticked panels are tabs). I did the changes directly in the core files because on https://docs.espocrm.com/development/custom-views/ I read that for custom views I always have to assign/add the entity type. So ... is there another way to apply my custom view for all entities at once instead of hacking the core files?

Thanks, Andre

[rabii]

You can build your own detail.js file and make all existing and custom entities inherits the new custom detail.js view.

All existing and custom entities inherits (client/src/views/detail.js) default one you can make you own custom detail.js view and make all entities inherits the view or set up an extension that allow admin to set the new view.

[papermoon]

Thank you for your answer. But I don't quite understand. ;-) Do you mean just to overwrite the client/src/views/detail.js or how can I have all entities inherit from my view?

What I did sofar is I modifed the client/res/layout-types/record.tpl and client/res/templates/record/bottom.tpl so the result looks like shown in my previous attachment. Of course this is not upgrade safe, so my "dream" is to put the modified files somewhere below client/custom so they would take precedence over the core ones. I tried a few things but this is not possible, right?

[telecastg]

You can't have all your entities "automatically" inherit from a custom view, you have to set that in metadata for each entity.

Kindly provide the contents of the modified record layout template and I will provide a step by step guide to apply the tab layout so others will be able to use it if they wish.

UPDATE: These instructions apply to Espo 6 for Espo 7 use the view setup handlers facility described below.

[papermoon]

Thank you for your answer. It still needs some fine tuning (handling of hidden panels is missing for example), but I will release it to the public

[yuri]

I recommend using view setup handlers https://docs.espocrm.com/development...etup-handlers/. They allow to add custom code for a specific entity type as well as for all entity types.

[telecastg]

Excellent, one of the hidden gems of Espo 7

[papermoon]

I recommend using view setup handlers https://docs.espocrm.com/development...etup-handlers/. They allow to add custom code for a specific entity type as well as for all entity types.

Thank you for your answer. I did something like:

define('custom:tabbed', [], function () {
    var Handler = function (view) {
        this.view = view;
    };
    _.extend(Handler.prototype, {
        process: function () {            
            // Do something with view.
            var self = this.view;
            var el = self.options.el || '#' + (self.id);            
            self.waitForView('middle');            
            self.getGridLayout(function (layout) {
                layout.type = "tabbed";
                self.createView('middle', self.middleView, {
                    model: self.model,
                    scope: self.scope,
                    type: self.type,
                    _layout: layout,
                    el: el + ' .middle',
                    layoutData: {
                        model: self.model,
                    },
                    recordHelper: self.recordHelper,
                    recordViewObject: self,
                    panelFieldListMap: self.panelFieldListMap,
                });
            }.bind(self));            
        },
    });
    _.extend(Handler.prototype, Backbone.Events);
    return Handler;
});

with my tabbed.tpl in client/res/layout-types and this seems to work. Not sure if this is the preferred way.

[papermoon]

My previous attempt was a bit buggy and complicated. So this is my new attempt.

define('custom:record-tabbed', [], function () {
    var Handler = function (view) {
        this.view = view;
    };
    _.extend(Handler.prototype, {

        process: function () {  
            console.log("extension called")
            this.view.createMiddleView = function (callback) {                    
                console.log("new function called")
                var el = this.options.el || '#' + (this.id);

                this.waitForView('middle');

                this.getGridLayout(function (layout) {
                    layout.type = "custom:record-tabbed";
                    this.createView('middle', this.middleView, {                        
                        model: this.model,
                        scope: this.scope,
                        type: this.type,
                        _layout: layout,
                        el: el + ' .middle',
                        layoutData: {
                            model: this.model,
                        },
                        recordHelper: this.recordHelper,
                        recordViewObject: this,
                        panelFieldListMap: this.panelFieldListMap,
                    }, callback);
                }.bind(this));
            };
            this.view.bottomView = 'custom:views/record/detail-bottom';                                                
        }        
    });
    _.extend(Handler.prototype, Backbone.Events);
    return Handler;
});

Works fine and sofar I can see no bugs anymore. Except ... Just the first time after calling Administration -> Rebuild, or after a web service restart, my changes are not taken into account. I did a bit of debugging and it looks like in case of error the call order of functions is:

1) build() from client\src\views\record\detail.js
2) process() from my extension above
So obviously in this case since process() is called after build(), the view was built using the not modified function

In all other cases later, the order is vice versa, so

1) process() from my extension above
2) build() from client\src\views\record\detail.js
And obviously then my extension had the change to modify the core view

Any idea how to fix this?

And btw. really great stuff and great work yuri

[papermoon]

After some more debugging I found out that this is caused by (or at least can be explained by) processSetupHandlers() in view-helper.js. The very first time after a Rebuild processSetupHandlers is called with type "detail". Later, all subsequent calls when opening the very same view, processSetupHandlers is called with type "record/detail". Since I only registered my viewSetupHandler to the view "record/detail" this explains the mentioned behaviour. So the following is working fine

{
  "viewSetupHandlers": {
    "record/detail": [
      "custom:record-tabbed"
    ],
    "detail": [
      "custom:record-tabbed"
    ]
  }
}

Is this the way it should work? What is the difference between the views "detail" and "record/detail")?

Andre

[telecastg]

What is the difference between the views "detail" and "record/detail")?

This post can explain it. https://forum.espocrm.com/forum/deve...hing#post61108

[papermoon]

Thank you for your help. Very useful. Still I am curious why Espo is requesting different view types for the same thing, but anyway, it is working. I made my extension now available in the Extension section of the forum. It is not finished yet, especially the installation process, but already presentable.