Sample web application

This example web application is relatively simple and is designed specifically to demonstrate how to create interactions between an embedded QuickApp and an enclosing web application.

To begin, here is a quick list of features of the sample application:

Shows the value of the year selected in the embedded QuickApp
Shows the value of the ZIP code entered in the web application
Provides an input field for entering a new ZIP code value
Provides additional branding/styling

The HTML and JavaScript code for the sample web application is shown below:

<!DOCTYPE html>
<html>
  <head>
    <title>1010data Embedded QuickApps!</title>
    <meta name="viewport" content="width=device-width,
          initial-scale=1.0" charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
    <link href="1010data-DC-BS.css" rel="stylesheet" media="screen"/>
    <style>
      .rn {text-decoration: underline; }
    </style>
    <link href="styles.css" rel="stylesheet" media="screen"/>
    <script>
      window.onload = function() {
        var iframe = document.querySelector("iframe");
        var win = iframe.contentWindow;
        var zip = document.querySelector('#input_zip');
        win.postMessage({msg:  "init",
                         uid:  "[1010data_USERNAME]",
                         pswd: "[1010data_PASSWORD]"}, iframe.src);
        zip.addEventListener("change", function(e) {
          win.postMessage({set: {"zipcode": e.target.value}}, iframe.src);
          var current_zip = document.querySelector("#current_zip");
          current_zip.innerHTML = e.target.value;
        });
        window.addEventListener("message", function(e) {
          var data = e.data.split(',')
          var current_year = document.querySelector("#current_year");
          current_year.innerHTML = data[0];
          var current_zip = document.querySelector("#current_zip");
          current_zip.innerHTML = data[1];
        });
      }
    </script>
  </head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top" role="">
      <div class="container">
        <div class="navbar-title">
            <p class="1010logo">
            <img src="1010datalogo.png"
                 style="margin-top: .7em;display: inline;float: left;"/>
            <p style="color: white;display: inline-block;
                      padding-left: .2em;font-size: 24pt;">
            <p style="display: inline;padding-top: 10px;">
            <p style="display: inline;color: #F1B434;
                      font-size: 36px;margin-top: 5px;">Embedded</p>
            <p style="display: inline;color: #F26F21;
                      font-size: 36px;margin-top: 5px;"> QuickApps!</p>
          </p>
        </div>
      </div>
    </div>
    <div class="container_exchange">
      <div class="inner">
        <div class="stuff">
          <h3>Current year:</h3>
          <div id="current_year">2015</div>
          <h3>Current ZIP code:</h3>
          <div id="current_zip">10017</div>
          <h3>Enter a ZIP code:</h3>
          <input type="field" name="zip" id="input_zip">
        </div>
      </div>
      <div>
        <iframe class="embedded"
         src="https://www2.1010data.com/cgi-bin/beta-latest/quickapp?path=pub.doc.samples.embedded_qa.sample_qa"
         style="width: 800px; height: 1000px" frameborder="0"/>
      </div>
    </div><!--end container_exchange-->
    <script src="jQuery-2.0.3.js"></script>
    <script src="bootstrap.min.js"></script>
  </body>
</html>

Note: This topic does not address the HTML used in the construction of the web application. Instead, it focuses on the JavaScript necessary to create interactions between the QuickApp and the enclosing application.

Below is the JavaScript function that is called when the web application finishes loading:

window.onload = function() {
  var iframe = document.querySelector("iframe");
  var win = iframe.contentWindow;
  win.postMessage({msg:  "init", 
                   uid:  "[1010data_USERNAME]", 
                   pswd: "[1010data_PASSWORD]"}, iframe.src);
  var zip = document.querySelector('#input_zip');
  zip.addEventListener("change", function(e) {
    win.postMessage({set: {"zipcode": e.target.value}}, iframe.src);
    var current_zip = document.querySelector("#current_zip");
    current_zip.innerHTML = e.target.value;
  });
  window.addEventListener("message", function(e) {
    var data = e.data.split(',')
    var year = document.querySelector("#current_year");
    year.innerHTML = data[0];
    var zip = document.querySelector("#current_zip");
    zip.innerHTML = data[1];
  });
}

The JavaScript function first creates a variable, iframe, to reference the <iframe> element that contains the QuickApp in the web application.

var iframe = document.querySelector("iframe");

It then creates a variable, win, to access the window object inside the iframe. This is how the QuickApp's DOM is accessed.

var win = iframe.contentWindow;

An initialization message is sent to the QuickApp using the postMessage method. This message will be interpreted by the receiver widget in the QuickApp.

win.postMessage({msg:  "init", 
                 uid:  "[1010data_USERNAME]", 
                 pswd: "[1010data_PASSWORD]"}, iframe.src);

Note: The message in this example contains placeholders for the 1010data credentials; however, you should not enter your 1010data username and password directly in the JavaScript code. You should provide a secure means within your web application for obtaining these values from the user and specifying them to postMessage. Alternatively, you could omit this postMessage call altogether, in which case the user will be prompted to enter their credentials via the standard 1010data login page when the web application loads.

When valid 1010data credentials are specified, a 1010data session is authenticated.

A variable, zip, is created to access the input field where the user can enter a ZIP code. This input field is the HTML element with an ID of input_zip.

var zip = document.querySelector('#input_zip');

The zip.addEventListener method registers a function that is called when the input_zip element's value is changed by the user. When the value is changed, the function associated with the event listener sends a message to the QuickApp via the postMessage method telling it to set the dynamic variable zipcode in the QuickApp to the new value from the input field. The input field's value is accessed using the e parameter to the event listener function. The event listener function then sets the value of the HTML element with an ID of current_zip to the value of the input_zip element, so that the new ZIP code will be displayed in the web application.

zip.addEventListener("change", function(e) {
  win.postMessage({set: {"zipcode": e.target.value}}, iframe.src);
  var current_zip = document.querySelector("#current_zip");
  current_zip.innerHTML = e.target.value;
});

The method window.addEventListener registers a function that is called when the window receives data through a websocket. When information is sent from the QuickApp via the transmitter widget, the function associated with the event listener splits the comma-separated message that has been received from the QuickApp into a JavaScript array. It then updates the year and ZIP code that are being displayed by the HTML elements with the IDs current_year and current_zip, respectively, using the values in the array.

window.addEventListener("message", function(e) {
  var data = e.data.split(',')
  var year = document.querySelector("#current_year");
  year.innerHTML = data[0];
  var zip = document.querySelector("#current_zip");
  zip.innerHTML = data[1];
});

When the window.onload function runs, the JavaScript application is set up to send messages to and receive messages from the embedded QuickApp.

See Sample QuickApp for an example of a QuickApp that uses the transmitter and receiver widgets to communicate to this external web application.