Front End Widgets - Part 3 - Displaying the Widget on the Front End

Posted in JavaScript, KeystoneJS

Table of Contents:

The first step in displaying data on the front end is to open up Cross Origin Resouce-Sharing (CORS). Add the following lines to the file node_modules/keystone/lib/middleware/api.js.

exports = module.exports = function(keystone) {
        return function initAPI(req, res, next) {

                //Add CORS
                res.header("Access-Control-Allow-Origin", "*");
                res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");


                res.apiResponse = function(data) {
...

There is a cors.js file in that directory that you could point the route to, but I had trouble in trying to execute it. In reality you only need to add the above two lines. Please note that there are security issues surrounding the concept of CORS. You should Google it and have a thorough understanding of the risks involved.

Once again, you'll need to reboot KeystoneJS to make the changes go into affect.

Manipulating Front End Objects Through The API

Paste the following HTML into a file and open it in your browser. Note that you'll need to download the bootstrap css and js files to make it work correctly. This gives you an example using jQuery and the API to dynamically manipulate front end objects with data retrieved from the API.

<!DOCTYPE html>

<!--
Note: You'll need the bootstrap css and js files and change the paths to them below.
-->

<html lang="en">
<head>
  <title>KeystoneJS API Example</title>

  <link href="css/bootstrap.min.css" media="all" rel="stylesheet" />
</head>
<body>


  <section>
    <div class='container'>
      <div class="row well well-lg">
        <div class="col-md-12">
          <img id="image1" src="" alt="" width="600px" />
          <br><br>
          <img id="image2" src="" alt="" width="600px" />
          <br><br>
          <img id="image3" src="" alt="" width="600px" />
        </div>
      </div>
    </div>
  </section>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="js/bootstrap.min.js?body=1"></script>

  <script type="text/javascript">
    //Global Variables
    var serverIP = '<your ip address>';
    
    //First function that is called when the document finishes loading.
    $(document).ready( function() {
    
      //Call server to retrieve JSON Gallery data.
      $.getJSON('http://'+serverIP+':3000/api/frontendwidget/list', '', processJSON);
    });
    
    //Callback function executed when JSON data is returned.
    //Sorts the items in data.collections into different categories.
    function processJSON(data) {
      //Fill in the images with data from the KeystoneJS API
      $('#image1').attr('src', data.collections[0].url1);
      $('#image1').attr('alt', data.collections[0].alt1);
      $('#image2').attr('src', data.collections[1].url1);
      $('#image2').attr('alt', data.collections[1].alt1);
      $('#image3').attr('src', data.collections[2].url1);
      $('#image3').attr('alt', data.collections[2].alt1);
    }
    
  </script>
  
</body>
</html>