Retail:Developers Guide/How-to/Customize OrderLinesRender Component

In order to customize the order lines render component, first of all you need to create a new module with a javascript file following this guide: <build in progress>

Then inside this file, the "OB.UI.RenderOrderLine" component should be redefined. The original "OB.UI.RenderOrderLine" component is located at org.openbravo.retail.posterminal/web/org.openbravo.retail.posterminal/js/components/renderorderline.js

For this example, we are going to redefine components order (changing also the style slightly). For this purpose, the "components" property of the class "OB.UI.RenderOrderLine" will be overwritten:

enyo.kind({
  kind: 'OB.UI.RenderOrderLine',
  name: 'OB.UI.RenderOrderLine',
  components: [{
    name: 'quantity',
    style: 'float: left; width: 10%; text-align: left;'
  }, {
    name: 'product',
    style: 'float: left; width: 50%;'
  }, {
    name: 'price',
    style: 'float: left; width: 20%; text-align: right;'
  }, {
    name: 'gross',
    style: 'float: left; width: 20%; text-align: right;'
  }, {
    style: 'clear: both;'
  }]
});

As has been developed in the previos example, the way to overwrite or add properties to any class is this: enyo.kind({ kind: 'theComponent', name: 'theComponent', // Properties to be overwritten / added });

Back to How-to