Extending events in a view

[BattleMetalChris]

I'm extending a view, the original of which has a list of click events:

events: {
   'click [data-action="run"]': function () {
        this.run();
        this.afterRun();
   },
   'click [data-action="refresh"]': function () {
      this.run();
   },
   'click [data-action="printPdf"]': function () {
      this.actionPrintPdf();
   },

..... plus a bunch more

I want to add the following to this list in my extended view

'click [data-action="exportSpecialReport"]': function () {
    this.actionExportSpecial();
}
​

While also preserving the original list from the parent.

If I add just my new click event in the new view then it overwrites the parent's events object, so none of the original click events work.

I can make it work by copying the code for the whole event object from the parent .js file and adding my new entry on the end, but this isn't great. Is there any way to add an item to the object without having to redefine everything?

[Kharg]

When you extend a view that already has its events and you want to add more events, do it the following way:

setup() {
super.setup();

this.events['click a[data-action="test"]'] = (e) => {

};
}​ 

[yuri]

Use addHandler https://docs.espocrm.com/development/view/#addhandler. The events property is not recommended.

[BattleMetalChris]

yuri that's much tidier, thanks.

However, if I put it in the setup property, it completely overrides that property in the parent view - how do I call the parent view's setup method from my extended one?

[yuri]

It should not override. How exactly you define the event and setup method.

[BattleMetalChris]

I'm extending the list report in the Advanced Pack to add a new item in the dropdown (which is in the 'specialreport' template)

define('advanced-patch:views/report/reports/list', ['advanced:views/report/reports/list'], function (Dep) {

    return Dep.extend({

      template: 'advanced-patch:report/reports/specialreport',

      setup: function(){

         this.addHandler('click', '[data-action="exportSpecialReport"]', (event, target) => {
            this.actionExportPFC();
         });
      },

   });
});

With the setup property in there, the setup function in advanced:views/report/reports/list never gets called. If I remove the property from my view, it gets called in the parent as normal.

[yuri]

setup: function () {
    Dep.prototype.setup.call(this);
},

[BattleMetalChris]

Awesome thanks! That works perfectly now.