Share via

The CodePlex Corner: JavaScript Editor for SharePoint (JEFS)

  • Article

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.

http://baron72.files.wordpress.com/2014/01/012114_0921_thecodeplex1.png

 

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.

http://baron72.files.wordpress.com/2014/01/012114_0921_thecodeplex2.jpg

 

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.

http://baron72.files.wordpress.com/2014/01/012114_0921_thecodeplex3.jpg

 

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

http://baron72.files.wordpress.com/2014/01/012114_0921_thecodeplex4.png

 

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.

http://baron72.files.wordpress.com/2014/01/012114_0921_thecodeplex5.png

 

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.

http://baron72.files.wordpress.com/2014/01/012114_0921_thecodeplex6.jpg

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
  2. Editing a SharePoint form in JEFS using JQuery and SPServices (pending)

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. Original Blog Post
  3. Introducing NAPA
  4. Tomek's Twitter Feed
  5. Resource Limits on Sandboxed Solutions