Odoo 10 add button to POS

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 8 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 8 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 10 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

For a concrete example on how can this be done, check addons/pos_discount/static/src/js/discount.js . You can see here that a button with the label Discount is added in one of the screens of Odoo POS. Check the whole module since what is basically does is adding a button on the action buttons of the POS (attaching screenshot)

Also check the template on addons/pos_discount/static/src/xml/discount_templates.xml for the layout of the button.

Answer 2

To create a buttton in the pos interface you need to create three files.

1. xml file.

2. js file

3. xml file for template

4. xml file

   this file is used to call the js file. Also you need to set the path of this xml file in the manifest like 'data': ['view/pos_update_view.xml'] The code of this xml file is shown below:

     <script type="text/javascript" src="/pos_update/static/src/js/cancel.js"></script> </xpath> </template> </data> 

You only need to change the path of the js file which is in the src="YOUR JS FILE PATH"

2. js file

   In normal situation the location of the js file will be in FOLDER_NAME/STATIC/SRC/JS/FILENAME.JS

   odoo.define('clear_button_fun.pos_view',function(require){ "use strict";

   var screens = require('point_of_sale.screens'); var gui = require('point_of_sale.gui'); var core = require('web.core');

   var ClearCartLine = screens.ActionButtonWidget.extend({ template: "ClearCartLine",

    button_click: function(){ var self = this; this.clear_button_fun(); }, clear_button_fun(){ var order = this.pos.get_order(); order.remove_orderline(order.get_selected_orderline()) }, 

   }); screens.define_action_button({'name': 'clear_button_fun','widget': ClearCartLine,});

   });

   In the above code ClearCartLine is the template name and it must be same in all places. clear_button_fun() is the name of the function and you can add your code to tell what to do when clicking on that button.

3. xml file.

   This xml file is to create a button as a template. In normal situation the location of this xml file will be in FOLDER_NAME/STATIC/SRC/XML/FILENAME.XML

Also you need to set this template location in the manifest. Like 'qweb': ['static/src/xml/pos_view.xml']

<t t-name="ClearCartLine">
    <div class='control-button'>
        Clear Oder Line
    </div>
</t>

I hope the above description helps you.

Answer 3

Maybe you should change your codes

id="assets_backend" into id="assets" &

inherit_id="web.assets_backend" into inherit_id="point_of_sale.assets"