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

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:

  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:

  kind: 'theComponent',
  name: 'theComponent',
  // Properties to be overwritten / added

Back to How-to

Retrieved from ""

This page has been accessed 2,894 times. This page was last modified on 19 July 2013, at 10:37. Content is available under Creative Commons Attribution-ShareAlike 2.5 Spain License.