How to add button to POS screen in Odoo11?

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,


}

M. Rizk M. Rizk · Accepted Answer · 2018-05-16T07:24:09

/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

How to add button to POS screen in Odoo11?

1 Answers