View source | Discuss this page | Page history | Printable version   

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.

Bulbgraph.png   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.


Editlinebutton current.png

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:


Addlinebuttonresult.png


Back to How-to

Retrieved from "http://wiki.openbravo.com/wiki/Retail:Developers_Guide/How-to/How_to_add_a_line_button"

This page has been accessed 3,824 times. This page was last modified on 12 December 2014, at 19:16. Content is available under Creative Commons Attribution-ShareAlike 2.5 Spain License.