Webportal v1

embedded apps

API Reference - WebPortal.nativePopup.open

Edit

WebPortal.nativePopup.open

Type Method
Min Privacy Full
Type Deprecated
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

NativePopups interacts with the Notification Center but they are deprecated, you should use WebPortal.notification.new instead.

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.

This method is deprecated, it should not be used in a new project.

Back to Ref List

Related References