Webportal v1

embedded apps

    Interactivity - Popup

    OPEN POPUP #

    Follow this example to open a native popup from your app. See nativePopup reference.

    
    (function(w) {
        var WebPortal = {
            MESSAGE_NATIVE_POPUP_OPEN: 'WebPortal.nativePopup.open',
            MESSAGE_NATIVE_POPUP_EVT_OPENED : 'WebPortal.nativePopup.evt.opened',
            MESSAGE_NATIVE_POPUP_EVT_OK     : 'WebPortal.nativePopup.evt.ok',
            MESSAGE_NATIVE_POPUP_EVT_CANCEL : 'WebPortal.nativePopup.evt.cancel',
            MESSAGE_NATIVE_POPUP_EVT_TIMEOUT: 'WebPortal.nativePopup.evt.timeout',
        };
        var _messageListenerInitialized = false;
        
        /** 
         *@param {String} text - Text to display un the popup
         *@param {callback} okCallback - The OK button callback to execute when the OK button is clicked
         *@param {callback} cancelCallback - The Cancel callback to execute when the Cancel button is clicked
         *@param {callback} timeoutCallback - The timeout callback to execute when the popup close timeout is reached
        */ 
        w.openNativePopup = function(text, okCallback, cancelCallback, timeoutCallback) {
            var popupMessageHandler = function(e) {
                var eventMap = {};
                eventMap[WebPortal.MESSAGE_NATIVE_POPUP_EVT_OK] = okCallback;
                eventMap[WebPortal.MESSAGE_NATIVE_POPUP_EVT_CANCEL] = cancelCallback;
                eventMap[WebPortal.MESSAGE_NATIVE_POPUP_EVT_TIMEOUT] = timeoutCallback;
    
                var msg = e.data;
                console.log("[openNativePopup] message:");
                console.log(msg);
                // Ignore unknown message type
                if (!msg || !msg.type || !eventMap[msg.type])
                    return;
    
                _messageListenerInitialized = false;
                console.log("[openNativePopup] calling callback for msg.type: "+ msg.type);
                eventMap[msg.type]();
    
                console.log("[openNativePopup] removing web message handler");
                this.removeEventListener('message', popupMessageHandler);
            };
    
            // Init web message event listener
            if (!_messageListenerInitialized) {
                _messageListenerInitialized = true;
                console.log("[openNativePopup] adding web message listener");
                this.addEventListener('message', popupMessageHandler);
            }
    
            console.log("[openNativePopup] request to open native popup");
            var msg = {
                type: WebPortal.MESSAGE_NATIVE_POPUP_OPEN,
                text: text
            };
            console.log("[openNativePopup] msg: ");
            console.log(msg);
            parent.postMessage(msg, '*');
        };
    
      // Web message listener
      w.addEventListener('message', function(e) {
        var msg = {origin: e.origin, data: e.data};
          console.log("MessageEvent received: "+ JSON.stringify(msg));
      });
    
      // Popup button handler
      openNativePopup(
        "popup from app",
          function() { console.log("OK callback called") },
          function() { console.log("Cancel callback called") },
          function() { console.log("Timeout callback called") }
      );
    })(window);