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/How to create a new modal dialog

Contents

Introduction

This document aims to explain how to include a modal window (popup) into a window of Web POS from a module.

Create a module and add js content

The fisrt part of this how to explains how to create a module and how to add a js file to the client side.

Developing a popup

 
enyo.kind({
  kind: 'OB.UI.ModalAction',
  name: 'OBAMOD.UI.apopup',
  //header text of the popup. Giving the SK of the label (AD_MESSAGE)
  i18nHeader: 'OBAMOD_aheadermessage',
  //body of the popup
  bodyContent: {
    content: OB.I18N.getLabel('OBAMOD_abodymessage')
  },
  //buttons of the popup
  bodyButtons: {
    components: [{
      kind: 'OBAMOD.UI.applyButton'
    }, {
      kind: 'OBAMOD.UI.cancelButton'
    }]
  },
  executeOnHide: function () {
    //executed when popup is hiden.
    //to access to argumens -> this.args
  },
  executeOnShow: function () {
    //executed when popup is shown.
    //to access to argumens -> this.args
  },
  init: function (model) {
    //this function is executed when the component is created. The argument is the model of the window. In point of sale you can work with order model.
    this.model.get('order').on('change: qty', function(changedModel){
      //show popup
      this.show();
    }, this);
  }
});

Register a popup into desired Web POS window

registerPopup function will add the enyo component to the selected window as a modal window. The name of the component is very important because is the way to open or hide the popup.

The modal name must start by the module prefix.

 
OB.UI.WindowView.registerPopup('OB.OBPOSPointOfSale.UI.PointOfSale', {
  kind: 'OBAMOD.UI.apopup',
  name: 'OBAMOD.UI.apopup'
});

To show this popup we will do:

 
this.doShowPopup({
  popup: 'OBAMOD.UI.apopup',
  args: myParameters
});

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

This page has been accessed 7,509 times. This page was last modified on 9 February 2016, at 07:06. Content is available under Creative Commons Attribution-ShareAlike 2.5 Spain License.