Retail:Developers Guide/How-to/How to add a line button

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.

This feature is available starting from 15RRQ1

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