I'm customizing a form view in Odoo, and I'm facing an issue while trying to add a custom button next to the 'Create' button. I've attempted to use expressions and different positioning methods, but unfortunately, it's not working as expected.
Here's the code snippet I've tried so far:
Although this code snippet works, it places the custom button inside the form instead of next to the menu button. The button appears within the header section of the form. However, my goal is to have the custom button positioned directly beside the 'Create' button in the form's header.
I also tried using as follows, but it resulted in an error since the button couldn't be located:
Extend the FormView.buttons template to add your custom button and override the render_button function to add the click (
Extend the FormView
and use js_class
on the form
tag)
Extend the web template:
<?xml version="1.0" encoding="UTF-8"?>
<templates>
<t t-extend="FormView.buttons" t-name="My.buttons">
<t t-jquery="button.o_form_button_create" t-operation="after">
<button type="button" class="btn btn-primary custom_button">
Custom Button
</button>
</t>
</t>
</templates>
Create a custom form controller:
/** @odoo-module **/
import FormController from 'web.FormController';
import FormView from 'web.FormView';
import viewRegistry from 'web.view_registry';
import core from 'web.core';
var qweb = core.qweb;
var CustomFormController = FormController.extend({
_ExecuteCustomAction: function () {
},
renderButtons: function ($node) {
var $footer = this.footerToButtons ? this.renderer.$el && this.renderer.$('footer') : null;
var mustRenderFooterButtons = $footer && $footer.length;
if ((this.defaultButtons && !this.$buttons) || mustRenderFooterButtons) {
this.$buttons = $('<div/>');
if (mustRenderFooterButtons) {
this.$buttons.append($footer);
} else {
this.$buttons.append(qweb.render("My.buttons", {widget: this}));
this.$buttons.on('click', '.o_form_button_edit', this._onEdit.bind(this));
this.$buttons.on('click', '.o_form_button_create', this._onCreate.bind(this));
this.$buttons.on('click', '.o_form_button_save', this._onSave.bind(this));
this.$buttons.on('click', '.o_form_button_cancel', this._onDiscard.bind(this));
this.$buttons.on('click', '.custom_button', this._ExecuteCustomAction.bind(this));
this._assignSaveCancelKeyboardBehavior(this.$buttons.find('.o_form_buttons_edit'));
this.$buttons.find('.o_form_buttons_edit').tooltip({
delay: {show: 200, hide:0},
title: function(){
return qweb.render('SaveCancelButton.tooltip');
},
trigger: 'manual',
});
}
}
if (this.$buttons && $node) {
this.$buttons.appendTo($node);
}
},
});
var CustomFormView = FormView.extend({
config: _.extend({}, FormView.prototype.config, {
Controller: CustomFormController,
}),
});
viewRegistry.add('custom_form_view', CustomFormView);
Add the files to the manifest file:
'assets': {
'web.assets_backend': [
"MODULE/static/src/js/form_view_buttons.js",
],
'web.assets_qweb': [
"MODULE/static/src/xml/form_view_buttons.xml",
],
},
Set the js_class
attribute on the form view tag:
<form js_class="custom_form_view">