POS order to quotation in Odoo 9

Odoo 9 community does not have a button to generate from the POS (Point of Sale) Order a quotation (Sales Order), here is the following code of my module pos_2_so. Folders arborescence will have as sub folders :  model, view, static, ref the print screen :

We will start by adding a new button on the interface of the pos, in the folder static/src/xml/, we create a new file named pos_2_so.xml. Bellow is its QWeb xml code :

<?xml version="1.0" encoding="UTF-8"?>
<templates id="template">
<t t-name="Pos2SoWidget">
<div class="pos2sopad">
<div id="pos-2-so-frame">
<button class="pos-2-so-button" id="pos-2-so-button">To Sales Order</button>
</div>
</div>
</t>
<t t-extend="ProductScreenWidget">
<t t-jquery=".leftpane .window" t-operation="append">
<div class="placeholder-Pos2SoWidget"></div>
</t></t>
</templates>

This portion of code creates a template named pos2sopad which include only a button :

<t t-name="Pos2SoWidget">
<div class="pos2sopad">
<div id="pos-2-so-frame">
<button class="pos-2-so-button" id="pos-2-so-button">To Sales Order</button>
</div>
</div>
</t>

We need to set a placeholder by adding a div inside the template ProductScreenWidget that we will append in the div .leftpane .window class :

<t t-extend="ProductScreenWidget">
<t t-jquery=".leftpane .window" t-operation="append">
<div class="placeholder-Pos2SoWidget"></div>
</t>
</t>

We now load the QWeb file in our module by adding this code from __openerp__.py like bellow:

{
    'name' : 'POS 2 SO',
    'version' : '0.1',
    'category' : 'tools',
    'description' : """
Create SO from POS
    """,
    'author' : 'NumberSpeaks',
    'depends' : [
        'base',
        'point_of_sale',
    ],
    'data' : [
        'view/pos_2_order.xml',
        'view/pos_order_view.xml',
    ],
    'qweb': [
        'static/src/xml/pos_2_so.xml',
    ],
    'demo' : [],
    'installable' : True,
    'auto_install' : False,
}

Your template has been created, but they are still not displayable on our screen, we will need javascript for that. Here is the following javascript code located in static/src/js :

odoo.define('point_of_sale.pos_2_so', function(require) {
	"use strict";

	var PosBaseWidget = require('point_of_sale.BaseWidget');
	var gui = require('point_of_sale.gui');
	var screens = require('point_of_sale.screens');

	var Pos2SoWidget = PosBaseWidget.extend({
		template : 'Pos2SoWidget',
		init : function(parent) {
			var self = this;
			this._super(parent);
		},
		start : function() {
			var self = this;
			this.$el.find('.pos-2-so-button').click(function() {
				self.gui.show_screen('payment');
				pos2so = true;
			});
		},
	});

	screens.ProductScreenWidget.include({
		start : function() {

			var self = this;
			this._super();

			this.pos2sopad = new Pos2SoWidget(this, {});
			this.pos2sopad.replace(this.$('.placeholder-Pos2SoWidget'));

		},
	});

We will initialize the template QWeb Pos2SoWidget previously created and run a function when clicking on the button, on this example clicking on the button will display the payment screen and set pos2so to true:

var Pos2SoWidget = PosBaseWidget.extend({
	template : 'Pos2SoWidget',
	init : function(parent) {
		var self = this;
		this._super(parent);
	},
	start : function() {
		var self = this;
		this.$el.find('.pos-2-so-button').click(function() {
			self.gui.show_screen('payment');
			pos2so = true;
		});
	},
});

then replace div placeholder-pos2sowidget by the html generated by the template :

screens.ProductScreenWidget.include({
	start : function() {

		var self = this;
		this._super();

		this.pos2sopad = new Pos2SoWidget(this, {});
		this.pos2sopad.replace(this.$('.placeholder-Pos2SoWidget'));

	},
});

To include our javascript file in our web page, we have to create a new file name pos_2_so_view.xml in view folder, reference it in __openerp__.py file, ref the content of that file above :

<?xml version="1.0" encoding="utf-8"?>
<openerp>
	<data>
		<template id="pos_2_so_assets" name="pos_2_so css assets" inherit_id="point_of_sale.assets">
			<xpath expr="." position="inside">
				<link rel="stylesheet" href="/pos_2_so/static/src/css/pos_2_so.css" />
				<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22%2Fpos_2_so%2Fstatic%2Fsrc%2Fjs%2Fpos_2_so.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
			</xpath>
		</template>
	</data>
</openerp>

After restarting Odoo and installing the new module, you should see this additional button on the screen of your point of sale: