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:

Custom

Original

Back to How-to