How to implement custom functionality across all types of views for the Meeting scope

[telecastg]

This project describes how to implement a custom functionality (update the value of field "place" in Meeting when the Meeting's parent entity changes) across all types of Meeting views.

Background information:

Based on the metadata file application/Espo/Modules/Crm/Resources/metadata/clientDefs/Meeting.json and the default views that are applied to all entities, when not specified otherwise in the clientDefs file, these are the view classes that control each type of display for the Meeting entity:

{
    "views":{
        "list" : "views/list"
        "detail":"crm:views/meeting/detail"
    },
    "recordViews":{
        "list":"crm:views/meeting/record/list",
        "detail": "crm:views/meeting/record/detail",
        "detailSmall": "views/record/detail/small"
        "edit": "views/record/edit",
        "editSmall": "crm:views/meeting/record/edit-small",
        "kanban": "views/record/kanban"
    },
    "modalViews": {
        "detail":"crm:views/meeting/modals/detail"
    }​
}

For reference, the diagram below shows the taxonomy of the view classes that control the display of Meeting data:


Implementation

To implement the desired functionality in all relevant Meeting view types, Espo now provides an excellent facility (View setup handlers) that allows defining in metadata, a custom functionality that will be injected inside a defined group of views, instead of having to create a brand new view class, extended from a target view class and repeat the logic in each new view file.

https://docs.espocrm.com/development/frontend/view-setup-handlers/

The first step is to define the desired functionality in a front end class like this:

client/custom/src/patient-change-handler.js

define('custom:patient-change-handler', [], function () {

    let Handler = function (view) {
        this.view = view;
        this.model = this.view.model;
    };

    _.extend(Handler.prototype, {
        process: function () {

            this.listenTo(this.model, 'change:parentId', function () {

                if (this.model.get('parentId') && this.model.get('parentType') =='Patient' && this.model.hasChanged('parentId') ){

                    this.ajaxGetRequest('Patient/' + this.model.get('parentId')).then(function (patient) {
                        let place =  patient['addressStreet'] +' ' + patient['addressPostalCode'] + ' ' + patient['addressCity'];
                        this.model.set('place', place );
                        this.model.save({place: place}, {patch: true});  
                        this.trigger('after:save', this.model);  

                    }.bind(this));    

                }

            }, this);
​
        },

    });

    // Establish event support.
    _.extend(Handler.prototype, Backbone.Events);

    return Handler;

});​

Next step is to define where is the above functionality going to be implemented in the Meeting scope clientDefs metadata file. Since the functionality applies to a single defined entity, it will not be necessary to attach it to list or kanban types.

custom/Espo/Custom/Resources/metadata/clientDefs/Meeting.json

{
    "viewSetupHandlers": {
        "detail": [
            "__APPEND__",
            "custom:patient-change-handler"​
        ],

        "record/detail": [
            "__APPEND__",
            "custom:patient-change-handler"
        ],

​        "record/detailSmall": [
            "__APPEND__",
            "custom:patient-change-handler"
        ],

​        "record/edit": [
            "__APPEND__",
            "custom:patient-change-handler"
        ],

​        "record/editSmall": [
            "__APPEND__",
            "custom:patient-change-handler"
        ]
​​​​
    }
}

The third step is to clear cache and rebuild.

[item]

Thank you so much
this is a great tutorial for me understand... easy

and this "Espo now provides an excellent facility (View setup handlers) that allows defining in metadata, a custom functionality that will be injected inside a defined group of views, instead of having to create a brand new view class"

Now i understand better when use hander... definition is a little hard for me to understand, but now i can replicate-it

[telecastg]

You're very welcome