1) declare the widget and screen file :(widget.

js) in build wi
dget function
//ADD Screen name of 'partnerlist' in main 'PosWidget'
this.partne_screen = new module.partneScreenWidget(this, {})
this.partne_screen.appendTo(this.$('.screens'));
2) when pos start we have to render screen
then
//this is the all screen that is use in pos
//we added our screen here
this.screen_selector = new module.ScreenSelector({
pos: this.pos,
screen_set:{
'products': this.product_screen,
'payment' : this.payment_screen,
'scale':
this.scale_screen,
'receipt' : this.receipt_screen,
'clientlist': this.clientlist_screen,
'partnerlist': this.partne_screen, //add screen name
of 'partnerlist' : this name is for js
},
popup_set:{
'error': this.error_popup,
'error-barcode': this.error_barcode_popup,
'error-traceback': this.error_traceback_popup,
'confirm': this.confirm_popup,
'unsent-orders': this.unsent_orders_popup,
},
default_screen: 'products',
default_mode: 'cashier',
});
clear with this point ? yes ( in widget.js ) ok
3) now finally we can add one widget which is render templat
e when buton click in (screen.js file_)
//basic widget that do all stuff and where we render tem
plate (xml)
//here 'partneScreenWidget' is widget name
'partnerListScreenWidget' is template na
me which is in static/src/xml folder
here we have to create 'partnerListScree
nWidget' template
module.partneScreenWidget = module.ScreenWidget.extend({
template: 'partnerListScreenWidget',
init: function(parent, options){
this._super(parent, options);
},
show_leftpane: false,
show: function(){

var self = this;

this._super();
},
});
4) template in xml file
<!-- template for design screen and ui ->
<t t-name="partnerListScreenWidget">
<span>Hello your screen loaded... :)</sp
an>
</t>

partneScreenWidget this widget create in screen.js file

now at the end create one template in xml file whatever we have to design

first we add burtton in ClientScreenWidget

1)
//for adding button click in ClientListScreenWidget
module.ClientListScreenWidget.include({
show: function(){
var self = this;
this._super();
auto_back: true,
/* button click which call js function to do stuff*/
this.$('#button-id').click(function(){
var ss = self.pos.pos_widget.screen_selector;
ss.set_current_screen('partnerlist');
});
},
});
2) add button in xml for override
copy and paste that template in our xml and do changes whatever we want. inclu
de means add this code in show function of 'ClientListScreenWidget' '/* button
click which call js function to do stuff*/
this.$('#button-id').click(function(){
var ss = self.pos.pos_widget.screen_selector;
ss.set_current_screen('partnerlist');
});'
this code added in main pos show function (
mean it still the old code there and it add this like append it )

<t t-name="ClientListScreenWidget">
<div class="clientlist-screen screen">
<div class="screen-content">
<section class="top-content">
<span class='button back'>
<i class='fa fa-angle-double-left'></i>
Cancel
</span>
<span class='searchbox'>
<input placeholder='Search Customers' />
<span class='search-clear'></span>
</span>
<span class='searchbox'></span>
<span class='button new-customer'>
<i class='fa fa-user'></i>
<i class='fa fa-plus'></i>
</span>
<span class='button next oe_hidden highlight'>
Select Customer
<i class='fa fa-angle-double-right'></i>
</span>
<span class='button highlight' id="button-id"><!--add button
in this template -->
button
<i class='fa fa-angle-double-right'></i>
</span>
</section>
<section class="full-content">
<div class='window'>
<section class='subwindow collapsed'>
<div class='subwindow-container'>
<div class='subwindow-container-fix client-detai
ls-contents'>
</div>
</div>
</section>
<section class='subwindow'>
<div class='subwindow-container'>
<div class='subwindow-container-fix touch-scroll
able scrollable-y'>
<table class='client-list'>
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Phone</th>
</tr>
</thead>
<tbody class='client-list-contents'>
</tbody>
</table>
</div>
</div>
</section>
</div>
</section>
</div>
</div>
</t>

3) now we have to declare screen in main PosWidget

note : "whatever change we want in pos module we have to declare all widget
, screen , in this 'PosWidget' "
point 2 and 1 both are in same Poswidget method so for this.
module.PosWidget.include({
build_widgets: function() {
var self = this;
this._super();
// for server this is 2nd point
this.server_screen = new module.ServerListScreenWidget(this, {});
this.server_screen.appendTo(this.$('.screens'));
// -------- Screen Selector --------3rd point to declare screen 0k ? 3rd point ?
this.screen_selector = new module.ScreenSelector({
pos: this.pos,
screen_set:{
'products': this.product_screen,
'payment' : this.payment_screen,
'scale':
this.scale_screen,
'receipt' : this.receipt_screen,
'clientlist': this.clientlist_screen,
'serverlist': this.server_screen,
},
popup_set:{
'error': this.error_popup,
'error-barcode': this.error_barcode_popup,
'error-traceback': this.error_traceback_popup,
'confirm': this.confirm_popup,
'unsent-orders': this.unsent_orders_popup,
},
default_screen: 'products',
default_mode: 'cashier',
});
},
});
4 )finally create one widget for new screen in whatever file we
create in our module.
like this
module.partneScreenWidget = module.ScreenWidget.e
xtend({
template: 'partnerListScreenWidget',
init: function(parent, options){
this._super(parent, options);
},
show_leftpane: false,

show: function(){
var self = this;
this._super();
},
});
5) and at last we crete template of partnerListScreenWidget for
new screen like this
<!-- template for design screen and ui -->
<t t-name="partnerListScreenWidget">
<span>Hello your screen loaded... :)</span>
</t>