I'm trying to create a simple javascript code in odoo 10. So Under myModule\static\src\js folder I added a test.js file containing this code:
alert("it works!!");
And Under myModule\views I added an xml file containing this code:
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<data>
<template id="assets_backend" name="solixy assets" inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<script type="text/javascript" src="/solixyProject/static/src/js/test.js"></script>
</xpath>
</template>
</data>
And it works fine when I update my module and refresh odoo. Now I want this js code to be called when I press a button. So I changed js code like this:
function clickMe(){
alert("it works!!");
};
Then in my form I added this button:
<button name="test_js" string="Test Javascript File" type="object" class="btn-primary" onclick="clickMe()"/>
Now the button is shown but I don't have my alert box!!
Thank you for your help.
It looks like I'm missing many other javascript code so my method can work. We can't just add a method like this:
function clickMe(){
alert("it works!!");
};
This is the correct js code:
odoo.define('solixyProject.kanban_view', function (require){
"use strict";
var form_widget = require('web.form_widgets');
var core = require('web.core');
var _t = core._t;
var QWeb = core.qweb;
form_widget.WidgetButton.include({
on_click: function() {
if(this.node.attrs.custom === "click"){
alert("It works!!");
return;
}
this._super();
},
});
});
And this is the correct xml code:
<button string="Test Javascript Onclick Method" custom="click" />
This question helped me a lot:
Odoo javascript onclick event
Related
I am using Odoo 10. Trying to inherit and modify nv.d3.js file in web module but no effect and no error is showing. Please check what I am doing wrong here.
my .js file:
odoo.define('budget_management.graph', function(require){
"use strict";
var WebClient = require('web.nv.d3');
var Model = require('web.Model');
var utils = require('web.utils');
WebClient.contentGenerator.include({
trowEnter.append("td")
.classed("value",true)
.html(function(p, i) {
var myval = valueFormatter(p.value, i)
//alert(myval)
return myval+'%'
});
var html = table.node().outerHTML;
if (d.footer !== undefined)
html += "<div class='footer'>" + d.footer + "</div>";
return html;
});
});
And my xml file contains:
<template id="assets_backend" name="extend_web_nvd3js assets" inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<script type="text/javascript" src="/budget_management/static/src/js/inherit.nv.d3.js"></script>
</xpath>
</template>
if I change the code from the core module it is working but unable to inherit and implement this.
I want to change a function in js file. How to do it? Is there any ways to override the function?
addons/web/static/src/js/views/form_common.js,
i want to change the function-get_search_result: function(search_val){}
dataset.name_search(search_val, self.build_domain(), 'ilike', 160).done(function(_data) {self._search_create_popup("search", _data);}
need to change the value 160 to something else
Thanks in advance
There is a good answer/example on this question, which gives a pretty good overview. That example is actually a bit more in depth than necessary for a global JavaScript change.
If you identify the function you want to override, then it's mostly just a matter of mirroring core and making the override(s) you want. Here's an example overview of how to change the name_search JavaScript behavior:
your_module/manifest.py
...
'data': [
...
'views/assets.xml',
...
],
...
your_module/views/assets.xml
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<data>
<template id="assets_backend" name="custom assets" inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<script type="text/javascript" src="/your_module/static/src/js/custom.js"></script>
</xpath>
</template>
</data>
</odoo>
your_module/static/src/js/custom.js
odoo.define('your_module.custom_feature', function(require) {
"use strict";
Class = require('web.Class');
mixins = require('web.mixins');
var DataSet = Class.extend(mixins.PropertiesMixin, {
name_search: function (name, domain, operator, limit) {
/* Custom code to override/extend core */
},
});
return {
DataSet: DataSet,
};
});
You can do it like they did in google_calendar:
odoo.define('youmodule.yourmodule', function (require) {
"use strict";
var CompletionFieldMixin = require('web.CompletionFieldMixin');
var _t = core._t;
var QWeb = core.qweb;
CompletionFieldMixin.include({
// You need to redefine the function here
});
I tried to add a button in Invoice form and i need to initiate a call in js
So i done Coding in Js as well as in XML Please find below.
In JS
odoo.define('test_module.print_button', function (require) {
"use strict";
var core = require('web.core');
var form_widget = require('web.form_widget');
var form_common = require('web.form_common');
var formats = require('web.formats');
var QWeb = core.qweb;
var _t = core._t;
form_widget.WidgetButton.include({
on_click:function() {
if(this.node.attrs.custom === "print"){
console.log('Success');
}
else{
this._super();
}
},
});
});
in XML i have inherited Account Invoice Form view
<odoo>
<data>
<record model="ir.ui.view" id="invoice_form_test">
<field name="name">invoice.form.test</field>
<field name="model">account.invoice</field>
<field name="inherit_id" ref="account.invoice_form"/>
<field name="arch" type="xml">
<header position="inside">
<button type="action" string="Print Test" icon="fa-print" custom="print" />
</header>
</field>
</record>
</data>
</odoo>
This won't working , while clicking it shows like
TypeError: exec_workflow() takes exactly 4 arguments (3 given)
Do i need to add anything more to work it. Please comment.
Also Please suggest any way to pass button click to js from form view.
Thanks
you imported form widget wrongly.
var form_widget = require('web.form_widgets'); // correct one
How Can I create a simple widget in odoo10?? Corresponding code for
following in odoo10? HOw can i convert this code to odoo10?
local.HomePage = instance.Widget.extend({
start: function() {
this.$el.append("<div>Hello dear Odoo user!</div>");
var greeting = new local.GreetingsWidget(this);
return greeting.appendTo(this.$el);
},
});
Create Widgets and Templates in Odoo-10
Widget:
Widget is different or alternate representation to display a screen, fields and attributes in odoo.
Widget allows to change view using different rendering templates and also allows to design as you want.
Example:
widget_name.js
odoo.define('module.model_name', function(require) {
"use strict";
var Widget = require('web.Widget');
var core = require('web.core');
var Model = require('web.Model');
var QWeb = core.qweb;
var _t = core._t;
// here we are getting the value in an array.
var widget_name = Widget.extend({
//render your template
"template" : "template_name",
//initialize
init : function () {
var self = this;
this._super(parent);
//initialize values to variables
}
//Binding Events
events : {
'click .class_ex': 'method1',
'click .class_ex1': 'method2',
},
start : function() {
var self = this;
this._super(parent);
//your functionality code and logic
},
//creating functions
method1:function(){
//do something when click event fire on class_ex
},
method2:function(){
//do something when click event fire on class_ex
},
});
return widget_name;
});
You need to add this .js & .css files in odoo like this.
assets_backend.xml
<odoo>
<data>
<template id="assets_backend" inherit_id="web.assets_backend">
<xpath expr="script[last()]" position="after">
<script type="text/javascript" src="/module/static/src/js/widget_name.js"></script>
<link href="/module/static/src/css/home.css" rel="stylesheet"></link>
</xpath>
</template>
</data>
</odoo>
Design Widget Template:
Create XML and add xml:space="preserve" as argument in template tag.
t-name is name of your template that is defined in .js file and the same name is used as widget name in XML while you use it.
tmpl.xml
<?xml version="1.0"?>
<templates id="template" xml:space="preserve">
<t t-name="template_name">
<div class=”myclass”>
//design your template here
<div class=”class_ex”>
//body
</div>
<div class=”class_ex1”>
//body
</div>
</div>
</t>
</templates>
NOTE: No need to write odoo tag in tmpl.xml file.
It is important to have the template name to be the same, as given in your in .js (widget_name.js) file.
How to use a widget
Use widget by action or object button.
Shown below we add template_name to action_registry, so now we can use this name to execute using XML.
Example:
<record id="template_id" model="ir.actions.client">
<field name="name">template name</field>
<field name="tag">template_name</field>
<field name="target">new</field>
</record>
Set your "template name" in HERE
You can also write some events on your button, fields and then make a function that handles event and execute function that renders your template. Return this id (template_id) as a result when object button clicked.
You can use your widget like this also.
<field name="mobile" widget="template_name" />
I'm developing a website with Odoo v8. I want to write a snippet that its struct is load by javascript. Bellow are my code ...
Firstly, I have a snippet struct:
<template id="snippet_hello" inherit_id="website2.snippets" name="Snippet Hello">
<xpath expr="//div[#id='snippet_structure']" position="inside">
<div class="oe_snippet">
<div class="oe_snippet_thumbnail">
<img class="oe_snippet_thumbnail_img" src="/path_to_block_icon/block_icon.png"/>
<span class="oe_snippet_thumbnail_title">Hello</span>
</div>
<section class="oe_snippet_body">
<div class="oe_snippet_hello">Hello ...</div>
</section>
</div>
</xpath>
<xpath expr="//div[#id='snippet_options']" position="inside">
<div data-snippet-option-id='snippet_hello'
data-selector=".oe_snippet_hello"
data-selector-siblings="p, h1, h2, h3, blockquote, .well, .panel">
</div>
</xpath>
</template>
Then I have a little javascript code to render snippet content:
(function () {
'use strict';
var website = openerp.website;
qweb = openerp.qweb;
qweb.add_template('/path_to_snippet_qweb_template/snippet_template_filename.xml');
website.snippet.animationRegistry.hello = website.snippet.Animation.extend({
selector: ".oe_snippet_hello",
start: function(){
var $content = $(qweb.render('website.snippet_hello', {a:1}));
$content.appendTo(this.$target);
},
});
})();
Then I have a QWeb template to display my struct content (filename: snippet_template_filename.xml):
<?xml version="1.0" encoding="utf-8"?>
<templates id="template" xml:space="preserve">
<t t-name="website.snippet_hello">
<div contenteditable="false">
<p>Hello snippet</p>
<t t-esc="a"/>
</div>
</t>
</templates>
Problem is this line:
var $content = $(qweb.render('website.snippet_hello', {a:1}));
occurred error that "Template 'website.snippet_hello' not found"
I noticed that when I logged in as Admin (haven't tried another account), it works well. It just occurred error when I logged out on my browser.
Please let me your advice, thanks!
This is an old question related to an obsolete Odoo's version but answer is still relevant today (Odoo v11/12/13) :
Template Not found could occur when:
template is not loaded
template names are not equals between your js and your template's xml files. Templates names are case sensitive.
Loading a template:
Usually you save your templates in your project as /your_module/static/src/xml/snippet_template_filename.xml, and you must load this xml file on /your_module/__manifest__.py by adding:
'qweb': [
"static/src/xml/snippet_template_filename.xml",
],
or shorthand:
'qweb': [
"static/src/xml/*.xml",
],
You install/update your_module in odoo's App menu, then you can verify that your template is loaded by looking at http://localhost:8069/web/webclient/qweb?mods=your_module, it should returns your templates.
You can also look at favorite browser network inspector to check the http://localhost:8069/web/webclient/qweb?mods=[...] request and checks that in mods your_module is loaded properly.
Template can be used in your js like in this (Odoo >= v11):
odoo.define('your_module.NameOfYourJs', function (require) {
"use strict";
var QWeb = core.qweb;
[...]
var result = QWeb.render('website.snippet_hello', {a:1});
});
Note: to debug assets you can use http://localhost:8069/web?debug=assets.
Hope this helps!