Retail:Developers Guide/How-to/Customize Toolbar Buttons
Contents |
Introduction
This document aims to explain how to add a new button to the right toolbar of Web POS from a module.
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 }] });