How to Extend WebPOS Content Labels

Introduction

This document explains how can be extended the content of a WebPos component.

This How To shows the example to extend products identifier label in order lines, in order to show "Search key + Identifier" instead of "Identifier". The extended component is "OB.UI.RenderOrderLine".

Create Function to Overwrite

Actually, this command is used to set content text:

 
this.$.product.setContent(this.model.get('product').get('_identifier'));

To be capable to extend the content is necessary to create a new function which will return the text to assign to it

 
setIdentifierContent: function () {
  return this.model.get('product').get('_identifier');
}

and change the parameter on the setContent command

 
this.$.product.setContent(this.setIdentifierContent());

Extend Component and Override Function

Once the new function is created, the component will be extended in a external module and it function will be overwrited in order to set the text with the new text structure.

The code will be like this:

 
OB.UI.RenderOrderLine.extend({
  setIdentifierContent: function () {
    return this.model.get('product').get('searchkey') + ' - ' + this.model.get('product').get('_identifier');
  }
});

This return statement can be modified to set any content to the component label.