Home Library Learn Downloads Support Community
Sign in | United States - English | |
1 out of 5 rated this helpful - Rate this topic

Setting Up an Application Page for JavaScript

SharePoint 2010

Updated: July 2010

Available in SharePoint Online

You can include custom code that uses the ECMAScript (JavaScript, JScript) object model within a script block on an .aspx page, or you can create a separate .js file to include your code and reference it from the .aspx page. The following example assumes that you have created a SharePoint Foundation project with an application page in Microsoft Visual Studio 2010, as described in Creating Application Pages for SharePoint. Visual Studio creates the application page in %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS.

To get IntelliSense for the SP namespace in the Visual Studio Code Editor, add <script> tags that reference the SharePoint Foundation .js files that are installed in the \LAYOUTS directory. Include references to SP.Core.Debug.js, SP.Debug.js, and SP.Runtime.Debug.js, as seen in the example.

Important noteImportant

In Visual Studio 2010, the <script> tags that you add are a design time component that is used to provide IntelliSense for the SharePoint Foundation client object model. However, to build the project, you must comment out the <script> tags. Also, test your page on the server to make sure that the page has no errors.

If you are writing code that modifies SharePoint Foundation data, include a FormDigest control to create a digest for security validation of the page.

Copy 
<%@ 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="TestServerOM1.aspx.cs" 
  Inherits="TestServerOM1.Layouts.TestServerOM1.TestServerOM1" DynamicMasterPageFile="~masterurl/default.master" %>

<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">

<script type="text/ecmascript" src="/_layouts/SP.Core.js" />
<script type="text/ecmascript" src="/_layouts/SP.Debug.js" />
<script type="text/ecmascript" src="/_layouts/SP.Runtime.Debug.js" />

<script language="ecmascript" type="text/ecmascript">

          function onQuerySucceeded(sender, args) {
              alert('Title: ' + this.oWebsite.get_title() + ' Decription: ' + this.oWebsite.get_description());
          }

          function onQueryFailed(sender, args) {
              alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace());
          }

          function retrieveWebSite() {
              var clientContext = new SP.ClientContext.get_current();
              this.oWebsite = clientContext.get_web();
              clientContext.load(this.oWebsite);
              clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
          }
      </script>
</asp:Content>

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <SharePoint:FormDigest ID="FormDigest1" runat="server"></SharePoint:FormDigest>

    <input id="Button1" runat="server" Text="Retrieve Web Site" OnClick="retrieveWebSite()" />
  
</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>

For information about the debug .js files that are included in an installation of SharePoint Foundation, see Client Object Model Distribution and Deployment.

Concepts

How to: Work with Websites
Data Retrieval Overview
Common Programming Tasks in the Managed Client Object Model

Other Resources

Client Class Library
JavaScript Class Library

Date

Description

Reason

July 2010

Added information about using <script> tags for IntelliSense.

Content update

May 2010

Initial publication

Did you find this helpful?
(1500 characters remaining)
Community Content Add
Annotations FAQ
solution
The above code gives me error. when remove below tags it works.

<script type="text/ecmascript" src="/_layouts/SP.Core.js" />
<script type="text/ecmascript" src="/_layouts/SP.Debug.js" />
<script type="text/ecmascript" src="/_layouts/SP.Runtime.Debug.js" />

instead of above i used below tags. it is working...

<sharepoint:scriptlink ID="Scriptlink1" localizable="false" name="SP.js" ondemand="true" runat="server"></sharepoint:scriptlink>
<sharepoint:scriptlink ID="Scriptlink2" localizable="false" name="SP.Core.js" ondemand="true" runat="server"></sharepoint:scriptlink>
<sharepoint:scriptlink ID="Scriptlink3" localizable="false" name="SP.Debug.js" ondemand="true" runat="server"></sharepoint:scriptlink>
<sharepoint:scriptlink ID="Scriptlink4" localizable="false" name="SP.Runtime.Debug.js" ondemand="true" runat="server"></sharepoint:scriptlink>

After long trail and error i used above code but i didn't get what is the difference between using <Script> and <sharepoint:scriptlink> tags.
Can one please suggest me on it..

Thanks for your patients.
History
Error
These rules give me errors. When removing this the example works

<script type="text/ecmascript" src="/_layouts/SP.Core.js" />
<script type="text/ecmascript" src="/_layouts/SP.Debug.js" />
<script type="text/ecmascript" src="/_layouts/SP.Runtime.Debug.js" />

History
Will the client om .js files be referenced automatically?
On the application page, it doesn't use <SharePoint:ScriptLink> or <script> to reference any client om .js script files. I also cannot found it on v4.master.

I tested it on a site page, also no need to use <SharePoint:ScriptLink> to reference SP.js.

Will SP.js be referenced automatically on application page and site page?
History
Use the ScriptLink control instead of <script> tags
If you use the ScriptLink control instead of the <script> tags then you do not have to manually switch between the production and debug JS files.
History
SP.ClientContext.get_current() not working ?
I tried this code and it works fine only on the root site collection of the web application.
On another one, like /sites/MySiteCollection this code called from my application page always returns me the root site collection (/). And the list I want to access doesn't exist on its rootweb so I get an error. I tried putting this code directly in a webpage using a content editor webpart, and it works fine. But not within an application page stored in /_layouts folder.
Does anyone knows how to solve this problem ?

EDIT : I found the solution. I didn't call my application page correctly, I called the url "/_layouts/mypage.aspx" instead of "siteColUrl/_layouts/mypage.aspx"... Stupid mistake... Now the SP.ClientContext.get_current() works perfectly.
History
.
.
History
.
.
History
.
.
History
.
.
History
Intellisense tags
A future drop of the SDK will include the following important note:

In Microsoft Visual Studio 2010, the <script> tags that you add are a design time component that is used to provide IntelliSense for the SharePoint Foundation client object model, but to build the project, you must comment out the <script> tags. Also, test your page on the server to make sure that the page has no errors.
History