Webportal v1

embedded apps

API Reference - WebPortal.popup.open

Edit

WebPortal.popup.open

Type Method
Min Privacy Full
wave 2
wave 3
wave 4

WebPortal.popup.open

Description Request from your application to display a disruptive popup, whether the user is browsing your application or not.
Type postMessage command. See implementation tutorial for post message commands.
Parameter None

See Also

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
72
73
74

(function (w) {
  var WebPortal = {
    MESSAGE_NATIVE_POPUP_OPEN: "WebPortal.popup.open",
    MESSAGE_NATIVE_POPUP_EVT_OPENED: "WebPortal.popup.evt.opened",
    MESSAGE_NATIVE_POPUP_EVT_OK: "WebPortal.popup.evt.ok",
    MESSAGE_NATIVE_POPUP_EVT_CANCEL: "WebPortal.popup.evt.cancel",
    MESSAGE_NATIVE_POPUP_EVT_TIMEOUT: "WebPortal.popup.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.openPopup = 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("[openPopup] message:");
      console.log(msg);
      // Ignore unknown message type
      if (!msg || !msg.type || !eventMap[msg.type]) return;

      _messageListenerInitialized = false;
      console.log("[openPopup] calling callback for msg.type: " + msg.type);
      eventMap[msg.type]();

      console.log("[openPopup] removing web message handler");
      this.removeEventListener("message", popupMessageHandler);
    };

    // Init web message event listener
    if (!_messageListenerInitialized) {
      _messageListenerInitialized = true;
      console.log("[openPopup] adding web message listener");
      this.addEventListener("message", popupMessageHandler);
    }

    console.log("[openPopup] request to open native popup");
    var msg = {
      type: WebPortal.MESSAGE_NATIVE_POPUP_OPEN,
      text: text,
    };
    console.log("[openPopup] 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
  openPopup(
    "popup from app",
    function () {
      console.log("OK callback called");
    },
    function () {
      console.log("Cancel callback called");
    },
    function () {
      console.log("Timeout callback called");
    }
  );
})(window);

IMPORTANT

Caution: For accessibility reasons, popup should not be created more often than once every 20 seconds.

Caution 2: Navigation.LaunchGuidance() and Navigation.LaunchGuidanceWaypoints() can not be launched when a popup (either MQTT or Popup) is displayed. To make sure the guidance have actually been launched please check that LaunchGuidance function return is True.

Back to Ref List

Related References