Retail:Developers Guide/How-to/How to create a new modal dialog

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