The CodePlex Corner: Instant List Filter

The link to the Instant List Filter is https://instantlistfilter.codeplex.com/

This edition of the CodePlex Column delves into the SharePoint Instant List Filter, a project that’s both highly rated and has attracted a significant number of votes. It boasts an impressive 20k+ download count (at the time of writing). It was developed by Jaap Vossers and has previously attracted the attention of Marc Anderson and Alexander Bautz (both well-known JavaScript experts). As the product name suggests, the solution provides filter text boxes on a list/library to allow a “filter-as-you-type” functionality. It also needs JQuery to work successfully when it is deployed. Having being around since 2009, it would be fair to say that the list filter is one of the community products that has stood the test of time.

So, if it has been around for a while, the first question that may spring to mind is; what’s the point in taking a look at it now? The simple answer is the changing SharePoint landscape. As with a few other projects that have been discussed in the CodePlex Corner, the environment that the list filter was born into is very different to the one that we, as SharePoint professionals, have now. Some of the noticeable differences include more powerful versions of SharePoint, newer HTML / CSS standards for each one and of course, very different browser habits to contend with. It’s in this light that an in-depth look at the utility in context of its altered environment might be useful.

A good place to start is to look at how the list filter code responds to the various versions of SharePoint still in use today. Whilst investigating, the opportunity to test the code against the popular browsers of the day also presents itself. The timeline below looks at the release dates of all these products.

Building such a timeline provides two distinct advantages: –

  1. Identifiable points in time at which we can check browsing habits
  2. A linear route to allow us to see which browsers that SharePoint and the list filter would be expected to work with

Cross referencing the most recent three dates from the timeline above with the W3Schools Browser statistics provides the following insights into browser trends at the time of release for each product. The most noticeable thing is the huge increase in Chrome usage and the sharp drop in how many users are sticking with Internet Explorer. Mozilla’s Firefox, despite losing almost a third of its user base between May 2010 and November 2012 does still remain the intermediate browser of choice.

Date

IE

Firefox

Chrome

Mar-09

43.30%

46.50%

4.20%

May-10

32.20%

46.90%

14.50%

Nov-12

15.10%

31.20%

46.30%

Aug-14

8.30%

24.70%

60.10%

Whilst these statistics are for overall browser usage and not specific to SharePoint utilisation, keeping these trends in mind is important as SharePoint doesn’t necessarily play nicely with non-Microsoft browsers. Some of the more unique SharePoint features (like these) are built in Active-X, a proprietary technology that only works in Internet Explorer. Knowing these limits when planning browser support around a SharePoint deployment is invaluable. Extending this line of thinking to third party products both commercial and open source should be seen as a wise investment.

Armed with an idea of the likely browser habits of your audience, a SharePoint professional will know where to begin assessing the list filter. Should the project not work in any of the browsers above, they can now work what the potential damage will be. Having deployed the list filter against several versions of SharePoint in the browsers listed above, the following behaviours were noted.

SP Version

IE

Firefox

Chrome

SharePoint 2007

Rendered

Didn’t render

Rendered

SharePoint 2010

Rendered

Didn’t render

Rendered

SharePoint 2013

Rendered

Didn’t render

Rendered

What these notes (as seen in the project forums here) show are that any FireFox user is not likely to see the list filter render to any SharePoint deployment that they may be visiting. As of August 2014 at 24.7% usability, that’s almost 1 in 4 of any user base, which is a significant number. (How to get the script working with Firefox is the companion tutorial for this article).

Moving on from this, knowing what versions of SharePoint the list filter works on is only one part of our journey. As Microsoft ships the product with several different list and library templates it would be easy to assume that if the List Filter works on one, it would work on all of them. To explore this assumption in greater detail, these templates were all tested. Please see the table below for the results. Please note that only a custom list was tested, not each specific list template packaged.

 

 

Template

Rendered

Worked

Custom List

Rendered

Yes

Asset Library

Didn’t render

No

Data Connection Library

Rendered

Yes

Document Library

Rendered

Yes

Form Library

Rendered

Yes

Record Library

Rendered

Yes

Wiki Page Library

Rendered

Yes

 

The last level that we can assess the list filter on is the column level. It provides a great freebie in that you can use it to filter on field types that normally aren’t filterable. This includes calculated columns and notes (multiple lines of text) fields.

Link to SharePointReviews.com product review

Currently there is no entry on http://www.sharepointreviews.com for the Instant List Filter.

“End User – Developer” scale

This tool fits squarely in in the End User part of the “End User – Developer” scale. The list filter is easily deployed to the client with little effort, from which point it pretty much becomes a “fire and forget” solution. There are several other ways to install the solution but the ability to copy and paste the code into a Content Editor Web Part makes this very accessible.

Potential pitfalls / problems

The instant list filter was originally developed for SharePoint 2007. This is the single biggest problem that IT professionals are likely to have with it. It can work with SharePoint 2010 / 2013 though. The issues that you are likely to experience with it are:-

  1. It only filters on returned item count and doesn’t go past pagination. For instance, if you have a list with 3000 items but have set pagination to 100 per page, the list filter only works on those 100 items.
  2. It also doesn’t work on external lists unless modified to do so.
  3. It doesn’t work very well with FireFox unless modified to do so.

Tutorials

Because the list filter is easy enough to get started with, an installation tutorial would be pointless. Instead, what we’ll look at is how to get the script working with FireFox, which appears to be problematic for some users.

Conclusion

When installed and operational the instant list filter looks and feels like it should have been part of the SharePoint product itself. It’s a classy and easy-to-use extension that complements the OOB search tools very well. The ability to filter on traditionally non-filterable field types is a big bonus. It does have its limitations however, with the most potent of these being that it only filters on the rendered page items NOT the entire list.

The links below are my reference list: –

  1. Original CodePlex Project Link: – https://instantlistfilter.codeplex.com/
  2. Jaap Vossers Blog – http://blog.vossers.com/
  3. Business Data List Web Part usage – https://instantlistfilter.codeplex.com/discussions/228167
  4. Visual Upgrade changes – https://instantlistfilter.codeplex.com/discussions/262132
  5. Filtering on just a single column – https://instantlistfilter.codeplex.com/discussions/257825
  6. 2010 Code – https://instantlistfilter.codeplex.com/discussions/49123
  7. W3C Browser Statistics & trends – http://www.w3schools.com/browsers/browsers_stats.asp
Advertisements

Building a list-specific search with JavaScript

Whilst writing an article that looks at the Instant List Filter (hosted on CodePlex) I started wondering if there was an “Out of the Box” search solution that allows users to search within specific lists. It’s a discussion that I’ve frequently seen in the TechNet forums, particularly whenever search scopes are mentioned. Whilst I wasn’t able to locate anything via the SharePoint GUI, there is indeed a way that this can be achieved, simply by using JavaScript and the Content Editor Web Part.

Solution Details

The core solution is to embed some JavaScript code within a Content Editor Web Part (CEWP) and to tweak it for your list / library. Within the source code (HTML view for SP2010) the code snippet entered provides the end user with a dropdown box, a textbox, and two buttons. These buttons are a Search button and a Clear button.

The dropdown list provided will contain a hardcoded list of all the column names that you want to make searchable. The intention is that the user selects the column to search by picking it from the dropdown box, enters his search text and then clicks the Search button.

The JavaScript will then redirect the user to the same page, with query string data appended to the URL. The Clear button sets the query string url back to blank, which in effect clears the search data and ensures that the entire list is back in view.

When search scopes are enabled in SP2010, the option to search the list is automatically included in the list of options. However, search scopes are enabled at the site collection level, meaning that once enabled, all lists within your site collection will get this option. This JavaScript alternative is particularly useful if you want to enable list-level search for specific lists only. It also has the added advantage of allowing results to be displayed in situ instead of redirecting to a search results page. However, rather than jumping straight into the code, let’s look a little at how OOB list filtering works as this is the functionality that the script plugs into.

Looking at the query string in greater detail

  • In your SharePoint site create a list that has a high number of columns. The Contacts list works perfectly for this

  • Next, input a few dummy items. Having a few rows to play with works best. In my example I’ve used two football managers from the UK Premier League as well as the national team manager

  • Now that you have some test data, apply a filter and wait for the page to reload. The demonstration screenshot below applies a filter to the Last Name column.

Script Details & how to amend

  • Step One: On the page that you want to apply the search field to, use Site Actions à Edit Page
  • Step Two: Click Add a Web Part
  • Step Three: Add an HTML Form Web Part or a Contend Editor Web Part, either will work

  • Step Four: Input the code snippet below and make the following changes
    • In the function RedirectURL add the columns you want to make searchable from left to right using the format “Column2”, “Column3” and so on
    • In the same function, locate this text window.location.href = “AllItems.aspx?” and set this to the page you want the search results rendered on. The script has this set to the default view AllItems.aspx. Please note that you MUST keep the question mark in the code.
    • In the Search field you’ll see some options that look like this: – <option
      value=”Title”>.
      These fields need to correspond to the internal name NOT the display name of the
      columns that you want to make searchable. Column internal names are explained very well here.
  • Step Five: Save the file once you’ve made your amendments and your page should reload looking something like the below, with a basic but list-specific search engine at the top of the page

Further usage

There are probably some things that you can do to take this further if so desired. Some of the tweaks I’ve made include: –

  1. Styling the buttons according to branding requirements
  2. Keeping this code in a separate HTML file and linking it within a CEWP
  3. Hiding all but the first selection field to force searching within only one column

The CodePlex Corner: SUSHI

The CodePlex Corner: SUSHI

The link to the project is https://sushi.codeplex.com/

The project that this edition of the CodePlex Corner is going to look at has been part of the SharePoint community for quite a while. It goes by the name of Sushi (which stands for SharePoint Utility with a Smart, Helpful Interface) and was originally intended to be an administrative Swiss army knife for those that look after infrastructure. Sushi has been created by Joseph Fluckiger, a senior software architect at ThermoFisher, with additional SharePoint 2010 contributions being made by SharePoint MVP Ryan Hayes.

Sushi is a Windows form application that needs to be run from one of the SharePoint servers in order to work. It is available for SharePoint 2007 and 2010. There is no SharePoint 2013 version currently available. When you download and run Sushi from CodePlex, it does not install any DLLS, web parts or anything that can be considered invasive. However it does search for the appropriate hive folder for your version of SharePoint. It’s for this reason that Sushi cannot currently be run from a desktop client.

It has been built as a server client application for the following reasons: –

  1. Richer client interface, which is deemed easier to use than web parts
  2. The security reports feature (that reports on specific user rights) within Sushi does not hide anything from the person generating the report. This is something that you might not want all users to have access to
  3. It was felt that more functionality was available by creating the tool as a windows form application rather than via web parts and layouts pages

Historically, Sushi popped up on the SharePoint stage back in the SharePoint 2007 era with a number of handy utilities and functions that stsadm just couldn’t provide. The introduction of PowerShell support from SharePoint 2010 onwards has lessened the usefulness of Sushi slightly but it hasn’t eliminated it entirely. It is still a valuable tool for active SharePoint 2007 deployments and a handy addition for SP2010 administrators who have limited PowerShell knowledge. Sushi has enough literature of its own to guide a user through what it does but for the sake of convenience its current features are document below. The following table provides a snapshot view of what Sushi provides: –

Category

Actions & Notes

Administration

  • User Security Reports: View all sites / lists a user can access
  • Profile Images Import: Upload profile images and apply them to User Profiles
  • Site Backup: Backup a site
  • Site Restore: Restore a site
  • Email Test: Send a test email to make sure that outbound email is correctly set-up

List / Library Management

  • Copy View: Copy view from one list to another
  • Metadata: Get detailed information about metadata in a list. Move metadata from one column to another for all items in a list
  • Bulk List Creation: Create a large number of lists based on a template
  • Bulk Site Columns: Create site columns
  • Import Documents: Upload file structures from a file share or source folder into a SharePoint document library
  • Delete Old Documents: Copy documents older than a specified date into an archive folder and then delete from SharePoint

Site Management

  • Bulk Site Creation: Bulk-create sites based on a site template
  • Bulk Apply Themes: Apply a theme to many sites at once

 

This is a screenshot of the Sushi interface once it has been downloaded and started. The options detailed in the table above are present on the left hand side of the application with the main window available for interacting with each feature.


Something that needs to be reconciled is how old Sushi is and the fact that there are now other facilities available that may compete with it. With the stsadm utility is a deprecated utility and that many SharePoint technical staff are becoming fluent in PowerShell it would be prudent to review each of the features that Sushi offers against modern day alternatives. The table below is provided for illustration and to help users decide which features may be of use to them.

Action

Notes

Alternatives

User Security Reports

This feature allows the administrator to display which sites and lists/libraries a user has access to within a site collection. It also allows an administrator to view which AD groups an account is part of.

SP Admin toolkit and PowerShell scripts are free utilities but these are not as easy to use.

 

SPFarmReport, is a CodePlex alternative that allows you to generate holistic reports for all uses

Profile Images Import

A very useful feature that is limited by the need for an image name to match an account name. Some characters are also hardcoded.

PowerShell can be used for SharePoint 2010 deployments that have image present in AD and kb2394320 installed. Script and instructions detailed here.

 

PowerShell can also be used to upload the images to a SharePoint 2010 library and alter the –PictureUrl parameter. Script and instructions detailed here.

Site Backup

The Sushi back-up facility is a wrapper for stsadm functionality. Its time r functionality plugs into the Windows Task Scheduler

PowerShell commands for back-up / restore and export / import for SharePoint 2010 deployments. These provide more functionality.

 

Very good utility for SharePoint 2007 deployments still

Site Restore

The Sushi restore facility is a wrapper for stsadm functionality. Its time r functionality plugs into the Windows Task Scheduler

PowerShell commands for back-up / restore and export / import for SharePoint 2010 deployments are best suited for these tasks.

 

Very good utility for SharePoint 2007 deployments still

Email Test

Very useful utility for both SharePoint 2010 and 2007. It still requires the SMTP settings to be configured but removes the need to create an alert manually. This feature is also useful for SharePoint migrations into 2007 / 2010

Matthew Yarlett has discovered and documented a mock SMTP solution in CodePlex .

 

The link to the smtp4dev facility is https://smtp4dev.codeplex.com/

Copy View

Incredibly useful feature and no other facility exists that allows easy replication of views from one list to another.

 

This only works within a single site level.

Nothing else exists that can do this for either SharePoint 2007 or SharePoint 2010

Metadata

This facility allows provides bulk and easy editing for metadata within a list / library. A tutorial for this has been written here.

Very useful for both SharePoint 2007 and 2010. Sushi provides more flexibility than the datasheet view and removes the need to filter and interact with data

Bulk List Creation

Quick and easy facility for bulk list creation. Limited to single site level

PowerShell is an alternative but the complexity of the sort of scripts needed for this needs some familiarity with PowerShell

Bulk Site Columns

Quick and easy facility for the creation of site columns in bulk.

PowerShell is an alternative but the complexity of the sort of scripts needed for this needs some familiarity with PowerShell

Import Documents

With this feature, Sushi allows you to import a directory tree into SharePoint. It’ll remove illegal characters for you too.

 

This usability of this feature is determined by how you approach metadata. If you use the term store or columns instead of folders, than this may not be as useful

  1. Metalogix Content Matrix is an commercial alternative
  2. DocAve File System Migrator is a commercial alternative
  3. Vyapin Document Import Kit is a commercial alternative
  4. SharePoint 2010 Bulk Uploader is a CodePlex alternative

Delete Old Documents

Another potentially useful, Sushi allows you to archive files from a SharePoint library onto the desktop / servers. It is an on demand facility that does not provide the ability to schedule when archiving is done.

This can be achieved with PowerShell as documented here.

 

OOB functionality that can do this is Information Rights Policy.

Bulk Site Creation

Useful site that creates sub-sites swiftly. It accepts copy / paste parameters from the clip board that you may have prepared with an Excel spread sheet

PowerShell will also allow you to achieve this but it would be tricky

Bulk Apply Themes

This allows you to apply sites to a site and its subsites.

PowerShell will also allow you to achieve this but it would be tricky

 

Link to SharePointReviews.com product review

Currently there is no product review for Sushi on SharePointReviews.com

“End User – Developer” scale

Sushi sits comfortably on the administration spoke of the End User à Developer scale. It has some tools that could be useful to power users but the need to run this from any of the SharePoint servers means is a potential security risk. Therefore, those that will be using Sushi are more than likely going to be experienced, technical staff.

Potential pitfalls / problems

The following points are ones that should be taken into account whilst using the application:

  1. The utility has to be run from a SharePoint server and has no client version
  2. The profile images import hardcodes a backslash character before the username and does not allow you to specify mappable attributes. The image name must match a profile name
  3. The import document function has hardcoded file types that it blocks rather than relying on those specified in the S
  4. The back-up / restore stsadm commands are still subject to stsadm size limitations

Tutorial

A Sushi tutorial is being written and will be linked from this article shortly. This tutorial only covers the features of Sushi that cannot easily be recreated. These are: –

  1. Security Reports
  2. Email Test
  3. Copy View
  4. Meta Data
  5. Delete Old Documents

Conclusion and relevant links

Sushi, despite being one of the elder statesmen of the CodePlex SharePoint project community, is still worth a place in an administrator’s arsenal. The niche that it occupies has shrunk a little, mostly due to the addition of PowerShell support to SharePoint but the attention and care that was originally put into the application has made it very resilient to the aging process. Whilst a few features such as the back-up / restore tools are somewhat redundant almost everything else is still useful. In the long run however, unless the tool is upgraded for the SharePoint 2013 / Office 365 era its scope of usefulness will eventually diminish.

The links below are my reference list: –

  1. Sushi Project Site on CodePlex
  2. Joseph Fluckinger Blog
  3. Ryan Hayes Blog
  4. Patric Luka’s Metadata tutorial for metadata
  5. Matthew Yarlett’s smtp4dev TechNet article
  6. Roger Cormier’s Bulk Download Script

Presenting at the Southampton SharePoint User Group (11th March)

Recently I was able to present for the first ever time at a UK SharePoint User Group, more specifically I was able to present as part of the line-up for the Southampton User Group.

And I have to admit that it was a lot of fun. Having being a long term TechNet junkie, the idea of getting in front of anyone, least of all a room of informed and knowledgeable peers was somewhat intimidating. But thanks Ian Woodgate (@ianwoodgate) of PointBeyond, who also doubles up as the gang leader for the SharePoint User Group South, I was able to give it a go.

My topic of choice was CodePlex and some of the wonders that it contains. I firmly believe in the value of community and as collaboration professionals that trade in a collaborative platform / currency, it stands to reason that there’s a lot we can learn from CodePlex. This is both from a soft skills, networking and technological perspective. For instance, I’ve met a few talented and gifted individuals looking at the projects that I have.

Talking about this, plus how some of the general Open Source vs Commercial lines of thinking can apply to SharePoint add-ons was also a part of my presentation. I probably could have explored a lot more in-depth than I discussed at Southampton last night but hopefully some thoughts were triggered.

And one question from Ian Chivers already has me thinking about Open Source communities. I’d not given much thought to that community but it definitely worth considering.

Overall, I believe that both the CodePlex / Open Source work plus my own presentation style and ability can only improve from here onwards.

So, with that being said, here’s a link to the presentation itself. I’ll gloss out my presentation notes into something more presentable and will get these upload soon.

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

Tutorial: Using the SharePoint List Field Manager

After I’d written the tutorial for the Seadragon Web part, I hit upon the idea of making short introductory guides an additional part of the CodePlex Corner Series. In the course of my playing around with the goodies on offer, I’m typically taking notes for my own records. It’s not really a huge leap to tidy them up and make them available for publication.

I don’t really have a specific format in mind but I’d like to try and make these tutorials as inclusive as possible, especially as some of the projects might not have terribly detailed literature with them. Any part that’s not relevant for more experience readers can always be skipped.

With that in mind, let’s get you started with the SharePoint List Field Manager. This is an easy tool to use, so the tutorial will be brief. We will cover web part installation, then activation and will look at some best practice ideas around it.

Installing the SharePoint List Field Manager

  1. Create a folder on your root drive called Web Parts. This should be something like C:\Web Parts
  2. Download the ListFieldManager.wsp file into this folder
  3. Open the SharePoint 2010 Management Shell. Typically this is Start à All Programs à Microsoft SharePoint 2010 Products à SharePoint 2010 Management Shell. Run this as the administrator
  4. Use the following PowerShell Command to install the wsp file. Add-SPSolution “C:\Web Parts\ListFieldManager.wsp”. Please note that the double quotation marks are needed for the file path. Otherwise, you may generate the positional parameter error message below.
  5. As PowerShell will helpfully tell you the solution is deployed but not installed. Installing the solution is what will make it available for use.
  6. Use this PowerShell command, making sure to change the http://YourApp URL to your own Web Application. This should install with no issues
  7. Once this command has completed the List Field Web Part will be available for use

     

Activating & using the SharePoint List Field Manager

The List Field Manager is a site collection feature and should be activated as such. It activates with no problems. This will be the same for both SharePoint 2007 & SharePoint 2010. The end product is a web part that you deploy and use to configure your lists: –

  1. Navigate to Site Actions à Site Settings à Site Collection Features and activate the web part. It is listed under SharePoint List Field Manger.
  2. Now that the web part is available it will be in the Web Part Gallery. It will appear under the SharePoint Management category
  3. Once the web part has been added to a web part zone you can feed it the URL of the site where you want to manage the lists. Please be aware that you cannot access lists in other sites if you are using the SharePoint 2010 SandBox deployment. Either way click on Display Lists
  4. The web part reloads with a List drop down, which is populated with all available lists for the site that was selected. Select a list and then click on Display Fields
  5. This will reload the web part again with a second drop down list from which you can select the field that you want to modify. Make the appropriate choice and then click Display Field Settings
  6. The web part reloads again with all available options for that field. The end configuration will look like this

Best Practice / Suggestions

These are some ideas and thoughts that struck me as I was using the SharePoint List Field Manager as things that I’d do when introducing the web part into any of my deployments. My current suggestions are: –

  1. Customising a View field to act as an List Admin Page

Best Practice #1: Setting up a List Admin Page

A useful trick I’ve found is to place the List View Manager within a page that’s associated with its usage. This simply consists clearing out the contents of a View Page and adding the web part in its place.

  1. Within your list or library enter the List Settings and scroll down to the Views Section
  2. Click on Create view. This loads a new page where you select the view format
  3. Click on Standard View
  4. This loads a new page where the view is configured. Forget about configuring anything here; just call the view something like List Field Admin Page. This can also be set up as a personal view. Click Ok. This loads a new page with the standard view
  5. On this page, get into the page editing mode via Site Actions à Edit Page
  6. Edit the web part from this view and set the hidden field under the Layout options
  7. Add the List Field Manager and move this to the top of the page
  8. You will now have an administration view with the List Field Manager present for future configuration