How to extend Qweb template in Odoo 15?

Question

Hi i am trying to extend a Qweb template web.sign_name_and_signature and remove the option Auto.

Here is what i did.

*.xml

      <?xml version="1.0" encoding="UTF-8"?>
      <templates xml:space="preserve">
        <t t-name="digital_sign_extend.sign_name_and_signature" t-extend="web.sign_name_and_signature">
          <t t-jquery="div.card-header" t-operation="replace">
            <div class="card-header">
                <div class="row no-gutters">
                    <div class="col-auto">
                        <a role="button" href="#" t-attf-class="o_web_sign_draw_button mr-2 btn btn-light {{ widget.signMode === 'draw' ? 'active': '' }}">
                            Draw
                        </a>
                    </div>

                    <div class="col-auto">
                        <a role="button" href="#" t-attf-class="o_web_sign_load_button mr-2 btn btn-light {{ widget.signMode === 'load' ? 'active': '' }}">
                            Load
                        </a>
                    </div>
                    <div t-attf-class="o_web_sign_draw_clear col-auto ml-auto {{ widget.signMode !== 'draw' ? 'd-none' : '' }}">
                        <a role="button" href="#" class="btn btn-link">
                            Clear
                        </a>
                    </div>
                    <div t-attf-class="o_web_sign_auto_select_style col-auto ml-auto {{ widget.signMode !== 'auto' ? 'd-none' : '' }}">
                        <a role="button" href="#" class="btn btn-link">
                            Style
                        </a>
                    </div>
                    <div t-attf-class="o_web_sign_load_file col-auto {{ widget.signMode !== 'load' ? 'd-none' : '' }}">
                        <input type="file" role="button" name="files[]" class="btn btn-link py-0"/>
                    </div>
                </div>
            </div>
          </t>
        </t>
      </templates>

*.js

      odoo.define('digital_sign_extend.signature_form',function(require){
        var SignatureForm = require('portal.signature_form').SignatureForm;
        var NameAndSignature = require('web.name_and_signature').NameAndSignature;
        var publicWidget = require('web.public.widget');

      // Extend the name and signature template to remove option auto
      console.log('am here');
      var BillaNameAndSignature = NameAndSignature.extend({
          template: 'digital_sign_extend.sign_name_and_signature',
          xmlDependencies: [
              '/web/static/src/legacy/xml/name_and_signature.xml',
              '/digital_sign_extend/static/src/xml/digital_sign.xml'
          ],
          /**
           * @override
           * prevent autofocus on the name field, since the signature widget
           * will be included in a more complex form and focusing in the middle
           * of the form is weird
           */
          focusName: function() {
              return;
          },
      });

      var SignatureForm_extend = SignatureForm.extend({
        template: 'digital_sign_extend.sign_name_and_signature',
        xmlDependencies: [
            '/web/static/src/legacy/xml/name_and_signature.xml',
            '/digital_sign_extend/static/src/xml/digital_sign.xml'
        ],
        init: function (parent, options) {
            this._super.apply(this, arguments);

            this.csrf_token = odoo.csrf_token;

            this.callUrl = options.callUrl || '';
            this.rpcParams = options.rpcParams || {};

            this.nameAndSignature = new BillaNameAndSignature(this,
                options.nameAndSignatureOptions || {});
        },
      });

      });

manifes.py

    # -*- coding: utf-8 -*-
    {
        'name': "digital_sign_extend",

        'summary': """
            Short (1 phrase/line) summary of the module's purpose, used as
            subtitle on modules listing or apps.openerp.com""",

        'description': """
            Long description of module's purpose
        """,

        'author': "My Company",
        'website': "http://www.yourcompany.com",

        # Categories can be used to filter modules in modules listing
        # Check https://github.com/odoo/odoo/blob/14.0/odoo/addons/base/data/ir_module_category_data.xml
        # for the full list
        'category': 'Uncategorized',
        'version': '0.1',

        # any module necessary for this one to work correctly
        'depends': ['base','web'],

        # always loaded
        'data': [
            # 'security/ir.model.access.csv',
            'views/views.xml',
            'views/templates.xml',
        ],
        'assets':
        {'web.assets_frontend':[
            # 'digital_sign_extend/static/src/xml/digital_sign.xml',
            'digital_sign_extend/static/src/js/name_and_sign.js',
        ],
        },
        # only loaded in demonstration mode
        'demo': [
            'demo/demo.xml',
        ],
    }

But still, it's showing the Auto option. How can I resolve this?

Answer 1

Finally got the solution.

*.js

      odoo.define('digital_sign_extend.signature_form',function(require){
        "use strict";
        var NameAndSignature = require('web.name_and_signature').NameAndSignature;
        var publicWidget = require('web.public.widget');
      NameAndSignature.include({
        template:'digital_sign_extend.sign_name_and_signature',
        xmlDependencies: (NameAndSignature.prototype.xmlDependencies || []).concat(
            ['/digital_sign_extend/static/src/xml/digital_sign.xml']
        ),
      });

      });