View source | Discuss this page | Page history | Printable version   

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 ReceiptViewCustom.png

Original ReceiptViewOriginal.png

Back to How-to

Retrieved from "http://wiki.openbravo.com/wiki/Retail:Developers_Guide/How-to/Customize_Receipt_View_Header"

This page has been accessed 2,343 times. This page was last modified on 10 April 2014, at 08:51. Content is available under Creative Commons Attribution-ShareAlike 2.5 Spain License.