Retail:Developers Guide/How-to/Customize Receipt View Header
How to customize the Receipt View Header
In order to customize the Receipt View Header component, first of all you need to create a new module with a javascript file following the first part of link this guide
Then, inside this file, the "OB.UI.OrderHeader" component should be redefined. The original "OB.UI.OrderHeader" component is located at org.openbravo.retail.posterminal/web/org.openbravo.retail.posterminal/js/components/order.js
Example:
/* ************************************************************************************ * CUSTOM 'OB.UI.OrderHeader' ************************************************************************************ */ enyo.kind({ name: 'OB.UI.OrderHeader', classes: 'row-fluid', published: { order: null }, style: 'font-size: 95%; background-color: #ffffff; border-bottom: 1px solid #cccccc;', components: [{ classes: 'row-fluid', components: [{ style: 'font-size: 95%; background-color: #ffffff; border-bottom: 1px solid #cccccc;', components: [{ kind: 'PCGAEXPOS.UI.LineLabel', content: 'Aktueller Benutzer:' }, { kind: 'PCGAEXPOS.UI.PCGAEXPOSQuickLogout', name: 'qlobutton', style: 'font-size: 90%; float: right;' }, { kind: 'PCGAEXPOS.UI.PCGAEXPOSQuickLock', name: 'qlbutton', style: 'font-size: 90%; float: right;' }, { style: 'font-size: 90%; clear:both;' }] }] }, { classes: 'row-fluid', components: [{ style: 'font-size: 95%; background-color: #ffffff; border-bottom: 1px solid #cccccc;', components: [{ kind: 'PCGAEXPOS.UI.LineLabel', content: 'Aktueller Verkäufer:' }, { kind: 'PCGAEXPOS.UI.PCGAEXPOSSalesRepresentative', name: 'srbutton', style: 'font-size: 90%; float: right;' }, { style: 'font-size: 90%; clear:both;' }] }] }, { classes: 'row-fluid', components: [{ style: 'font-size: 95%; background-color: #ffffff; border-bottom: 1px solid #cccccc;', components: [{ kind: 'PCGAEXPOS.UI.LineLabel', content: 'Aktueller Kunde:' }, { kind: 'PCGAEXPOS.UI.PCGAEXPOSBusinessPartner', name: 'bpbutton', style: 'font-size: 90%; float: right;' }, { kind: 'PCGAEXPOS.UI.LineLabel', name: 'lblfidelity', content: '10 Sterne' }, { style: 'clear:both;' }] }] }], orderChanged: function(oldValue) { this.$.bpbutton.setOrder(this.order); this.$.srbutton.setOrder(this.order); this.$.qlbutton.setOrder(this.order); this.$.qlobutton.setOrder(this.order); } });
Result:
Back to How-to