Altova MobileTogether Designer

Webpage: user actions and how the HTML/JavaScript code works

Solution: actions carried out by the solution in the IFrame

Workflow: processing on the server (based on the MT design)

On loading the HTML webpage:

A JavaScript variable named books is read. It contains a JSON object named books.

var books = { 

   "books": [

      {

         "author": "Mary Shelley",

         "title": "Frankenstein; or, The Modern Prometheus",

         "year": 1818,

         "pages": 280

      },

      {

         "author": "Bram Stoker",

         "title": "Dracula",

         "year": 1897,

         "pages": 302

      }

   ]

};

Displaying the book list in the webpage:

The content of the books variable is displayed inside the HTML code element by using an event listener (that listens for a DOMContentLoaded event) and a JavaScript function (showbooks):

document.addEventListener('DOMContentLoaded', showbooks);

function showbooks() {

   document.querySelector('code').innerText = JSON.stringify(books, null, ' ');

}

<pre><code></code></pre>

This enables us to see the book list in the webpage when the HTML document is loaded. 

Automatically sending the book list to the IFrame on loading the webpage:

An event listener that listens for a DOMContentLoaded event defines the automatic-load function:

document.addEventListener('DOMContentLoaded', function() {

   var embedded = new WebAppIFrame(document.querySelector('iframe'));

   embedded.start('http://localhost:8083/run?d=/public/jsonBooks', books);

});

The function defined above creates a variable by calling WebAppIFrame.js. Notice that the reference to the JavaScript file (see script element below) was not required in the previous JSON example.

<script src="http://localhost:8083/js/WebAppIFrame.js"></script>

WebAppIFrame.js (listing below) contains code to simplify loading the solution and sending the data to $MT_EMBEDDEDMESSAGE. Notice that the URL to start the solution is not given in the src attribute of the IFrame, but is passed as the first parameter of the start method..

Code listing of WebAppIFrame.js:

'use strict';

function WebAppIFrame(iframe, listener) {

   var _this = this;

   var _data;

   var _jwt;

   if (listener) {

      window.addEventListener('message', listener, false);

   }

   this.start = function(url, data, jwt) {

      function _start() {

         _this.post({data: _data, jwt: _jwt});

            iframe.removeEventListener('load', _start);

      }

      _data = data;

      _jwt = jwt;

   if (_jwt) {

         url += '&auth';

      }

         iframe.addEventListener('load', _start);

            iframe.src = url + '&embed';

   }

   this.post = function(data) {

      iframe.contentWindow.postMessage(data, '*');

   }

}

The IFrame loads the solution jsonBooks and receives the data from the webpage.

{books} is automatically sent to the workflow on the server (in serialized JSON form).

Since page event OnEmbeddedMessage has an action defined, ...

... the page source $MT_EMBEDDEDMESSAGE is automatically loaded with {books} data.

The design contains a repeating table of item nodes. Cells of the table are linked, respectively, to the author, title, year, and pages page source nodes.

As a result,...

...the solution in the IFrame is loaded with this data. The repeating table is populated with the data in the workflow's $MT_EMBEDDEDMESSAGE page source.

The data has been made available in the IFrame directly on opening the HTML page.