Tutorial: Using JEFS to build a movie database application

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 baseUrl =
http://api.rottentomatoes.com/api/public/v1.0&#8221;;

 

var moviesSearchUrl = baseUrl +
‘/lists/movies/box_office.json?apikey=’
+ apikey;

 

// This code runs when the DOM is ready.

$(document).ready(function
()
{

getMovies();

});

 

// 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)
{

$(“#movieContainer”).html($(“#movieTemplate”).render(data.movies));

}

 

  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">
				


				<img
				src="http://images.rottentomatoescdn.com/images/logos/rtlogo.png?v=20130916"/>
				


				<p><h1>Top 10 Movies</h1></p>
				


				<p>Powered by <a
				href="www.rottentomatoes.com">www.rottentomatoes.com</a></p>
				

</div>
				

 

<div
				id="movieContainer">
				

 

</div>
				

 

<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>
				


				<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>
				


				</div>

  </div>
				

</script>

 

  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="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js"></script>
				

 

<script
				class="jefs"
				type="text/javascript"
				src="http://www.jsviews.com/download/jsrender.js"></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

.partBody

{
				

    margin:
				0;
				

    padding:
				0;
				

    border:
				0;
				

}
				

 

.partDiv

{
				

    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;
				

}
				

 

.partContent

{
				

    position: absolute;
				

    top:
				5px;
				

    left:
				5px;
				

}
				

 

.movie {
				

    border:1px;
				

    clear:both;
				

    border-style: solid;
				

    padding-bottom:20px;
				

    margin-bottom:10px;
				

    width:auto;
				

    height:320px
				!important;
				

}
				

 

.movieIntro {
				

    margin-left:
				10px;
				

    position:relative;
				

}
				

.movieImage {
				


				float:left;
				

    margin-top:10px;
				

    margin-left:
				10px;
				

    width:auto;
				

}
				

 

.movieSynopsis {
				

    width:auto;
				

    font-size:large;
				

    margin-left:
				200px; margin-top:
				5px;
				

}
				

 

.movieTitle {
				

    margin-top:10px;
				

    font-weight: bold;
				

    height:
				20px;
				

    position:relative;
				

}
				

 

.moreInfo{
				

    width:auto;
				

    margin-left:
				200px;
				

    font-size: large;
				

    margin-top:
				-10px;
				

}
				

 

.spacer {
				

    clear:both;
				

}

 

  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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s