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

The CodePlex Corner: JavaScript Editor for SharePoint (JEFS)

The link to the project is http://jefs.codeplex.com/

This edition of the CodePlex Corner looks at a project called JavaScript Editor for SharePoint or JEFS for short. It has been coded and released by Tomek Stojecki and is available for SharePoint 2010 (all editions) as a sandboxed solution. The project provides some nifty features for WFE development, and anyone who’s ever been tasked with JQuery or CSS changes to their SharePoint installation will appreciate the utility that JEFS provides. It effectively does away with the necessity of having to use Content Editor Web Parts to hide and tweak code.

It’s fair to state that a large number of CodePlex projects are poorly documented, but JEFS is a project that bucks this trend. Tomek has provided a well written introduction, which explains both the components and the history of the project. He also provides an installation guide and a PowerShell script for easily installing it. This script will detect previous installs of the project and will ask if you want to back-up any content created in it prior to being upgraded.

Because JEFS has been packaged as a sandboxed solution there are several things to keep in mind. For those that aren’t aware, a sandboxed solution is one that doesn’t have full access to all of the server or system resources. Nor can they access content outside of the Site Collection that they are deployed to. The plus point of this restriction is that the solution doesn’t need to be installed by a systems administrator. As such, a clear benefit here is that the IT department need not be involved – JEFS can be installed by the site collection administrator instead. It should also be noted that as a sandboxed solution, JEFS usage is governed by the resource throttle limits set by your SharePoint administrators. This resource throttle is a configurable maximum of daily resource points for site collections, which if breached, terminates all sandboxed solutions for running for the remainder of the day.

So, with all that being said the next logical question is; what does it let you do? Put simply JEFS is an in-browser editor that does away with the need to bundle code in CEWPs. It provides one single resource for managing all of your JavaScript, CSS and library references. This screenshot shows code positioned within two panels of JEFS. The drop down menu highlights the JavaScript libraries that are available for referencing in any solutions.

Separating out this code into clearly visible panels is a world away from embedding it within an HTML view or adding JQuery (and other library references) directly into .aspx pages via Designer. It additionally removes the frustration of seeing SharePoint mangling any structural formatting of code that it placed in a CEWP. Lastly, depending upon where JEFS is invoked from, you also have the ability to select which web part zone your changes are applied to. Add into the mixture syntax specific highlighting for each distinct panel and language, and JEFS becomes both a powerful and time saving tool.

As mentioned earlier, some JavaScript libraries are available for inclusion in your code. Tomek has packaged the following libraries with the product as well as including an editing panel in which they can be referenced: –

  1. JQuery
  2. JQuery UI
  3. SPServices
  4. Ext JS
  5. Knockout

Another part of the power that JEFS adds is where it interfaces within SharePoint. The screenshot below shows the JEFS entry point on a web part page but it is also accessible from: –

  1. List view and form pages
  2. Document library view and form pages
  3. Wiki pages

As a sandboxed solution, JEFS also has the capability to run within both SharePoint 2013 and Office 365. When looking at the functionality and set of features included with these platforms, one in particular stands out: the NAPA editor for Office 365. This is also an in-browser editor, but one that is provided specifically for application building in a cloud environment. As such, a quick feature comparison between the two presented side by side may be useful. Please note that is not offered as a fully exhaustive list.

NAPA Functionality for Office 365

JEFS Functionality for SharePoint 2010

  • No desktop installation needed – launches within the browser
  • Allows you to connect to Visual Studio
  • Allows editing of CSS, JavaScript and HTML
  • Syntax highlighting and IntelliSense
  • Ability to package and publish apps via the Office Store or internal app catalogues
  • Similarity to IDE environment and ability to edit .aspx pages
  • JavaScript, HTML and CSS editors with syntax highlighting
  • Ability to easily reference external JavaScript libraries such as jQuery
  • Sandboxed solution for localised activation
  • Split screen with resizable panels
  • Ability to add the content editor web part to the web part page and link it to the HTML content of JEFS
  • Launched from Ribbon, can be added to other navigation components within SharePoint

 

As with any choice of tool, understanding your needs will have a deciding influence on which tool to pick. JEFS lends itself well to rapid code deployments for WFE development. It is a further timesaver in that things like HTML source views and SharePoint Designer changes can be consigned mostly to the past. NAPA as a utility that has been built specifically for Office 365 has different tools aimed application development for the cloud edition of SharePoint. Both of them are developer tools, but with different scenarios in which they can most effectively be utilised.

As JEFS is a browser-based editor, being aware of browser support for SharePoint 2010 is advantageous. The tool, as with SharePoint itself, was designed with specific browser support in mind. Microsoft has published a TechNet article that discusses browser support and compatibility. This article can be read on this URL

HTML document Standards mode within IE comes into play when using JEFS. As IE allows you to specify both the browser standard and the document mode standard used for page rendering, selecting the correct ones for your development work is important. For example, developing a page in IE9 uses a Document Mode (IE7 standards) that can render things very differently than later standards. Ensuring that any JEFS output is tested sufficiently against both the IE compatibility and document modes can save further problems in the future.

Link to SharePointReviews.com product review

The product entry for JEFS on SharePointReviews.com has been posted under Development & Deployment à Development Tools. The link is http://www.sharepointreviews.com/sharepoint-development/1284-Javascript-Editor-for-SharePoint

“End User – Developer” scale

Trying to determine the best audience for JEFS is somewhat difficult. This is a tool that has two potential audiences: –

  1. SharePoint Developers
  2. IT Professionals that are tasked with making changes

Despite the second group standing to benefit from JEFS, the tool is clearly more suited to those that are comfortable with the various languages that are involved with WFE customisation. For that purpose JEFS scales more towards the developer rather than power users or administrators.

Potential pitfalls / problems

As with any new solution that you want to introduce to a SharePoint deployment, testing and configuration are important parts of good IT governance. The only issues that you may experience with JEFS are: –

  1. Broken rendering when used on sub-sites: – If an older version of JEFS has been installed than an error may be experienced which involves a broken web service call that tries to call web part zones. This was fixed in the January 9th release of JEFS (beta 2.03)
  2. Debug set to the correct standard: Be wary of the standards used. Mostly applicable to Internet Explorer, the document mode can have some differing results on your rendered results

Tutorials

Two companion tutorials have been written to accompany this article to highlight how JEFS can be used. These are: –

  1. Building a small application in JEFS using the Rotten Tomatoes API (pending)
  2. Editing a SharePoint form in JEFS using JQuery and SPServices (pending)

Conclude and add any relevant links

In closing, JEFS is one of the SharePoint-related hidden marvels of CodePlex. It is a tool that can potentially make life easier for both developers and IT professionals alike. When taking into account the different areas of SharePoint that JEFS can be invoked from, it feels like a natural extension to the SharePoint platform. The tutorials above are designed to give you a flavour of how you can use JEFS, but it is capable of much more.

A lot of credit needs to be given to Tomek for both coding up and releasing JEFS and for his contributions to this column.

The resources below were referenced for this article: –

  1. JEFS on CodePlex
  2. Introducing NAPA
  3. Tomek’s Twitter Feed
  4. Resource Limits on Sandboxed Solutions