how to add a new button near the create button in the form view in odoo 15

Question

Hello everyone! I'm currently working on 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: code snippet 1

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: code snippet 2

Answer 1

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">