Odoo10 Javascript Widget Action Not Working: Clientwidget Is Not A Function

I'm still learning how to properly add your own javascript code. I'm trying to add my own stuff into Odoo backend. I was carefully reading 'Building Interface Extensions' guide (ht

Solution 1:

I'm also new to Odoo and JS, and I have tried something and that is given below:

In your /static/src/js/your_.js file, add the code:

    odoo.define('zbtoken.map', function (require) {
        "use strict";

    varWidget = require('web.Widget');
    var core = require('web.core');
    var utils = require('web.utils');


    varHomePage = Widget.extend({
       template: "HelloJS",

       init: function(parent) {
            this._super(parent);
            console.log("Hello JS, I'm inside of init.");
       },


    start: function() {
            console.log("Hello JS, I'm inside of start.");
     },
   });

   core.action_registry.add('HelloJS', HomePage);

   returnHomePage;
   }); 

In your /static/src/xml/your_.xml file:

<?xml version="1.0"  encoding="UTF-8"?><templatesxml:space="preserve"><tt-name="HelloJS"><div></div></t></templates>

In your /views/your_.xml file:

<?xml version="1.0" encoding="UTF-8"?><odoo><data><templateid="assets_backend"name="petstore"inherit_id="web.assets_backend"><xpathexpr="."position="inside"><scripttype="text/javascript"src="/your_module_name/static/src/js/your_js_file.js"></script></xpath></template><recordid="hellojs_id"model="ir.actions.client"><fieldname="name">HelloJS</field><fieldname="tag">HelloJS</field></record><menuitemid="hellojs_menu"name="HelloJS"action="hellojs_id"/></data></odoo>

In manifest.py:

'data': [ 
     'views/your_.xml file',  
      ],

     'qweb': ['static/src/xml/your_.xml file'],

It will work. Please try it.

Solution 2:

You need to design a Template by your self.

You'll find reference code in odoo it self for create template.

add you template file in manifest file as 'qweb': ["static/src/xml/my_template.xml"]

odoo.define('rhp.main', function (require) {
"use strict";

var core = require('web.core');
var _t = core._t;
var _lt = core._lt;
varWidget = require('web.Widget');
var QWeb = core.qweb;

varExplorer = Widget.extend({
    init: function(parent, options) {
        console.log('Explorer inited');
    },
    start: function() {
        console.log('Explorer started');
    },
});
//exploreraction is must be your template name        
core.action_registry.add('exploreraction', Explorer);

returnExplorer;


});

Examplea Template code:

<tt-name="exploreraction" ><divid="my_temp_id"><divclass="ex_button"><divclass="cancle_btn"><buttonclass="btn btn-danger">Cancle</button></div><divclass="Add_btn"><buttonclass="btn btn-success">Add </button></div></div></div></t>

create assets_backend.xml with your other xml files.

/view/assets_backend.xml --> Here you need to add javasscript file path.

<?xml version="1.0"?><odoo><data><templateid="assets_backend"inherit_id="web.assets_backend"><xpathexpr="script[last()]"position="after"><scripttype="text/javascript"src="/static/src/js/rhp_main.js"></script></xpath></template><templateid="assets_common"inherit_id="web.assets_common"><xpathexpr="script[last()]"position="after"></xpath></template></data></odoo>

Solution 3:

I am not familiar with Bounty and I have solution for this link_to_the_screenshot_of_desired_output. It will work fine.

Create your js file in /module_name/static/src/js/your_js_file.js and 
add the following code :


   odoo.define('mypetstore.test_js', function (require) {
    "use strict";

     varWidget = require('web.Widget');
     var core = require('web.core');
     varModel = require('web.Model');

     varProductsWidget = Widget.extend({
         template: "ProductsWidget",
         init: function(parent, products, color) {
         this._super(parent);
         this.products = products;
         this.color = color;
    },
  });

  varHomePage = Widget.extend({

    start: function() {
        var products = newProductsWidget(
            this, ["cpu", "mouse", "keyboard", "graphic card", 
                  "screen"], "#00FF00");
        products.appendTo(this.$el);
      },    
    });
    core.action_registry.add('ProductsWidget', HomePage); 
   }); 

Create your xml file in /module_name/static/src/xml/your_xml_file.xml and add the following code:

<?xml version="1.0"  encoding="UTF-8"?><templatesxml:space="preserve"><tt-name="ProductsWidget"><div><tt-foreach="widget.products"t-as="product"><spanclass="oe_products_item"t-attf-style="background-color: {{ widget.color 
                 }};"><tt-esc="product"/></span><br/></t></div></t></templates>

Create your css file in /module_name/static/src/css/your_css_file.css and add the following code:

.oe_products_item {
     display: inline-block;
     padding: 3px;
     margin: 5px;
     border: 1px solid black;
     border-radius: 3px;
     }

Create your view's xml file in /module_name/views/your_xml_file_.xml and add the following code :

<?xml version="1.0" encoding="UTF-8"?><odoo><data><templateid="assets_backend"name="give_name"inherit_id="web.assets_backend"><xpathexpr="."position="inside"><scripttype="text/javascript"src="/module_name/static/src/js/your_js_file_name.js"></script><linkhref="/module_name/static/src/css/your_css_file.css" 
             ></link></xpath></template><recordid="template_id"model="ir.actions.client"><fieldname="name">ProductsWidget</field><fieldname="tag">ProductsWidget</field></record><menuitemid="home_page_menu"name="Home Page"action="template_id"/></data></odoo>

Add the following codes in manifest.py:

'data': [ 
    'views/your_xml_file.xml',
     ],
    'qweb': ['static/src/xml/pet.xml'],