[VUE] Custom action button in the edit form

[jhemela]

Hi,

I know how to create a custom action button in the form, but How can you pass the evenData to the click event?
Like eventRecord, resource ect...

eventEditFeature: {
		readOnly : false,
		items: {
			addNew        : {
				// Top position
				weight : 0,
				type   : 'button',
				text   : 'Accepteren',
				icon   : 'b-fa b-fa-plus',
				onClick: ({e}) => {
					console.log(e)
				}
			}, 
			nameField     : false, // note: hide name field
	},

[pmiklashevich]

If you define the handler as a regular function (not arrow function), the scope will be bound to the button. Then you can simply query the parent component and check the eventRecord property on the corresponding feature.

const calendar = new Calendar({
    features : {
        eventEdit : {
            items : {
                addNew : {
                    // Top position
                    weight : 0,
                    type   : 'button',
                    text   : 'Accepteren',
                    icon   : 'b-fa b-fa-plus',
                    onClick() {
                        console.log(this.up('calendareventeditor').record); // kind of private, but in case you need editor popup
                        console.log(this.up('calendar').features.eventEdit.eventRecord); // up to the calendar instance
                        console.log(this.up('calendar') === calendar);
                    }
                }
            }
        },

[jhemela]

Hi,

Okay, thanks, now it works!

[Animal]

Just on a matter of style, to keep nested widgets as clean as possible (they can get quite deep), I would do it like this:

const calendar = new Calendar({
    features : {
        eventEdit : {
            items : {
                addNew : {
                    // Top position
                    weight  : 0,
                    type    : 'button',
                    text    : 'Accepteren',
                    icon    : 'b-fa b-fa-plus',
                    

                // Will go upwards to resolve this function reference
                onClick : 'up.onMyButtonClick'
            }
        }
    }
},

// The "up." function name syntax will resolve here
onMyButtonClick() {
    console.log(this.features.eventEdit.eventRecord);
}
});

Organize handler functions at the top level, in the Calendar rather than scattering them inside the Calendar's configuration.