View source | Discuss this page | Page history | Printable version   
Toolbox
Main Page
Upload file
What links here
Recent changes
Help

PDF Books
Show collection (0 pages)
Collections help

Search

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.

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

Addtoolbarbutton.png


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'
    }]
  });

Modifytoolbarbuttons.png

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
    }]
  });

Modifytoolbarbuttonswidth.png

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

This page has been accessed 3,107 times. This page was last modified on 8 July 2014, at 08:22. Content is available under Creative Commons Attribution-ShareAlike 2.5 Spain License.