Webportal v1

embedded apps

    Interactivity - Popup

    OPEN POPUP #

    Opening a popup allows your application to interact with the user.

    popup-v1

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    
    (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);