in odoo 10, how do i modify the POS to add a new header widget? - python-2.7

Question

Im trying to add a custom widget similar to HeaderButtonWidget, or StatusWidget, but im not able to do it yet:
my first attempt:
odoo.define('my_module.pos', function(require) {
"use strict";
var chrome = require('point_of_sale.chrome');
var _t = core._t;
var _lt = core._lt;
...
var AltHeader = chrome.HeaderButtonWidget.extend({
template : 'AltHeader',
init: function(parent, options){
options = options || {};
this._super(parent, options);
this.action = options.action;
this.label = options.label;
},
renderElement: function(){
var self = this;
this._super();
},
button_click: function(){ console.log("its a hit") },
highlight: function(highlight){
this.$el.toggleClass('highlight',!!highlight);
},
});
but this is not working, and HeaderButtonWidget is not returned by the main method of point_of_sale/static/src/js/screens.js so according to this page:
http://odoo-development.readthedocs.io/en/latest/dev/pos/gui.html so using the screen widget extend is not possible, how do i do this?
EDIT:
Here is what i have attempted:
odoo.define('pos_widget_toggler.pos', function (require) {
"use strict";
var PosBaseWidget = require('point_of_sale.BaseWidget');
var core = require('web.core');
var _t = core._t;
var _lt = core._lt;
var AltHeader = PosBaseWidget.extend({
template: 'AltHeader',
init: function(parent,options){
this._super(parent, options);
this.label = _lt('OFF');
this.action= function(){
// code will be here
} ;
},
});
return{
AltHeader:AltHeader
};
});
and pos_widget_toggler.xml
<templates id="pos_widget_toggler" inherit_id="point_of_sale.template" xml:space="preserve">
<t t-name="AltHeader">
<div class="oe_status">
<t t-esc="widget.label" />
</div>
</t>
</templates>
Im still not able to see anything,

Answer 1

To create new widget,
odoo.define('point_of_sale.chrome', function (require) {
"use strict";
var PosBaseWidget = require('point_of_sale.BaseWidget');
var AltHeader = PosBaseWidget.extend({
template: 'AltHeader',
init: function(parent, options){
//Your code
}
});
return{
AltHeader:AltHeader
};
});
your_custom_module/static/src/xml/file.xml
<t t-name="AltHeader">
<div class="oe_status">
// Your code
</div>
</t>
Add this template file in your manifest.
your_custom_module/__manifest__.py
'qweb': ['static/src/xml/pos.xml'],
Hope it will help you.