I have succesfully extended the "PosTicket" template from Point_of_Sale module and included couple of fields in that existing template. I have also written the function similar to that in screen.js (render_reciept) to get the values of the newly added fields. The problem I'm facing is, I am not able to call that function. How to execute that function?
This is the template that was extended:
<?xml version="1.0" encoding="UTF-8"?>
<template>
<t t-extend="PosTicket">
<t t-jquery=".receipt-orderlines"
t-operation="before">
customer name:<t t-esc="customer_name"/>
<br />
customer street:<t t-esc="street"/>
<br />
customer city:<t t-esc="city"/>
<br />
</t>
</t>
</template>
And this is the js file :
odoo.define('custom_module.print_cust_details_pos_bill', function (require) {
"use strict";
var core = require('web.core');
var screens = require('point_of_sale.screens');
var gui = require('point_of_sale.gui');
var QWeb = core.qweb;
var BillScreenWidget = screens.ReceiptScreenWidget.extend({
template: 'BillScreenWidget',
show: function(){
this._super();
var self = this;
this.render_receipt();
},
render_receipt: function(){
console.log("Render Reciept funtion called");
this._super();
//RKD-Start
var customer = this.pos.get_order().get_client();
var street = '';
var city ='';
var customer_name='';
if (customer != undefined)
{
customer_name = customer.name;
street = customer.street;
city=customer.city;
}
this.$('.pos-receipt-container').html(QWeb.render('PosTicket',{
widget:this,
order: order,
receipt: order.export_for_printing(),
orderlines: order.get_orderlines(),
paymentlines: order.get_paymentlines(),
customer_name:customer_name,
customer_street:street,
city:city,
}));
//RKD-End
}
});
gui.define_screen({name:'receipt', widget: custom_module.BillScreenWidget});
});
have you tried to call it into start? That's called whenever the widget is injected in the DOM and looks like the place to do that.
Check "using a widget" in official docs.
Related
I added another button to print receipt.So, one that prints the default receipt when clicked and another that prints a different template. Here is my code which print the same receipt , my question is how to modify for the second button another template similar to the default with some modifications.
Any help please? Thanks.
odoo.define('pos_print.pos_report', function (require) { "use
strict";
var screens = require('point_of_sale.screens'); console.log("screens
: " + screens)
var gui = require('point_of_sale.gui'); var core =
require('web.core'); var _t = core._t;
screens.ReceiptScreenWidget.include({
renderElement: function() {
var self = this;
this._super();
this.$('.next').click(function(){
if (!self._locked) {
self.click_next();
}
});
this.$('.back').click(function(){
if (!self._locked) {
self.click_back();
}
});
this.$('.button.order-print').click(function(){
if (!self._locked) {
self.print();
}
});
},
}); });
<templates id="point_of_sale.template" xml:space="preserve">
<t t-extend="ReceiptScreenWidget">
<t t-jquery=".button.print" t-operation="after">
<div class="button order-print">
<i class='fa fa-print'></i>
Print POS Order
</div>
</t> </t> </templates>
you need to create new print method in ReceiptScreenWidget:
renderElement: function() {
var self = this;
this._super();
this.$('.next').click(function(){
if (!self._locked) {
self.click_next();
}
});
this.$('.back').click(function(){
if (!self._locked) {
self.click_back();
}
});
this.$('.button.print').click(function(){
if (!self._locked) {
self.print();
}
});
this.$('.button.order-print').click(function(){
// To print new format
if (!self._locked) {
self.myPrint();
}
});
},
myPrint: function () {
// MyNewOrderReceipt is your new receipt template
// YOUR_PARAMS is parameters required in your template
var receipt = QWeb.render('MyNewOrderReceipt', YOUR_PARAMS);
this.pos.proxy.printer.print_receipt(receipt);
this.pos.get_order()._printed = true;
this.lock_screen(false);
},
note: this is assuming you are aiming to print the new template directly to printer without preview, if you want to change the receipt screen you need to override ActionButtonWidget.
I have a model called student. I also have form view, tree view for the student model. What I want to do is call my custom javascript file only when the form view of the student model is loaded. Is it possible? How to achieve this? Thanks.
What I tried is .....
openerp.student= function (instance) {
instance.web.FormView.include({
load_form: function(data) {
var self = this;
if (data.model === "student") {
altert('HELLO');
console.log('BLAH BLAH');
}
return this._super(data);
},
});
};
You can override the load_form method of FormView.
openerp.module_name= function (instance) {
instance.web.FormView.include({
load_form: function(data) {
var self = this;
if (data.model === "student") {
// Your custom code
}
return this._super(data);
},
});
};
To add the above code check this link inherit-or-override-js
It is possible to add a new view mode by extending FormFiew as Odoo did with account_move_line_quickadd.
openerp.your_module_name = function (instance) {
var _t = instance.web._t,
_lt = instance.web._lt;
var QWeb = instance.web.qweb;
instance.web.your_module_name = instance.web.your_module_name || {};
instance.web.views.add('student_form', 'instance.web.StudentFormView');
instance.web.StudentFormView = instance.web.FormView.extend({
load_form: function(data) {
var self = this;
// Add your custom code here
return this._super(data);
},
});
};
You just need to add the new mode to window action.
<record id="student_action" model="ir.actions.act_window">
<field name="name">student.action</field>
<field name="res_model">student</field>
<field name="view_mode">student_form,tree</field>
...
I would like to create a module which controls edit button on certain conditions. I tried the following code in js but I got no effect. So I would like to know how to extend a function in js.
formView.include({
init:function(){
var edits = new Model('sale.order');
edits.query(['validity_date']);
console.log(validity_date)
},
on_button_edit: function(){
this._super();
You can write something like this in the js file. I wrote some examples to help you.
openerp.custom_edit_button = function (instance) {
var _t = instance.web._t;
instance.web.FormView.include({
init: function() {
console.log('JS loaded')
this._super.apply(this, arguments);
},
to_edit_mode: function(){
// examples of useful methods
var field_values = this.get_fields_values();
var ids = this.get_selected_ids();
var id = field_values['id'];
var date = field_values['date'];
var model = this.model;
console.log(field_values)
console.log(ids)
console.log(id)
console.log(model)
console.log(date)
console.log(Date.today())
date_to_compare = new Date(date);
console.log(date_to_compare)
if(date_to_compare < Date.today()){
error = this.error;
var QWeb = instance.web.qweb;
var dialog = new instance.web.Dialog(this, {
title: _t("Set new expiry date"),
width: '30%',
size: 'medium',
/*dialogClass: 'oe_act_window',*/
buttons: [
{ text: _t("OK"), click: function() { self.set_new_expiry_date(); }},
{ text: _t("Close"), click: function() { dialog.close(); return; }
},
],
}, QWeb.render('custom_edit_button.expiry_date_form', {error: error})).open();
}
this._super();
}
});
}
So, if the expiry date is in the past, the form is going to appear to change it. You must define the method set_new_expiry_date as well. And on the other hand you must add this template, or something similar to show the form. Add the file in the qweb section of your __openerp__.py
<templates xml:space="preserve">
<div t-name="custom_edit_button.expiry_date_form" >
<div class="form-group">
<label for="date" class="control-label">New expiry date:</label>
<input name="date" class="form-control"/>
</div>
</div>
</templates>
Notice that the name of my module is custom_edit_button in the example
I'm new to Odoo and I'm stuck at an easy point.
I already added some widgets to the backend in my custom module. Now I want to add a widget to my website frontend and I don't get it work.
I have the following snippets:
frontend_views.xml
<openerp>
<data>
<!-- Templates -->
<template id="assets_frontend" name="test_module_asset_frontend" inherit_id="website.theme">
<xpath expr="." position="inside">
<!-- Custom JS and CSS -->
<link rel="stylesheet" href="/test_module/static/src/css/frontend.css" />
<script type="text/javascript" src="/test_module/static/src/js/frontend.js" />
</xpath>
</template>
</data>
</openerp>
And the JavaScript code for the widget:
static/src/js/frontend.js
openerp.test_module = function(instance, local) {
local.TestWidget = instance.Widget.extend({
start: function() {
console.log('Widget loaded!');
this._super();
},
});
instance.web.client_actions.add('example.action', 'instance.test_module.TestWidget');
}
How could I call the widget in my template?
I tried the following things:
frontend_views.xml
<record model="ir.actions.client" id="action_client_example">
<field name="name">Example Client Action</field>
<field name="tag">example.action</field>
</record>
<template id="details">
<t t-call="website.layout">
<t t-set="title">Details</t>
<div class="oe_structure">
<div class="container">
<button id="test" name="action_client_example" sequence="0" type="object">Run Widget</button>
</div>
</div>
</t>
</template>
But I don't get the Widget running. I'm a little confused, maybe I don't understand the whole thing how to integrate a widget because in the backend i just put in the following line to add the widget
<widget type="test_module.MyWidget" />
But how to do that in in frontend?
Please check the following, this can be found in the source code of odoo.
openerp.base = function(instance) {
instance.base.apps_remote = null;
instance.base.apps_client = null;
var _t = instance.web._t;
instance.base.Apps = instance.web.Widget.extend({
template: 'EmptyComponent',
remote_action_id: 'loempia.action_embed',
failback_action_id: 'base.open_module_tree',
init: function(parent, action) {
this._super(parent, action);
var options = action.params || {};
if (options.apps_user) {
sessionStorage.setItem('apps.login', options.apps_user);
}
if (options.apps_access_token) {
sessionStorage.setItem('apps.access_token', options.apps_access_token);
}
this.params = options; // NOTE read by embedded client action
},
get_client: function() {
// return the client via a deferred, resolved or rejected depending if the remote host is available or not.
var check_client_available = function(client) {
var d = $.Deferred();
var i = new Image();
i.onerror = function() {
d.reject(client);
};
i.onload = function() {
client.session.session_bind(client.origin).then(function() {
// check if client can authenticate
client.authenticate().then(
function() { /* done */
d.resolve(client);
}, function() { /* fail */
if (client.login === 'anonymous') {
d.reject(client);
} else {
sessionStorage.removeItem('apps.login');
sessionStorage.removeItem('apps.access_token');
client.bind_credentials(client.dbname, 'anonymous', 'anonymous');
client.authenticate().then(
function() { /* done */
d.resolve(client);
}, function() { /* fail */
d.reject(client);
});
}
});
});
};
var ts = new Date().getTime();
i.src = _.str.sprintf('%s/web/static/src/img/sep-a.gif?%s', client.origin, ts);
return d.promise();
};
if (instance.base.apps_client) {
return check_client_available(instance.base.apps_client);
} else {
var Mod = new instance.web.Model('ir.module.module');
return Mod.call('get_apps_server').then(function(u) {
var link = $(_.str.sprintf('', u))[0];
var host = _.str.sprintf('%s//%s', link.protocol, link.host);
var dbname = link.pathname;
if (dbname[0] === '/') {
dbname = dbname.substr(1);
}
var login = (sessionStorage ? sessionStorage.getItem('apps.login') : null) || 'anonymous';
var passwd = (sessionStorage ? sessionStorage.getItem('apps.access_token') : null) || 'anonymous';
if (_.isNull(instance.base.apps_remote)) {
instance.base.apps_remote = new openerp.init();
}
var client = new instance.base.apps_remote.web.EmbeddedClient(null, host, dbname, login, passwd);
instance.base.apps_client = client;
return check_client_available(client);
});
}
},
destroy: function() {
if (instance.base.apps_client) {
instance.base.apps_client.destroy();
}
return this._super();
},
start: function() {
var self = this;
// desactivated for now because apps does not work anyway due to changes in the framework
/*return self.get_client().
done(function(client) {
client.replace(self.$el).
done(function() {
client.$el.removeClass('openerp');
client.do_action(self.remote_action_id, {hide_breadcrumb: true});
});
}).
fail(function(client) {*/
self.do_warn(_t('Mwmy Apps will be available soon'), _t('Showing locally available modules'), true);
self.rpc('/web/action/load', {action_id: self.failback_action_id}).done(function(action) {
self.do_action(action);
instance.webclient.menu.open_action(action.id);
});
//});
},
});
instance.base.AppsUpdates = instance.base.Apps.extend({
remote_action_id: 'loempia.action_embed_updates'
});
instance.web.client_actions.add("apps", "instance.base.Apps");
instance.web.client_actions.add("apps.updates", "instance.base.AppsUpdates");
};
and in the xml
<!-- Apps modules -->
<record model="ir.actions.client" id="modules_act_cl">
<field name="name">Apps</field>
<field name="tag">apps</field>
</record>
<menuitem id="module_mi" parent="base.menu_management" sequence="10" action="modules_act_cl"/>
<record model="ir.actions.client" id="modules_updates_act_cl">
<field name="name">Updates</field>
<field name="tag">apps.updates</field>
<field name="params">{}</field>
</record>
<menuitem id="menu_module_updates" parent="base.menu_management" sequence="20" action="modules_updates_act_cl"/>
hope this help you.
If u want to learn from the staring from the scratch then you should follow the below link from the slide share
Click To Refere the Slide Share Link For Odoo Dynamic Widget
I hope this should helpful for you ..! :)
Well, I guess I am encountering a bit of an issue again here. I will explain what I am trying to do.
I have a teammembers template in which I want to show Team Members & their specific information from a specific team. For that I have to join 3 tables.
This query should give you an idea:
SELECT *
FROM teams_members tm
inner join members m on tm.members_member_id=m.id
inner join teams t on tm.team_team_id=t.id
WHERE
t.team_name='Vancouver Canuck'
What I initially thought that I can make a simple array and simply do pushObject. But It's not working & and moreover, how would I show them?
Here's what I tried:
App.Model = Ember.Object.extend({});
App.TeammembersController = Ember.ObjectController.extend({
teammembers : [], //This is for getTeamMembers Action, Coming as undefined
selectedTeam : null,
team : function() {
var teams = [];
$.ajax({
type : "GET",
url : "http://pioneerdev.us/users/getTeamNames",
success : function(data) {
for (var i = 0; i < data.teams.length; i++) {
var teamNames = data.teams[i];
teams.pushObject(teamNames);
}
}
});
return teams;
}.property(),
actions : {
getTeamMembers : function() {
teamName = this.get('selectedTeam.team_name');
data = {
team_name : this.get('selectedTeam.team_name'),
};
if (!Ember.isEmpty(teamName)) {
$.ajax({
type : "POST",
url : "http://pioneerdev.us/users/getTeamMembers",
data : data,
dataType : "json",
success : function(data) {
for (var i = 0; i < data.teammembers.length; i++) {
var teamNames = data.teammembers[i].firstname;
teammembers.pushObject(teamNames);
}
}
});
return teammembers;
console.log(teammembers);
} else {
}
}
}
});
I am getting teammember array as undefined in this. The snippet in actions will be responsible for spitting out Team Member's information when Team Name is selected from Ember.Select.
Thanks to https://stackoverflow.com/users/59272/christopher-swasey, I was able to re-use my snippet here:
<script type="text/x-handlebars" id="teammembers">
<div class="row">
<div class="span4">
<h4>Your Team Members</h4>
{{view Ember.Select
contentBinding="team"
optionValuePath="content.team_name"
optionLabelPath="content.team_name"
selectionBinding="selectedTeam"
prompt="Please Select a Team"}}
<button class="btn"
{{action 'getTeamMembers' bubbles=false }}>Get Team Members</button>
</div>
</div>
</script>
Moreover, what will user do, he will select the team from Ember.Select & when he clicks the button, somewhere I should be able to spit out team members & their information. In future, I might want to grab ids and delete them from server as well. How would I do that as well?
So, should I use custom views or is there some other way to do this?
There is an issue with the code that populates properties from ajax. For example the code of property team of App.TeammembersController does the following
1.initializes a local array variable teams
2.uses ajax to retrieve asynchronously the data from server
2.1.meanwhile the teams array within the ajax callback gets populated but never returned at the proper state of including data. It is required to set the controller's property once the teams array has been populated with the data. Then ember's binding will take care of the rest (populate controller's property, notify any other object interested, event the template to render the results)
3.and returns the empty teams array
So, you need to add two lines of code as follows,
team : function() {
var teams = [];
var self = this;/*<- */
$.ajax({
type : "GET",
url : "http://pioneerdev.us/users/getTeamNames",
success : function(data) {
for (var i = 0; i < data.teams.length; i++) {
var teamNames = data.teams[i];
teams.pushObject(teamNames);
}
self.set("team",teams);/*<- */
}
});
return teams;
}.property()
The same should happen for the other properties you retrieve from ajax.
EDIT1
Below is an example based on your code. The code has been moved inside the IndexController and the button doing some action has been disabled for simplicity.
http://emberjs.jsbin.com/IbuHAgUB/1/edit
HBS
<script type="text/x-handlebars" data-template-name="index">
<div class="row">
<div class="span4">
<h4>Your Team Members</h4>
{{view Ember.Select
content=teams
optionValuePath="content.team_name"
optionLabelPath="content.team_name"
selection=selectedTeam
prompt="Please Select a Team"}}
<button class="btn"
{{action 'getTeamMembers' bubbles=false }} disabled>Get Team Members</button>
</div>
</div>
selected team:{{selectedTeam.team_name}}
</script>
JS
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.Model = Ember.Object.extend({});
App.IndexController = Ember.ObjectController.extend({
test:"lalal",
teammembers : [],
selectedTeam : null,
teams : function() {
//var teams = [];
var self = this;
/*$.ajax({
type : "GET",
url : "http://pioneerdev.us/users/getTeamNames",
success : function(data) {
for (var i = 0; i < data.teams.length; i++) {
var teamNames = data.teams[i];
teams.pushObject(teamNames);
}
}
});*/
setTimeout(function(){
var data = [{team_name:'team1'}, {team_name:'team2'}, {team_name:'team3'}];//this will come from the server with an ajax call i.e. $.ajax({...})
self.set("teams",data);
},1000);//mimic ajax call
return [];
}.property(),
actions : {
getTeamMembers : function() {
teamName = this.get('selectedTeam.team_name');
data = {
team_name : this.get('selectedTeam.team_name')
};
if (!Ember.isEmpty(teamName)) {
/*$.ajax({
type : "POST",
url : "http://pioneerdev.us/users/getTeamMembers",
data : data,
dataType : "json",
success : function(data) {
for (var i = 0; i < data.teammembers.length; i++) {
var teamNames = data.teammembers[i].firstname;
teammembers.pushObject(teamNames);
}
}
});*/
return teammembers;
} else {
}
}
}
});
The same concept can be followed to retrieve any data from the server and modify/delete it as well. Just have in mind that all requests are async and within the callback functions you should update your ember app model/data, then ember bindings do all the magic.
EDIT2
In order to show the team members in a separate view (based on last comments) once the team is selected, either by clicking the button or from another bound property you may request via ajax the members for the selected team id (unless you have already loaded them eagerly) you can render the property of teammembersinside an included view or partial. For instance the same example and when the button is pressed members appear (without logic hardcoded but async lazy loaded data),
http://emberjs.jsbin.com/IbuHAgUB/2/edit
HBS
<script type="text/x-handlebars" data-template-name="_members">
<i>this is a partial for members</i>
{{#each member in teammembers}}<br/>
{{member.firstName}}
{{/each}}
</script>
JS
App.IndexController = Ember.ObjectController.extend({
test:"lalal",
teammembers : [],
selectedTeam : null,
teams : function() {
var self = this;
setTimeout(function(){
var data = [{team_name:'team1'}, {team_name:'team2'}, {team_name:'team3'}];//this will come from the server with an ajax call i.e. $.ajax({...})
self.set("teams",data);
},1000);//mimic ajax call
return [];
}.property(),
actions : {
getTeamMembers : function() {
var self = this;
setTimeout(function(){
var data = [{firstName:'member1'}, {firstName:'member2'}];//this will come from the server with an ajax call i.e. $.ajax({...})
self.set("teammembers",data);
},1000);//mimic ajax call
}
}
});