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

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



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

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

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:

  popup: 'OBAMOD.UI.apopup',
  args: myParameters

Retrieved from ""

This page has been accessed 11,351 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.