jsFiddle - A helpful tool

While researching a problem, I came across a comment on a forum that talked about jsFiddle. jsFiddle has become on of my favorite go to tools for testing, experimenting, and learning web technologies like HTML, CSS and jQuery. 

jsFiddle uses a four box grid layout. Each box allows you to enter either HTML, CSS, code and to see the results. It was been a great tool for testing out snippets of HTML, CSS and JavaScript. The tool also allows the you to pick different libraries like jQuery. 

I have personally found this tool to be incredibly useful. I am now using this tool almost exclusively for my learning projects. I frequently use it to test JavaScript and jQuery code that I find in blog posts.  

Resources

• jsFiddle
• jsFiddle Documentation 
• jsFiddle Tutorial

Listing User Profile Accounts from SharePoint 2013

Today, I am doing a thought experiment / learning exercise. The goal is to come up with a few different ways to display data from SharePoint’s User Profile Service.

Thought A – Manage User Profiles within Central Admin.

From the Manage User Profile page within Central Administration, I can search for a user or a group of user. For example, if SharePoint is setup to use claim based identity then a search phrase “i:0” will give list of users.

While using this method is fast and easy trying to get a list of all the accounts or to create a file with all the accounts in it is difficult.

Thought B - PowerShell

With a simple PowerShell script, it is easy to get a list of all the user profiles. What is really nice about this method is it is very simple to pipe the results of the GetEnumerator method to filter the results. PowerShell has built-in functionality that makes creating a file with the account information in it a snap.

add-pssnapin "Microsoft.Sharepoint.Powershell"

$siteList = Get-SPSite 
$serviceContext = Get-SPServiceContext($siteList[0])
$profileManager = New-Object Microsoft.Office.Server.UserProfiles.UserProfileManager($serviceContext)

foreach($usrProfile in $profileManager.GetEnumerator()) {
    Write-Host $usrProfile.AccountName "|" $usrProfile.DisplayName
}

Thought C – Visual Studio

Referencing the correct libraries and little bit of code, it very simple to get back a list of all the accounts within User Profile. With a little bit of extra code searching the accounts, searching for a specific account or writing the accounts to a file is no problem.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.Office.Server.UserProfiles;
using Microsoft.SharePoint;
using System.Diagnostics;

namespace UserProfileList
{
    class Program
    {
        static void Main(string[] args)
        {
            var siteList = new SPSite("http://sp2013");
            SPServiceContext svcCtx = SPServiceContext.GetContext(siteList);
            var profileMgt = new UserProfileManager(svcCtx);
            var userProfiles = profileMgt.GetEnumerator();

            while (userProfiles.MoveNext())
            {
                UserProfile userProfile = (UserProfile)userProfiles.Current;
                
                Console.WriteLine(userProfile.AccountName);
            }

            Console.ReadLine();
     }
    }
}

Wrap Up

This was a fun experiment in figuring out different ways to do the same task. It showed me a bit about the effort it takes to get a result. Using the out of the box functionality got me to a result very fast and it should cover 80% of the needs around looking up a user or a small group of users. PowerShell makes it simple and easy to get a list of users. 

Using CoffeeScript within SharePoint 2013

The other day I was reading about CoffeeScript and I was rather intrigued by how neat and simple CoffeeScript makes writing JavaScript. Since CoffeeScipt compiles down to JavaScript than it should be rather easy to use CoffeeScript with SharePoint 2013.

I have a simple development environment setup. It contains three servers, one server is the domain controller, one server hosts SharePoint, and the last server is for the SQL Server. I am using Hyper-V to host these virtual servers. Visual Studio 2013 is installed on the SharePoint sever. To make working with HTML, CSS, JavaScript, TypeScript, CoffeeScript or LESS easier the Web Essentials extension was installed.

My plan is rather simple write a little HTML to created two boxes and when a user clicks on one of the boxes the box should change color.

I will start with setting up a new Visual Studio project using a Empty ASP.NET Web Application template in the Visual C# folder.

Next I will add an HTML Page to the project. The code is really straight-forward.

 <!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
   <title>CoffeeScript Playground</title>  
 </head>  
 <body>  
   <h4>The Boxes </h4>   
   <div class="holder" style="width: 500px;">  
     <div id="box1" style="border:1px solid black; width:200px; height:200px; float: left; background-color:lightblue; ">Box 1</div>  
     <div id="box2" style="border:1px solid black; width:200px; height:200px; float: right; background-color: lightgreen;">Box 2</div>  
   </div>  
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  
   <script src=" mycoffeescript.js"></script>  
 </body>  
 </html>  

Now to add a CoffeeScript file to the project. Again the code is straight-forward.

 # CoffeeScript  
 $j = jQuery  
 box1 = $j '#box1'  
 box2 = $j '#box2'  
 $j ->  
   box1.click ->  
     color= box1.css('background-color')  
     if color == "rgb(173, 216, 230)"  
       box1.css('background-color', 'blue')  
     else  
       box1.css('background-color', 'lightblue')  
   box2.click ->  
     color= box2.css('background-color')  
     if color == "rgb(144, 238, 144)"  
       box2.css('background-color', 'green')  
     else  
       box2.css('background-color', 'lightgreen')  

Once I had everything working it was time to port it over to SharePoint. For this, I wanted a way to quickly setup and test. I began by adding a Content Editor part to a page.

 <h4>The Boxes </h4>   
 <div class="holder" style="width: 500px;">   
   <div id="box1" style="border: 1px solid black; width: 200px; height: 200px; float: left; background-color: lightblue;">Box 1</div>   
   <div id="box2" style="border: 1px solid black; width: 200px; height: 200px; float: right; background-color: lightgreen;">Box 2</div>   
 </div>  

My next step was to add a Script Editor part to the page. I simple copied the code JavaScript code from Visual Studio and dropped it in the part.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  
 <script type="text/javascript">  
 (function() {  
  var $j, box1, box2;  
  $j = jQuery;  
  box1 = $j('#box1');  
  box2 = $j('#box2');  
  $j(function() {  
   box1.click(function() {  
    var color;  
    color = box1.css('background-color');  
    if (color === "rgb(173, 216, 230)") {  
     return box1.css('background-color', 'blue');  
    } else {  
     return box1.css('background-color', 'lightblue');  
    }  
   });  
   return box2.click(function() {  
    var color;  
    color = box2.css('background-color');  
    if (color === "rgb(144, 238, 144)") {  
     return box2.css('background-color', 'green');  
    } else {  
     return box2.css('background-color', 'lightgreen');  
    }  
   });  
  });  
 }).call(this);  
 </script>  

After saving the page, I was ready to test.

It turns out that working with CoffeeScript and SharePoint is fairly straight-forward. It took a few tutorials to get an idea of the syntax and I had to work a few examples. As I wrote this blog post it dawned on me that if I used a different reference in the Script Editor, I could have used the CoffeeScript instead of the JavaScript. Change the Script Editor part to use the following:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>  
 <script src='http://coffeescript.org/extras/coffee-script.js' type='text/javascript'></script>  
 <script type='text/coffeescript'>  
 $j = jQuery  
 box1 = $j '#box1'  
 box2 = $j '#box2'  
 $j ->  
   box1.click ->  
     color= box1.css('background-color')  
     if color == "rgb(173, 216, 230)"  
       box1.css('background-color', 'blue')  
     else  
       box1.css('background-color', 'lightblue')  
   box2.click ->  
     color= box2.css('background-color')  
     if color == "rgb(144, 238, 144)"  
       box2.css('background-color', 'green')  
     else  
       box2.css('background-color', 'lightgreen')  
 </script>  

Using the Content Editor and Script Editor web parts makes sense in a development or learning environment to explore a concept or test out an idea.

A speedy way to add JavaScript and jQuery to SharePoint 2013

The fastest way I know to add JavaScript and/or jQuery to the SharePoint site is through the use of the Script Editor web part.

JavaScript 

The steps

1. Edit the page
2. Add the Script Editor web part
3. Add the Script
4. Save your work

Here are a few screens shoots.

Added the Script Editor to the page

Added the JavaScript 

The Results

jQuery

Adding jQuery to a SharePoint site is just as simple.

The steps

1. Edit the page
2. Add the Script Editor web part
3. Add a reference to jQuery
4. Add the Script
5. Save your work

Adding the Script Editor Part

Adding the reference to the jQuery package and the jQuery script

The Results

In this example, the code is making a reference to the jQuery's content delivery network (CDN) that contains the jQuery package we are interested in. In this case, I am making a reference to the 1.11.0 minified package. It is also acceptable to download the jQuery and load it into SharePoint Library like the 'Style Library'.

Words of Caution

Please remember that JavaScript and jQuery execute with the client's browser. It is possible that the script being added can interfere with the interface. It is highly advisable to test JavaScript and/or jQuery scripts in a development environment first.

This approach to adding JavaScript and jQuery is very fast. There is a downside to this approach. When using jQuery you need to reference the jQuery with each site and page. When it comes time to update the jQuery package to a newer version you will have to check each page and make the change. Another problem with this approach is it can lead to multiple versions and multiple references of the jQuery package. Having multiple reference to the same package within the same page can lead to performance issues because you are downloading the same information multiple times when the page gets called. Having references to multiple versions of the jQuery library leads to confusion and makes debugging harder.

Update - 7 March 2014

I encountered a strange behavior. My script would work when the page was in edit mode and not when the page is in it normal mode. It took a while to sort it out the issue. I needed to turn off the feature 'Minimal Download Strategy'.