This CodePlex Corner tutorial is going to be a little different than those for the previous CodePlex products. This article details how to use the JavaScript Editor for SharePoint (JEFS) to create a simple application / page that pulls down some movie information from the movies database Rotten Tomatoes. The technologies that we will be using are: 

  1. The Rotten Tomatoes API
  2. JQuery
  3. JavaScript
  4. JSRender
  5. HTML

The tutorial itself will go through several stages. These are: 

  1. Installing & activating JEFS
  2. Pulling code together with JEFS

Installing & activating JEFS

JEFS is installed as a sandbox solution to your SharePoint sites. As a sandbox solution, it can be deployed by your site collection administrator. JEFS Codeplex page provides a PowerShell Script that will install the solution for you. Both the WSP and the script can be accessed below:

  1. Installing JEFS as a sandbox solution (Link to CodePlex Page)

Create the Web Part Page

In this part of the tutorial, you will be guided on setting up the native SharePoint elements needed for the solution. Additionally a key for using the Rotten Tomatoes API will also need to be set-up

  1. Create a blank web part page using the Header, Footer, 3 Columns template and save it within a library. Call it Top 10 movies
  2. Register for a Rotten Tomatoes API. Be mindful of the following
    1. URL for the application (this can later be edited)

Edit the Web page

  1. Open up the Top 10 Movies page that was created in the previous section if it is not already open
  2. Click on Site Actions à Edit Page. This will load the page in editing mode
  3. On the far right of this ribbon, click on the JavaScript Editor button
  4. This will reload the page with the JEFS Editor. The panel on the left hand side is the one that accepts JavaScript. The panel on the right hand side is where library references, HTML and CSS are placed
  5. In the panel in the left hand side, paste the following JavaScript code. You will need to replace the <<YourAPICodeHere> with your own API reference in the apikey variable. Part of what this code does is to perform a JQuery asynchronous AJAX HTTP call to the rotten tomatoes web service via the getMovies function
// rotten tomatoes variables
var apikey = "<<YourAPICodeHere>>";
var moviesSearchUrl = baseUrl + '/lists/movies/box_office.json?apikey=' + apikey;
// This code runs when the DOM is ready.
$(document).ready(function () {
// This function gets the movies
function getMovies() {
    $.ajax({url: moviesSearchUrl,
            dataType: "jsonp",
            success: searchCallback});
// callback for when we get back the results
function searchCallback(data) {


  1. Next you are going to insert the HTML that will render the page. In the right hand panel there are several drop-down boxes
  2. In the one called view select the HTML view
  3. Paste in the following code. This code is doing several things. Firstly, the page header using the Rotten Tomatoes header is being linked directly from their own servers. A technology called JSRender is being used to build out the page structure (more information on this here). JsRender is a JavaScript library that allows you to define a boilerplate structure once and reuse it to generate HTML dynamically. The JavaScript snippet created earlier in the tutorial includes a searchCallback function that renders the content ofdata.movies object into the moveTemplate template and the movieContainer div.
<div class="intro">
    <p><h1>Top 10 Movies</h1></p>
    <p>Powered by <a href=""></a></p>
<div id="movieContainer">
<script id="movieTemplate" type="text/x-jsrender">
  <div class="movie">
      <div class="movieIntro">
          <div class="movieTitle"><a href="{{:links.alternate}}">{{:title}}</a></div>
        <div>Critics Ratings: {{:ratings.critics_score}} / 100</div>             
    <div class="movieDetails">
        <p class="movieImage"><img src="{{:posters.detailed}}"/></p>
        <p class="movieSynopsis">{{:synopsis}}</p>
        <p class="moreInfo"><a href="{{:links.alternate}}">Read More</a></p>                   
  1. With both JavaScript and HTML in place it is now time to add the library references that this code relies upon to work
  2. Within JEFS, on the right hand side , change the View drop down to LIB
  3. This will load a window where any JavaScript references needed for solutions should be pasted. In this box paste the following code. These are online references to both JQuery and JSRender. Please note that JSRender JavaScript has no dependency on jQuery and the order of these library references can be changed if desired.
<script class="jefs" type="text/javascript" src=""></script>
<script class="jefs" type="text/javascript" src=""></script>
  1. With the JavaScript library references that are in place, all that is needed is to add the CSS that will style the page
  2. In JEFS on the right hand side change the view drop down to CSS
  3. Paste in the following code: -  
    margin: 0;
    padding: 0;
    border: 0;
    margin: 0;
    padding: 0;
    border: 0;
    position: relative;
    width: 300px;
    height: 200px;
    background-color: #0000FF;
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-size: 14pt;
    position: absolute;
    top: 5px;
    left: 5px;
.movie {   
    border-style: solid;
    height:320px !important;
.movieIntro {
    margin-left: 10px;
.movieImage {
    margin-left: 10px;
.movieSynopsis {
    margin-left: 200px; margin-top: 5px;
.movieTitle {
    font-weight: bold;
    height: 20px;
    margin-left: 200px;
    font-size: large;
    margin-top: -10px;
.spacer {
  1. After the CSS has been pasted in, look at the Save & Close button on the top left corner of JEFS
  2. Clicking on this will close JEFS and should load up a page that looks comparable to the one below