Inheriting javascript from OpenERP 7 web client

OpenERP 7 web client allows adding of modules to the web client itself. The code of the web client in OpenERP 7 As Example:POS is primarily written in Javascript. Generally if people need to make any changes in the javascript code can make it directly in the core code. But this presents a potential problem when new releases comes out. This is not a good practice. 

What we describe in this blog is how to inherit the existing functionality of javascript in as Example: POS module of OpenERP 7 and extend that functionality to create new OpenERP module without change original javascript functionality . 

Step 1: Add New Folders static/src/js into your newly created module.

Step 2: Add new Javascript file into that folder.
e.g. Inheriting Point of Sale into restaurant_POS
Create New Module restaurant_POS like other Openerp module
Add static/src/js folders into that.
Add restaurant_POS.js file into that.
restaurant_POS.js file should contain

openerp.restaurant_POS = function(instance) {
//Some Code Here....
}
make sure that restaurant_POS is your module name. If your module name is different then code look like OpenERP.your_module_name = function(instance){ }

Inheriting JavaScript from PointOfSale Module:
If you want to add some extra functionality to any widget or model into PointOfSale module you can inherit its js code to your code. Remember that you can inherit only public variable not private.Variable only declared as module.var e.g module.POSWidget

Suppose you are inheriting POSWidget from point_of_sale which is in static/src/js/widgets.js file.

openerp.restaurant_POS = function(instance) {
var module = instance.point_of_sale;
//This will instantiate point_of_sale

module.POSWidget = module.POSWidget.extend({
// Now Extending functionality of POSWidget
// You can add your functions here also you can change functions
// inherited from POSWidget.

//Adding new function
mynewfunc : function(){
console.log(“This is new function”);
},

Step 3: Now to add view add new folder xml to static/src and add new file somenae_view.xml to that folder.

e.g Adding new widget Widget 

<templates id="template" xml:space="preserve">

<t t-name="Widget">
     <div id="screen_name" class="screen" >
         <header><h2>Select</h2></header>
         <div class="POS-step-container">
             <div class="POS-receipt-container">
                 
             </div>
         </div>
     </div>
</t>
</template>


Extending xml view from other module:
If you want to add new button,textfiled or anything to alredy created view then you can extend template.
e.g. Extending  POSWidget and add new button to action bar 

<template>
 <t t-extend="POSWidget">
<t t-jquery=".point-of-sale .placeholder-UsernameWidget" t-operation="after">
<button id="new button name" class="class name" style="background:linear-gradient(#B2B3D7, #7F82AC) repeat scroll 0 0 transparent">Button name</button>
</t>
</t>
</template>

t-operation options: 
after : adding component after the current
before : adding component before the current 

 
Step 4: Add .js filenames and .xml filename to __openERP__.py file.xml files to qweb and .js file to js as

{
 'qweb': [ 'static/src/xml/pos.xml' ,],

  'js': [ 'static/src/js/pos.js',   ],
}