Altova MobileTogether Designer

Communication between Webpage and Server

Home Prev Top Next

One reason that a solution would be embedded in a webpage is to exchange data between the webpage and the embedded solution so that the solution processes the input data via MobileTogether Server and returns the result to the webpage. A typical scenario would be the following:


1.A user fills data in an HTML webpage form

2.This data is communicated to the solution (that is currently loaded in an IFrame of the webpage)

3.The solution sends the data to the solution's workflow on MobileTogether Server, where it is processed in the usual way

4.Results are returned to the IFrame, where they can be (i) displayed as part of the solution, and/or (ii) passed back to the webpage for display or further processing


Note:In the description of this feature, we distinguish between the term solution (the display in the IFrame) and workflow (the design that is deployed on the server).


The entire round trip consists of the following stages: webpage–solution–workflow–solution–webpage. The mechanisms that are used to send data between webpage and workflow are described in the sub-sections of this section:


Posting: From Webpage to Server

Listening: From Server to Webpage


Data transfer mechanisms

Data is transferred between webpage and server in two stages: webpage–solution and solution–workflow. The two stages use the following mechanisms, respectively:



Communication between the webpage and the solution is done with JavaScript:


The Window.postMessage() method is used to send data from the webpage to the embedded IFrame. (The message is automatically sent onward from the solution to the workflow.)

The Window.addEventListener() method is used inside the webpage to listen for a message event that is sent by the workflow to the IFrame. When a message is received by the IFrame, it is forwarded to the webpage, where a JavaScript function can be used to process the message and display it in the webpage


Both the methods listed above are W3C specifications. For more information about them, see the descriptions at the Mozilla Developer Network: PostMessage and AddEventListener. Also, since the event listener listens for a message event, see MessageEvent.




Communication between the solution and the workflow is based on the fact that the data is accessed in the workflow from a JSON page source (named \$MT_EMBEDDEDMESSAGE). Because the JSON page source must be created from a JSON structure, the solution does the following: (i) It automatically serializes that message that is received in the IFrame into a JSON string, and (ii) It automatically sends the serialized JSON string to the workflow (where it can be created as the \$MT_EMBEDDEDMESSAGE JSON page source).


When the communication occurs in the reverse direction (from workflow to solution), it is sent as a JSON string (typically by serializing the \$MT_EMBEDDEDMESSAGE JSON page source).


© 2017-2023 Altova GmbH