How to add button to POS screen in Odoo11? - odoo

Question

I am trying to add a button to the POS screen. A lot of the information I have for this is related to Odoo 11 CE and this is probably why it is not working. I installed the custom addon without any errors but I don't see the button. I don't get any errors when running the POS either. In version 11 there is a widgets.js file which includes
module.PosWidget.include({
build_widgets: function(){
var self = this;
this._super()
There is no widgets.js in version 11 and I am guessing this is where my problem is. Its just a guess I really dont know how to add a button to the POS.
Here is my pos_custom.js
odoo.pos_custom = function(instance){
var module = instance.point_of_sale;
var round_pr = instance.web.round_precision
var QWeb = instance.web.qweb;
console.log("POS JS Loaded")
module.PosWidget.include({
build_widgets: function(){
var self = this;
this._super()
custom_btn = $(QWeb.render(`custom_btn`))
custom_btn.click(function(){
alert("hello")
})
console.log("button <<<>>> ",custom_btn,this.$(`.control-button`))
custom_btn.appendTo(this.$(`.control-button`))
this.$control_buttons`).removeClass(`oe_hidden`)
}
})
};
My /src/xml/pos_custom.xml
<?xml version="1.0" encoding="UTF-8"?>
<templates xml="template" xml:space="preserve">
<t t-name="custom_btn">
<button>Cust Button</button>
</t>
</templates>
my /views/templates.xml
<?xml version="1.0"?>
<openerp>
<data>
<template id="assets_backend" name="pos_custom assets"
inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<script type="text/javascript"
src="/pos_custom/static/src/js/pos_custom.js"></script>
</xpath>
</template>
</data>
</openerp>
manifest.py
{
'name': 'Point Custom Module',
'version': '1.2',
'category': 'Point of Sale',
'summary': 'Custom Point of Sale ',
'description': "",
'data': [
"views/templates.xml"
],
'depends': ['point_of_sale'],
'qweb': ['static/src/xml/*.xml'],
'application': True,
}

Answer 1

/custom-button/manifest.py
{
'name': 'CustomButton',
'summary': '',
'version': '1.0',
'description': """
""",
# 'author': '',
# 'maintainer': '',
# 'contributors': [''],
# 'website': '',
'license': 'AGPL-3',
'category': 'Uncategorized',
'depends': [
'base', 'point_of_sale',
],
'external_dependencies': {
'python': [
],
},
'data': [
'views/templates.xml',
],
'demo': [
],
'js': [
],
'css': [
],
'qweb': [
'static/src/xml/custom_button.xml',
],
'images': [
],
'test': [
],
'installable': True
}
/custom-button/views/templates.xml
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="assets" inherit_id="point_of_sale.assets">
<xpath expr="." position="inside">
<script type="text/javascript" src="/custom-button/static/src/js/custom.js"></script>
</xpath>
</template>
</odoo>
/custom-button/static/src/xml/custom_button.xml
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-name="CustomButton">
<span class="control-button">
<i class="fa fa-print"></i>
Custom Button
</span>
</t>
</templates>
/custom-button/static/src/js/custom.js
odoo.define('custom-button.custom_button', function (require) {
"use strict";
var core = require('web.core');
var screens = require('point_of_sale.screens');
var gui = require('point_of_sale.gui');
//Custom Code
var CustomButton = screens.ActionButtonWidget.extend({
template: 'CustomButton',
button_click: function(){
var self = this;
self.custom_function();
},
custom_function: function(){
console.log('Hi I am button click of CustomButton');
}
});
screens.define_action_button({
'name': 'custom_button',
'widget': CustomButton,
});
});
screenshot of the custom button in POS screen
https://github.com/minaeid90/Custom-Button