Odoo - My custom button in is getting duplicated multiple times

Question

THIS IS RESULT

I am working on Odoo version 15.

I created a new button for opening a wizard. My custom button is located near of the Create buton in the header.

Let me share my code.

This is my JS code

custom_create.js

odoo.define('button_near_create.kanban_button_crm', function(require) {
    "use strict";

    var KanbanController = require('web.KanbanController');
    var KanbanView = require('web.KanbanView');
    var viewRegistry = require('web.view_registry');

    var KanbanButton = KanbanController.extend({
        buttons_template: 'button_near_create.button.crm',
        events: _.extend({}, KanbanController.prototype.events, {
            'click .open_wizard_action_kanban_crm': '_OpenWizardKanban',
        }),
        _OpenWizardKanban: function () {
        this.do_action({
            type: 'ir.actions.act_window',
            res_model: 'contact.wizard',
            name: 'Create Opportunity',
            view_mode: 'form',
            view_type: 'form',
            views: [[false, 'form']],
            target: 'new',
            res_id: false,
            context: {
                'form_view_ref': 'et_crm.crm_create_wizard_form'
            },
        });
    }
    });

    var ContactCreateKanbanController = KanbanView.extend({
        config: _.extend({}, KanbanView.prototype.config, {
            Controller: KanbanButton
        }),
    });

    viewRegistry.add('button_in_kanban_crm', ContactCreateKanbanController);
});

crm_custom_create.xml

<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
   <t t-extend="KanbanView.buttons" t-name="button_near_create.button.crm">
       <t t-jquery="button" t-operation="replace">
               <button t-if="widget.modelName == 'crm.lead'"
                       class="btn btn-primary open_wizard_action_kanban_crm oe_highlight"
                       type="button">Search and Create</button>
       </t>
   </t>
</templates>

custom_create.xml

<odoo>
    <record id="crm_lead_kanban_custom_create_inherit_js_class" model="ir.ui.view">
        <field name="name">crm.lead.kanban.inherit</field>
        <field name="model">crm.lead</field>
        <field name="inherit_id" ref="crm.crm_case_kanban_view_leads"/>
        <field name="arch" type="xml">
            <xpath expr="//kanban" position="attributes">
                <attribute name="js_class">button_in_kanban_crm</attribute>
            </xpath>
        </field>
    </record>
</odoo>

manifest.py

'data': [
        'views/custom_create.xml',
        'views/views.xml',
        'wizards/custom_create_wizard_view.xml',
    ],
    "assets": {
        'web.assets_backend': [
            '/et_crm/static/src/js/custom_create.js'
        ],
        'web.assets_qweb': [
            '/et_crm/static/src/xml/crm_custom_create.xml'
        ],
    }

THIS IS RESULT

I used the same logic for Contacts Kanban view and it worked pretty well. Contact Kanban View

Answer 1

First i found the source code of the Kanban.buttons

<t t-name="KanbanView.buttons">
<div>
    <button t-if="!noCreate" type="button" t-attf-class="btn #{btnClass} o-kanban-button-new" title="Create record" accesskey="c">
        <t t-esc="create_text || _t('Create')"/>
    </button>
</div>

i still didn't understand the reason of this duplication but when i see this i tried the add my button with different approach. I change logic of

-> find button -> add button

to

-> find div -> add button to inside

<templates id="template" xml:space="preserve">
   <t t-extend="KanbanView.buttons" t-name="button_near_create.button.crm">
       <t t-jquery="div" t-operation="prepend">
               <button t-if="widget.modelName == 'crm.lead'"
                       class="btn btn-primary open_wizard_action_kanban_crm oe_highlight"
                       type="button">Search and Create</button>
       </t>
   </t>
</templates>