Retail:Developers Guide/How-to/How to add a line button
Contents |
Introduction
This document aims to explain how to add a new button to the line section which is displayed when clicking on a line in the ticket.
See the buttons on the right with the orange background, a module can add new buttons to this list.
Create a module and add js content
The first step is to create a module with javascript files. This step is described in this how to explains how to create a module and how to add a js file to the client side.
Developing the button
In this how to we will use sample code from the Tax Exempt module.
Create Button Class
The first step is to create a button class. This is sample code from the Tax Exempt module. It also shows how to conditionally show or hide the button. Also the tap action is implemented, this is executed when someone taps on the button.
enyo.kind({ kind: 'OB.UI.SmallButton', name: 'OB.OBPOSPointOfSale.UI.EditLine.TaxExemptButton', content: '', classes: 'btnlink-orange', tap: function () { this.owner.line.set('taxExempt', true); this.owner.receipt.calculateGross(); this.owner.receipt.save(); }, init: function (model) { this.model = model; this.model.get('order').on('change:isPaid change:isLayaway', function (newValue) { if (newValue) { if (newValue.get('isPaid') === true || newValue.get('isLayaway') === true) { this.setShowing(false); return; } } this.setShowing(true); }, this); }, initComponents: function () { this.inherited(arguments); this.setContent(OB.I18N.getLabel('OBTAXEX_LblTaxExempt')); if (OB.MobileApp.model.get('permissions').OBTAXEX_taxExemptPerLine) { this.show(); } else { this.hide(); } } });
The above code also shows how to conditionally show the button based on a preference.
Add the button to the line button panel
The next step is to register the button in the line button panel:
//Register the button... OB.OBPOSPointOfSale.UI.EditLine.prototype.actionButtons.push({ kind: 'OB.OBPOSPointOfSale.UI.EditLine.TaxExemptButton', name: 'taxExemptButton' });
The result
The result shows the additional button:
Back to How-to