Using Javascript (SP.js) in Web Parts in Sharepoint 2010

The other day, my work mate, Andy, asked to gave him a hand with one modal form he was building. The form was developed with InfoPath, so the limitations were quite high to do what he wanted to do. He asked me to be able to query a list with the current user is using the form.

Instead of creating a form I developed a simple Visual Web Part and one application page and copy and paste the code, to see the difference. After that I passed the solution to Andy so he can use the code for his modal form.

This article covers the basic of javascript development in Sharepoint 2010, from debugging to some of the most basic classes to the integration with ASP.NET controls.

I am going to concentrate more in the web part rather than the page to avoid confusion. Remember that the application page is a clon of the web part, so the fuctionality is exactly the same.

The web part should look like this anyway:

This Application page should look like this:

Let’s go for the step by step approach.

What do we need?:

1. Visual Studio 2010.
2. Sharepoint 2010.
3. A list called Shared Documents with a Title field (this list comes by default).
4. SP.js and SP.debug.js Path.
5. 20 minutes of your time.
6. Some knowledge of Javascript, C# or Java.

1- Go to Visual Studio 2010->New Project->Sharepoint –> 2010->Empty Sharepoint Project. Call the project netsourcecodeJavaScript.

2- Right click in the project netsourcecodeJavaScript and Add new item…-> Select -> Visual Web Part. Call it GetUserWebPart . Now do the same to create the application page, right click on your project –> Add new item…-> Select –> Application page. Call it GetUsers.

3- Let’s go to tidy up our project…go to features and rename Feature1 to JavaScriptFeature.

4- Your project should look like this now:

5- We are ready to start developing the project. Go to GetUserWebPartUserControl.ascx remove all the stuff is inside and copy this code.

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="GetUserWebPartUserControl.ascx.cs" Inherits="netsourcecodeJavaScript.GetUserWebPart.GetUserWebPartUserControl" %>
<SharePoint:ScriptLink Name="SP.js" runat="server" OnDemand="true"
    Localizable="false" />
<SharePoint:FormDigest  runat="server" />
<script type="text/javascript">
    //ExecuteOrDelayUntilScriptLoaded(getWebUserData, "sp.js");
    var context = null;
    var web = null;
    var currentUser = null;
    var collListItems = null;
    var username = null;
    var loginname = null;
    var isgettinglist = false;
    function DisplayUser() {
        isgettinglist = false;
        GetUserData();
    }
    function DisplayList() {
        isgettinglist = true;
        GetUserData();
    }
    function GetUserData() {
        //## Getting the context
        context = new SP.ClientContext.get_current();
       
        //## Getting the web
        web = context.get_web();
       
        //## Getting the current user
        currentUser = web.get_currentUser();
        //## Load the query
        currentUser.retrieve();
        context.load(web);
        //## Execute the query Async
        context.executeQueryAsync(Function.createDelegate(this, this.onSuccessMethod), Function.createDelegate(this, this.onFailureMethod));
    }
    function onSuccessMethod(sender, args) {
        //## Setting the object to get the current user...again...
        var userObject = web.get_currentUser();
        //## Adding the user into a Variable
        username = userObject.get_title();
        loginname=userObject.get_loginName();
        if (isgettinglist == false) {
            alert('User name:' + username + '\n Login Name:' + loginname);
        }
        if (isgettinglist == true) {
                //## Getting the results from the list
                GetListByName();
         }
    }
    function onFailureMethod(sender, args)
    {
        alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace());
    }
    function SayHello() {
        alert('Hello Word');
    }
    function GetListByName() {
       
        //## Get the context again
        context = new SP.ClientContext.get_current();
        //## Get the list
        var list = context.get_site().get_rootWeb().get_lists().getByTitle('Shared Documents');
        //## Builds a CAMEL querty to return items
        var query = new SP.CamlQuery();
        query.set_viewXml('<View><Query><Where><Eq><FieldRef Name="Author"/><Value Type="User">' + username + '</Value></Eq></Where></Query><ViewFields><FieldRef Name="Title"/><FieldRef Name="FileLeafRef"/></ViewFields></View>');
        //## Geting the items
        this.collListItems = list.getItems(query);
        context.load(collListItems);
        //## Execute the query Async
        context.executeQueryAsync(Function.createDelegate(this, this.mySuccessFunction), Function.createDelegate(this, this.myFailFunction));
    }
    function mySuccessFunction() {
        // Do something useful like loop through your returned list items and output them somewhere
        // create an enumerator to loop through the list with 
        var listItemEnumerator = this.collListItems.getEnumerator();
        var strHtml = "RESULTS:";
        while (listItemEnumerator.moveNext()) {
            var oListItem = listItemEnumerator.get_current();
            strHtml += oListItem.get_item('Title');
        }
        alert(strHtml);
    }
     function myFailFunction() { alert('Request fail'); }
   
  </script>
<asp:Button ID="Button1" runat="server" Text="Get User" />
<asp:Button ID="Button2" runat="server" Text="Query List" />
<asp:Button ID="Button3" runat="server" Text="Say Hello" />

6- Now do the same with GetUser.ascx, double click and remove all the stuff. Just copy and paste the code below.

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GetUsers.aspx.cs" Inherits="netsourcecodeJavaScript.Layouts.netsourcecodeJavaScript.GetUsers" DynamicMasterPageFile="~masterurl/default.master" %>
<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<% #if SOME_UNDEFINED_CONSTANT %>
    <script type="text/javascript" src="/_layouts/SP.debug.js" ></script>
    <script type="text/ecmascript" src="/_layouts/SP.js" ></script>
    <script type="text/ecmascript" src="/_layouts/SP.Core.js" ></script>
    <script type="text/ecmascript" src="/_layouts/SP.Runtime.Debug.js" ></script>
<% #endif %>
<script language="ecmascript" type="text/ecmascript">
    //ExecuteOrDelayUntilScriptLoaded(getWebUserData, "sp.js");
    var context = null;
    var web = null;
    var currentUser = null;
    var collListItems = null;
    var username = null;
    var loginname = null;
    var isgettinglist = false;
    function DisplayUser() {
        isgettinglist = false;
        GetUserData();
    }
    function DisplayList() {
        isgettinglist = true;
        GetUserData();
    }
    function GetUserData() {
        //## Getting the context
        context = new SP.ClientContext.get_current();
        //## Getting the web
        web = context.get_web();
        //## Getting the current user
        currentUser = web.get_currentUser();
        //## Load the query
        currentUser.retrieve();
        context.load(web);
        //## Execute the query Async
        context.executeQueryAsync(Function.createDelegate(this, this.onSuccessMethod), Function.createDelegate(this, this.onFailureMethod));
    }
    function onSuccessMethod(sender, args) {
        //## Setting the object to get the current user...again...
        var userObject = web.get_currentUser();
        //## Adding the user into a Variable
        username = userObject.get_title();
        loginname = userObject.get_loginName();
        if (isgettinglist == false) {
            alert('User name:' + username + '\n Login Name:' + loginname);
        }
        if (isgettinglist == true) {
            //## Getting the results from the list
            GetListByName();
        }
    }
    function onFailureMethod(sender, args) {
        alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace());
    }
    function SayHello() {
        alert('Hello Word');
    }
    function GetListByName() {
        //## Get the context again
        context = new SP.ClientContext.get_current();
        //## Get the list
        var list = context.get_site().get_rootWeb().get_lists().getByTitle('Shared Documents');
        //## Builds a CAMEL querty to return items
        var query = new SP.CamlQuery();
        query.set_viewXml('<View><Query><Where><Eq><FieldRef Name="Author"/><Value Type="User">' + username + '</Value></Eq></Where></Query><ViewFields><FieldRef Name="Title"/><FieldRef Name="FileLeafRef"/></ViewFields></View>');
        //## Geting the items
        this.collListItems = list.getItems(query);
        context.load(collListItems);
        //## Execute the query Async
        context.executeQueryAsync(Function.createDelegate(this, this.mySuccessFunction), Function.createDelegate(this, this.myFailFunction));
    }
    function mySuccessFunction() {
        // Do something useful like loop through your returned list items and output them somewhere
        // create an enumerator to loop through the list with 
        var listItemEnumerator = this.collListItems.getEnumerator();
        var strHtml = "RESULTS:";
        while (listItemEnumerator.moveNext()) {
            var oListItem = listItemEnumerator.get_current();
            strHtml += oListItem.get_item('Title');
        }
        alert(strHtml);
    }
    function myFailFunction() { alert('Request fail'); }
   
  </script>
</asp:Content>
<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
<SharePoint:FormDigest ID="FormDigest1"  runat="server" />
<asp:Button ID="Button1" runat="server" Text="Get User" />
<asp:Button ID="Button2" runat="server" Text="Query List" />
<asp:Button ID="Button3" runat="server" Text="Say Hello" />
</asp:Content>
<asp:Content ID="PageTitle" ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
Application Page
</asp:Content>
<asp:Content ID="PageTitleInTitleArea" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server" >
My Application Page
</asp:Content>

7- Go back to GetUserWebPartUserControl.ascx.cs double click remove all the code and paste this one. (This code is basically three ASP.NET buttons calling javascript functions ).

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
namespace netsourcecodeJavaScript.GetUserWebPart
{
    public partial class GetUserWebPartUserControl : UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Button1.Attributes.Add("onclick", "DisplayUser()");
            Button2.Attributes.Add("onclick", "DisplayList()");
            Button3.Attributes.Add("onclick", "SayHello()");
        }
      
    }
}

8- Go to GetUser.ascx.cs and paste this code.(This code is basically three ASP.NET buttons calling javascript functions ).

using System;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
namespace netsourcecodeJavaScript.Layouts.netsourcecodeJavaScript
{
    public partial class GetUsers : LayoutsPageBase
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Button1.Attributes.Add("onclick", "DisplayUser()");
            Button2.Attributes.Add("onclick", "DisplayList()");
            Button3.Attributes.Add("onclick", "SayHello()");
        }
    }
}

9- Notice that in the webpart I have used:

<SharePoint:ScriptLink Name="SP.js" runat="server" OnDemand="true"
    Localizable="false" />

instead of calling javascript functions. The result is the same, so you choose what you prefer. On the page I have added the Intellisense for the class SP.js to do it just place this code in the content holder in the PageHead of GetUser.ascx, so what you get is nice things like this:

Notice as well we use Asynchronous events for our methods. This is the way that has to be done, just because that delay of a Sp.js call, it will never work in a Synchronous scope.

//## Execute the query Async
context.executeQueryAsync(Function.createDelegate(this, this.onSuccessMethod), Function.createDelegate(this, this.onFailureMethod));

Conclusion: As you can see you can achieve almost anything you want with the SP.js class, if you are working with JavaScript. Because we have the client context available for more complex solutions, this approach is perfect for modal forms where you can not refer the Sharepoint.ClientContext.dll. REST is another approach , but that is perfect when you have to work with your farm from the outside world.