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