SharePoint 2010 ECMAScript/Javascript IntelliSense in Visual Studio 2010

Visual studio 2010 provides great IntelliSense for .Net. But for JavaScript and ECMAScript its required some configuration like adding some references.

We need to reference the debug files in our JS library in Visual Studio.  Simply type the following four lines at the top of our JS library.

JS File:

/// <reference name="MicrosoftAjax.js" />

/// <reference path="file://C:/Program Files/Common Files/Microsoft Shared/Web Server Extensions/14/TEMPLATE/LAYOUTS/SP.core.debug.js" />

/// <reference path="file://C:/Program Files/Common Files/Microsoft Shared/Web Server Extensions/14/TEMPLATE/LAYOUTS/SP.debug.js" />

/// <reference path="file://C:/Program Files/Common Files/Microsoft Shared/Web Server Extensions/14/TEMPLATE/LAYOUTS/SP.Runtime.Debug.js" />

Application Page:

<% #if SOME_UNDEFINED_CONSTANT %>

<script type="text/ecmascript" src="/_layouts/SP.core.debug.js " />

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

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

<% #endif %>

Note: by using an undefined constant, Visual Studio will provide IntelliSense while the <script> element is omitted from the actual page rendering

Important Note: Use for Development Purpose only, remove these statements when going for production environment deployment.

Hint: If it’s not appearing, press CTRL + Shift + J together to update Jscript IntelliSense.

You can add different debug js files reference and you will find it in LAYOUTS or ISAPI folder of SharePoint 14 Hive.

For more information you can refer this MSDN Articles:

1.       Here is the official documentation by Microsoft on how to enable IntelliSense for the ECMAScript object model - How to: Enable ECMA Client Object Model IntelliSense in Visual Studio 2010

2.       This will get you most of the IntelliSense that you care about. If something looks like its missing… you will get a list for the appropriate ones by class/namespace can be found here - ECMAScript Class Library - SharePoint 2010

Screen Cast:

Search debug.js files in 14 Hive



Choosing between ECMAScript and Silverlight while developing Client-Side code in SharePoint 2010

In modern web application design, the requirement to add client-side code is becoming increasing popular. After all, websites that have rich client-side behaviors are now the norm on the Internet. Adding client-side code into your SharePoint solutions is definitely something that will improve the user experience.

Beyond improving the user experience, there are SharePoint design scenarios where client-side code can do what server-side code cannot. Let's examine a simple example. Imagine a scenario in which you are required to develop a sandboxed solution that retrieves content from a public web service on the Internet and then writes this content into a SharePoint list. The problem with using server-side code in a sandboxed solution is that you cannot call out to a web service.

However, you can redesign your sandboxed solution to include custom ECMAScript code or a Silverlight application that calls out to the web service directly from the user's browser. After your client-side code retrieves the content from the web service, it can then write the content into a SharePoint list by using either the client object model or ListData.svc. This example provides yet another motivation for why you might want to include client-side code in a SharePoint solution.

If you decide you want to add client-side code to a SharePoint solution, the next step is to choose between writing custom ECMAScript code-behind pages or developing one or more Silverlight applications. Let's look at the pros and cons of each approach.

ECMAScript has an advantage of reach over Silverlight because it is supported across a larger number of browsers. Furthermore, browsers include built-in support for ECMAScript, whereas Silverlight applications do not run unless the user downloads and installs the Silverlight runtime. Although the download and installation of the Silverlight runtime can be completed over the Internet in a matter of seconds, you must still acknowledge that Silverlight development makes an assumption that the user will trust a Microsoft software component and install it from across the Internet. This might not be a good assumption to make in wide-reach scenarios, such as when you develop a commerce application for the Internet where you want to reach the maximum number of potential users.

In most SharePoint 2010 environments, you can typically assume that it will not cause problems to deploy Silverlight applications with your SharePoint solutions. After all, SharePoint Foundation includes several different Silverlight 3 applications in standard pages, such as the creation page that is available by selecting the More Options command on the Site Actions menu.

The fact that SharePoint 2010 users are required to install Silverlight 3 just to get the complete built-in experience means that you can typically assume that they will already have the Silverlight 3 runtime installed on their computers. If you plan to use Silverlight 4 instead of Silverlight 3, you must assume that users are willing and able to install an updated version of Silverlight on their computers.

The final point to consider when choosing between ECMAScript and Silverlight concerns developer productivity. In this area, Silverlight development is the clear winner. That is because you can work inside Visual Studio 2010 and write your code in C# or Visual Basic. You experience all the benefits of compile-time type checking and IntelliSense as you call methods in the .NET Framework and the client object model. You can also create service references that make it much easier to program against web services, such as ListData.svc.

The experience programming ECMAScript in Visual Studio 2010 is nothing like the experience programming a Silverlight application. There is no compile-time type checking, nor is there any IntelliSense when you program against the client object model. Furthermore, you need advanced programming skills with ECMAScript and ASP.NET AJAX to call out to a web service, such as ListData.svc, or to perform the required thread switching from a callback method before updating something in the UI. If you are just beginning to learn to write client-side code, developing with Silverlight will be a much better option than writing code by using ECMAScript.

Before developing SharePoint client-side application consider following points.

Features	Silverlight	ECMAScript
Easy data retrieval	No	Yes
Easy Programming	No	Yes
User Interface	Very Attractive, No need to more efforts on UI Design.	Totally Depend on web designer
Minimum Users	Good option	-
Maximum Users	Fare option. Because may all users browser does not have Silverlight installed.	Very good option. Because easy to load, support maximum browsers.
Data Processing	Very easy	Difficult to implement
Best Scenario	Great User Interface and Advance data processing like accessing multiple lists and combining its items.	Accessing one list item and display it’s in grid view or detail view.

MSDN Reference Link: http://msdn.microsoft.com/en-us/library/gg552613.aspx

Notifications in Sharepoint 2010

In SharePoint 2010 UI model, there are lots of improvements in Notifications or status, Grid Views, Menus, Popups, etc…

Here I will demonstrate you, How to Display Notifications and Status messages in SharePoint 2010 portal.

We can use these notifications or status to Display, processing messages like “Loading…” “Processing…”

“Wait…” or Status like “Thank you for contacting” “Your request has been processed” or Caught exception messages.

Display Notification (ECMAScripts):

var value = SP.UI.Notify.addNotification(strHtml, bSticky);

strHtml = The message inside the notification.

bSticky = Specifies whether the notification stays on the page until removed. Default notification remains for 5 seconds.

Display Status (ECMAScripts):

var statusId = SP.UI.Status.addStatus([strTitle], strHtml,[atBegining]);

strTitle [Optional] = The title of the status message.

strHtml = The contents of the status message.

atBegining [Optional] = Specifies whether the status message will appear at the beginning of the list.

SP.UI.Status.setStatusPriColor(statusId, strColor); // Sets the priority color of the specified status message.

statusId = The ID of the status message.

strColor = The color to set for the status message.

The following table lists the values and their priority. [Note: color name is in lower case]

Value	Priority
red	Very Important
yellow	Important
green	Success
blue	Information

SP.UI.Status.removeStatus(statusId); // Removes the specified status message.

SP.UI.Status.removeAllStatus(true); // Removes the all status messages.

Overall code (HTML & JavaScript)

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

    ExecuteOrDelayUntilScriptLoaded(Initialize, "sp.js");

    var statusId = '';

    var notifyId = '';

    function Initialize() {

    }

    function AddNotificationAutoHide() {

        notifyId = SP.UI.Notify.addNotification("Loading…", false);

    }

    function AddNotification() {

        notifyId = SP.UI.Notify.addNotification("Loading…", true);

    }

    function RemoveNotification() {

        SP.UI.Notify.removeNotification(notifyId);

        notifyId = '';

    }

    function AddStatus(color) {

        statusId = SP.UI.Status.addStatus("Error", "Invaild input string", true);

        SP.UI.Status.setStatusPriColor(statusId, color);

    }

    function RemoveLastStatus() {

        SP.UI.Status.removeStatus(statusId);

        statusId = '';

    }

    function RemoveAllStatus() {

        SP.UI.Status.removeAllStatus(true);

    }

    function ShowNotificationMessage(tooltip, message, sticky) {

        SP.UI.Notify.addNotification(message, sticky, tooltip, null);

    }

</script>

<input type="button" value="Add Notification(Auto Hide)" onclick="AddNotificationAutoHide()" />

<input type="button" value="Add Notification" onclick="AddNotification()" />

<input type="button" value="Remove Notification" onclick="RemoveNotification()" /> <br /><br />

<input type="button" value="Add Status (Red)" onclick="AddStatus('red')" />

<input type="button" value="Add Status (Green)" onclick="AddStatus('green')" />

<input type="button" value="Remove Last Status" onclick="RemoveLastStatus()" />

<input type="button" value="Remove All Status" onclick="RemoveAllStatus()" />

Use literal control to add notification from server side.

Screen Cast: