Retail:Developers Guide/How-to/Customize Toolbar Buttons

Introduction

This document aims to explain how to add a new button to the right toolbar of Web POS from a module.

This feature is available starting from 14RRQ4

Create a module and add js content

The first part of this how to explains how to create a module and how to add a js file to the client side.

Developing the button

Add new button

First of all it is needed to create the button by creating a new 'OB.UI.ToolbarButtonTab' and needed to add it on the buttons array of 'OB.OBPOSPointOfSale.UI.RightToolbarImpl'

 
  // Generate the button
  enyo.kind({
    name: 'OB.OBPOSPointOfSale.UI.ButtonTabTest',
    kind: 'OB.UI.ToolbarButtonTab',
    tabPanel: 'test',
    i18nLabel: 'TEST_LblTest',
 
    ...
    ...
 
    tap: function () {
      alert('Hello World');
    },
    init: function (model) {
      this.model = model;
    }
  });
 
  // Push the new created button to buttons array
  OB.OBPOSPointOfSale.UI.RightToolbarImpl.prototype.buttons.push({
    kind: 'OB.OBPOSPointOfSale.UI.ButtonTabTest',
    name: 'test'
  });

With a new element added the buttons are resized to fit on the toolbar.

Override buttons

You can also override the default buttons if they are not wanted. Instead of pushing the new buttons it is needed to create a new array.

 
  // Generate the buttons
  enyo.kind({
    name: 'OB.OBPOSPointOfSale.UI.ButtonTabTest',
    kind: 'OB.UI.ToolbarButtonTab',
    tabPanel: 'test',
    i18nLabel: 'TEST_LblTest',
    tap: function () {
      alert('Hello World');
    },
    init: function (model) {
      this.model = model;
    }
  });
 
  enyo.kind({
    name: 'OB.OBPOSPointOfSale.UI.ButtonTabTest2',
    kind: 'OB.UI.ToolbarButtonTab',
    tabPanel: 'test2',
    i18nLabel: 'TEST_LblTest2',
    tap: function () {
      alert('Hello World');
    },
    init: function (model) {
      this.model = model;
    }
  });
 
  // Extend RightToolbarImpl
  OB.OBPOSPointOfSale.UI.RightToolbarImpl.extend({
    buttons:[{
      kind: 'OB.OBPOSPointOfSale.UI.ButtonTabTest',
      name: 'test'
    }, {
      kind: 'OB.OBPOSPointOfSale.UI.ButtonTabTest2',
      name: 'test2'
    }]
  });

Modify width

It is possible to add the property span to the button's object in order to have a different width for the buttons instead of having the same for everyone.

 
  OB.OBPOSPointOfSale.UI.RightToolbarImpl.extend({
    buttons:[{
      kind: 'OB.OBPOSPointOfSale.UI.ButtonTabTest',
      name: 'test',
      // 1/3 of the toolbar's width
      span: 4
    }, {
      kind: 'OB.OBPOSPointOfSale.UI.ButtonTabTest2',
      name: 'test2',
      // 2/3 of the toolbar's width
      span: 8
    }]
  });