Hero Backgroud Elements 2
Reading Time: 3 Min

Using PostMessage API with Analytics Designer

Learning Article
  • The Web Page widget and PostMessage API in the Analytics Designer provide a very flexible way to integrate with other applications. In this example, the simulated IoT data is refreshed every 2 seconds, we want to push this data to SAP Analytics Cloud often for further analysis.

    In this case, we will use Web Page Widget and PostMessage API.

    Watch the demo:


    This html page post the data to SAP Analytics Cloud every 2 seconds via PostMessage API

    <!DOCTYPE html>




    <script type=”text/javascript”>

    var myVar = setInterval(myTimer, 2000);

    function myTimer() {

    var d = new Date();

    var msg = d.toLocaleTimeString() + ” | ” + “IoT Data=” + Math.floor(Math.random() * 100000);

    window.parent.postMessage(msg, “”);





    Analytics Designer – Application.onPostMessageReceived

    In the Application’s onPostMessageReceived event, we receive the message posted from the index.html, and store the value in a script variable.


    //message is like “3:41:11 PM | Simulated IoT Data =7495”, extract the value from the message

    var arr = message.split(“|”);

    //sets the script variable value, which is used as a calculated measure in chart

    Value = ConvertUtils.stringToInteger(arr[1].split(“=”)[1]);


    Using the data in a chart

    Can we use the data pushed to SAP Analytics Cloud directly in a chart?

    In Analytics Designer, we introduced a feature to use the script variable in a chart’s calculated measure. Per the above step, the data pushed to SAP Analytics Cloud is already stored in a script variable. If you add a calculation to a dimension or measure, in the Calculation Editor you can insert the script variable you have created by typing @ in the formula. All available script variables will be automatically displayed in the drop-down list.

    Note: only global variables of type string, integer, and number can be referenced in the Calculation Editor.


    It is very easy to replicate the sample with the code above. To learn more about this API, you could read my another blog: Typical Patterns and Samples of Integrating Analytics Designer

    I hope this blog gives you some ideas for your own use cases.

    Enjoy your exploration with Analytics Designer!