How to add custom action buttons in Odoo 13 POS screen

Point of Sale (POS) is one of the key components in Odoo ERP. Through this blog we are going to discuss about how to add a custom button in the POS screen. At the end you will get a custom action button inside the POS screen as shown below.


For adding a new button in the POS screen we need to create a custom module which depends on the point_of_sale module in Odoo.

If you are new to odoo, for creating a new module you can use the scaffolding method for creating new module which is provided by Odoo it self. You can use the below command for creating a new module using scaffolding.

./odoo-bin scaffold my_module ~/src/odoo-addons/

The above will only work if you have an installation of Odoo in your local machine, if you do not want to install Odoo in your system you can download the module structure form the below link.

https://www.odoo.com/documentation/user/13.0/_downloads/my_module.zip

You will get a default module structure using the above commands, when ever we are using the scaffolding you will also get some unwanted files and folder inside your module, so you have to clean your module as your need. We need a structure something like below,

You can clone or download example module from our gitlab repository, please visit the below link for the example module.

https://gitlab.com/odoobeats/odoo-tutorials/-/tree/master/pos_action_button

For creating a new action button inside the POS screen you need to create a JavaScript file and some XML template files.

Java Script file should be included inside the POS assets in order to load the file when ever we are opening the POS from Odoo, use the below XML format for including JS file.

<?xml version="1.0" encoding="utf-8"?>
<odoo>
<data>
<template
id="pos_action_button" inherit_id="point_of_sale.assets">
<xpath
expr="." position="inside">
<script
type="text/javascript" src="/pos_action_button/static/src/js/action_button.js"/>
</xpath>
</template>
</data>
</odoo>

You can find the example for the above XML file from /pos_action_button/views/view.xml

Next is to create a Java Script for the button. Your Java Script file should be something like below.

odoo.define('pos_action_button.ActionButton', function (require) {
"use strict";

// require pos screens
var pos_screens = require('point_of_sale.screens');

// create a new button by extending the base ActionButtonWidget
var DashboardButton = pos_screens.ActionButtonWidget.extend({
template: 'DashBoardButton',
button_click: function(){
alert("Dashboard button clicked");
},
});

// define the dashboard button
pos_screens.define_action_button({
'name': 'Dashboard',
'widget': DashboardButton,
'condition': function(){return this.pos;},
});

});

Inside the JS file first you need to define the Java Script module using the odoo.define method
You can find the official documentation for Java Script module system in Odoo framework using the below link.
https://www.odoo.com/documentation/12.0/reference/javascript_reference.html#javascript-module-system

You need to require the screens from the POS which is defined inside Odoo framework in order to add a new button inside the screen.

Also you need to extend the base ActionButtonWidget for creating the new button and provide a Qweb template required for creating the button view, the Qweb template should be defined inside an XML file as below.

<?xml version="1.0" encoding="UTF-8"?>
<templates
id="template" xml:space="preserve">
<t
t-name="DashBoardButton">
<div
class='control-button'>
<i
class="fa fa-dashboard" />Dashboard
</div>
</t>
</templates>
You can find the example for above XML file from '/pos_action_button/static/src/view/action_button.xml'

And the template name should be given inside the Java Script widget using the 'template' key as shown below,

template: 'DashBoardButton',
Also inside the widget you need to provide the button action using the 'button_click' function, here I have added an alert in order to check the button is working or not

// create a new button by extending the base ActionButtonWidget
var DashboardButton = pos_screens.ActionButtonWidget.extend({
template: 'DashBoardButton',
button_click: function(){
alert("Dashboard button clicked");
},
});
And finally after creating the button widget you need to define the action button using 'define_action_button' method as follows.

// define the dashboard button
pos_screens.define_action_button({
'name': 'Dashboard',
'widget': DashboardButton,
'condition': function(){return this.pos;},
});
Done, you have completed the Java Script part.

If you need to add any special styles for your custom button you can provide the style inside a .css file. You can find the example from the directory structure give above, and also you need to include the css file inside the POS assets as shown below,

<?xml version="1.0" encoding="utf-8"?>
<odoo>
<data>
<template id="pos_action_button" inherit_id="point_of_sale.assets">
<xpath expr="." position="inside">
<!-- Style sheet for button -->
<link rel="stylesheet" href="/account/static/src/css/action_button.css"/>
<!-- Java Script file -->
<script type="text/javascript" src="/pos_action_button/static/src/js/action_button.js"/>
</xpath>
</template>
</data>
</odoo>

Finally you need to create your manifest file for your custom module named __manifest__.py, the manifest file should be something like below,

# -*- coding: utf-8 -*-
{
'name': 'POS Dashboard',
'version': '13.0.1.0',
'summary': 'Dashboard button in POS screen',
'category': 'Point Of Sales',
'author': 'Odoo Beats',
'maintainer': 'Odoo Beats',
'company': 'Odoo Beats',
'website': 'https://www.odoobeats.com',
'depends': ['base', 'point_of_sale'],
'qweb': ['static/src/view/action_button.xml'],
'data': ['views/view.xml'],
'installable': True,
'application': True,
'auto_install': False,
'license': 'AGPL-3',
}
Inside the manifest file path to your Qweb templates should be provided inside 'qweb' and the path to XML file which the assets are included should also be should be provided inside the 'data'.

That's it you have completed the coding part ;)

Now you can place your custom module inside your odoo addons directory and try installing the module after restarting the Odoo service.

If everything works fine you will get your custom action button inside POS as below,



Please let us know if you find any difficulties during the above stages using the comment section.

Happy coding!

Comments

  1. You have explained very well to add custom action button in POS in Odoo 13, i found this another article explaining all the new features of Odoo 13, there are some changes in the POS module too. Read More: https://bit.ly/3iGECgA

    ReplyDelete

Post a Comment