Message Communication Between Host and Embedded Web Pages

Before embedding an analytic application via a iFrame in the host HTML page, you need to first make sure the host HTML page is added as a trust origin in the System  Administration  App Integration  Trusted Origin.

Then you can trigger bi-direction communication between the host HTML page and analytic application using the provided functions.

This is to post messages from the analytic application to the host HTML page.

When an end user triggers a callback function in the analytic application side, the callback function sends out data to notify the parent receiver page which hosts the iFrame, or, when there are multiple levels of web pages embedded in one another, to the top-level HTML page of a specific target origin.

You define whether to send data to a parent or the top HTML page by means of the parameter of the PostMessageReceiver.

The syntax of the postMessage event is:

This is to handle messages sent from the host parent or top HTML page in the analytic application. In scenario 2 below, the event can also handle messages sent from an HTML page embedded via the web page widget in an analytic application.

In the current scenario, the parent window which hosts the iFrame can post messages to the analytic application's iFrame window of specific target origin. The messages posted are then retrieved by the analytic application and trigger changes accordingly, such as updating some input data.

The syntax of the onPostMessageReceived event is:

You embed an analytic application in a host HTML page. The URL of the host HTML page is http://localhost:8080.

First, you want to allow end users to post the company selection in the analytic application to the host HTML page. Write the script below for the sending button:

var message = RadioButtonGroup_Company.getSelectedText();
Application.postMessage(PostMessageReceiver.Parent, message, "http://localhost:8080");

Then you want to allow end users to display the message received from the Host HTML page in a text box of the embedded analytic application. Click the button beside Main Canvas, choose onPostMessageReceived and write the script below for the application:

If (origin == “http://localhost:8080”) {
Text_ReceivedMessage.applyText(message);}

You can trigger bi-direction communication between the embedded web application and the host analytic application.

When the host analytic application's web page widget embeds a web application, you can post messages from the embedded application to the host analytic application or the other way around.

The syntax of the postMessage event is:

The syntax of the onPostMessageReceived event is:

Case 1. Posting messages from the host analytic application to the embedded application

The event for posting messages is:

postMessage()

The event for handling messages sent from the host analytic application depends on the type of the embedded application:

• If the embedded application is an SAP Analytics Cloud application, once the message is received, the embedded application can use the event onPostMessageReceived() to handle the message.
• If the embedded application is another web application, once the message is received, the embedded application can use the event window.on("message") to handle the message.

Case 2. Posting messages from the embedded application to the host analytic application

The event for posting messages depends on the type of the embedded application:

• If the embedded application is an SAP Analytics Cloud application, use the event Application.postMessage() to post messages.
• If the embedded application is another web application, use the event window.parent.postMessage to post messages.

The event for handling messages sent from embedded application is:

Once the messages is received, the host application can use the event onPostMessageReceived() to handle the messages.