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

My First Silverlight and SharePoint 2010 application using client side object model

This is my first post on Silverlight + SharePoint 2010 and it will take you through a very simple example of using a Silverlight application in SharePoint 2010, using the new SharePoint 2010 Client Object Model.

I will also show how to do deployment of Silverlight application in SharePoint 2010.

Visual Studio 2010 provides good development tools for SharePoint 2010 as well as for Silverlight.

Note that I will not be getting into the details of creating a flashy User interface (UI) in Silverlight – i will just create a very simple UI with a Data Grid view, text boxes and buttons.

The Example is divided into 3 sections.  As follows…..

1. Create UI in Silverlight.
2. Use Client side object model to Add, Update, Delete and retrieve records of SharePoint 2010 list from Silverlight 4 Application.
3. Create a SharePoint 2010 solution which will deploy a Silverlight XAP file to SharePoint.

Section 1: Create UI in Silverlight

I am going to create a simple Silverlight form for Contact Management. And it contains two textboxes, two buttons (Add and Update) and one Data Grid View with three columns (Name, Address and Actions). 

1. First of all create one Silverlight Application for that go to New Project > Select Silverlight > Select Silverlight Application > Enter Name of Application.

2. Uncheck the “Host the Silverlight application in a new web site” option. We don’t need it. And select Silverlight version probably 4.

     3.Open MainPage.xaml file in Design mode. And add two textboxes, two buttons (Add and Update) and one Data Grid View. Page will look like this…

4. Open MainPage.xaml file in XAML mode. And addfollowing XMAL code in Data Grid tag for columns creation. There are three columns first is Name, second is Address and third is Actions. Actions column contains two image buttons Edit and Delete.

XAML Code

<data:DataGridAutoGenerateColumns="False" Height="140"HorizontalAlignment="Left" Margin="7,153,0,0" Name="DataGridContacts"IsReadOnly="True"VerticalAlignment="Top" Width="379" > <data:DataGrid.Columns> <data:DataGridTextColumn Binding="{Binding Name}" Header="Name" Width="150" /> <data:DataGridTextColumn Binding="{Binding Address}" Header="Address" Width="150" /> <data:DataGridTemplateColumn Header="Actions"> <data:DataGridTemplateColumn.CellTemplate> <DataTemplate> <StackPanelVerticalAlignment="Center"> <GridVerticalAlignment="Center" Width="70"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Button x:Name="btnEdit"Grid.Column="0"CommandParameter="{Binding ID}" Content="{Binding ID}" Width="23" Height="23" Click="btnEdit_Click"> <Button.Template> <ControlTemplate> <Image Source="/SilverlightDataEntryApplication;component/Images/Edit.png" Height="23" Width="23" /> </ControlTemplate> </Button.Template> <ToolTipService.ToolTip> <ToolTip Content="Edit Contact"></ToolTip> </ToolTipService.ToolTip> </Button> <Button x:Name="btnDelete"Grid.Column="1" Margin="5" Click="btnDelete_Click"CommandParameter="{Binding ID}"> <Button.Template> <ControlTemplate> <Image Source="/SilverlightDataEntryApplication;component/Images/Delete.png" Height="25" Width="25" /> </ControlTemplate> </Button.Template> <ToolTipService.ToolTip> <ToolTip Content="Delete Contact"></ToolTip> </ToolTipService.ToolTip> </Button> </Grid> </StackPanel> </DataTemplate> </data:DataGridTemplateColumn.CellTemplate> </data:DataGridTemplateColumn> </data:DataGrid.Columns> </data:DataGrid>

Section 2: Use Client side object model to Add, Update,Delete and retrieve records of SharePoint 2010 list from Silverlight 4 Application.

1.    Add Microsoft.SharePoint.Client.Silverlight.dll and Microsoft.SharePoint.Client.Silverlight.Runtime.dll references in the project.

2.       Add code in MainPage.xaml.cs file. The following example shows how to create, Update and delete a list item in a specific SharePoint 2010 list.

Here I have demonstrated two differentmethods to access data from SharePoint 2010 List.

The example uses a delegate to Add, update and Delete the information of the item in the UI. And the example uses BackgroundWorkerthread for retrieving items from SharePoint 2010 list.

NoteImportant!

While accessing data from multiple lists, you cannot use delegate to access data, for the same you can useBackgroundWorker. We cannot run the data retrieval methods on UI thread of the Silverlight Application. For that we have to create a new thread using BackgroundWorkerand call data retrieval methods from the new thread’s DoWork method. For more information on How to useBackgroundWorker in Sliverlight + SharePoint 2010 Click here!

C# Code

using System; usingSystem.Collections.ObjectModel; usingSystem.ComponentModel; usingSystem.Windows; usingSystem.Windows.Controls; usingMicrosoft.SharePoint.Client; namespaceSilverlightDataEntryApplication { publicpartialclassMainPage : UserControl     {         #region Global Variables BackgroundWorkerbwLoadContacts = newBackgroundWorker(); ObservableCollection<ContactInfo>gContactCollection = null; intgSelectedID = 0; stringgSelectedName = string.Empty; stringgSelectedAddress = string.Empty; ListItemgListItem = null;         #endregion publicMainPage()         { InitializeComponent(); bwLoadContacts.DoWork += newDoWorkEventHandler(bwLoadContacts_DoWork); bwLoadContacts.RunWorkerCompleted += newRunWorkerCompletedEventHandler(bwLoadContacts_RunWorkerCompleted); LoadContacts();         }         #region Load Contacts from SharePoint List and Bind to DataGrid privatevoidLoadContacts()         { //Run BackgroundWorker Thread Here! if (!bwLoadContacts.IsBusy)             { bwLoadContacts.RunWorkerAsync();             }         } voidbwLoadContacts_DoWork(object sender, DoWorkEventArgs e)         { //Write Data Retrival Code Here! ClientContextoClientContext = newClientContext(ApplicationContext.Current.Url); ListoList = oClientContext.Web.Lists.GetByTitle("Contacts"); oClientContext.Load(oList); CamlQueryoCamlQuery = newMicrosoft.SharePoint.Client.CamlQuery();             #region CAML stringstrCAMLQueryXML = string.Format(@"<View> <Query> <OrderBy> <FieldRef Name='Name' /> </OrderBy> </Query> </View>");             #endregion oCamlQuery.ViewXml = strCAMLQueryXML; ListItemCollectionoListItemCollection = oList.GetItems(oCamlQuery);oClientContext.Load(oListItemCollection); oClientContext.ExecuteQuery();//Execute Query Synchronously gContactCollection = newObservableCollection<ContactInfo>(); foreach (ListItemoIteminoListItemCollection)             { ContactInfo contact = newContactInfo();                 contact.ID = oItem.Id; contact.Name = Convert.ToString(oItem["Name"]); contact.Address = Convert.ToString(oItem["Address"]); gContactCollection.Add(contact);//Add to global Variable             }         } voidbwLoadContacts_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)         { //Write Data Binding Code Here! DataGridContacts.ItemsSource = gContactCollection; TxtName.Text = ""; TxtAddress.Text = "";         }         #endregion privatevoidBtnAdd_Click(object sender, RoutedEventArgs e)         { LblMessage.Content = "Adding Record..."; gSelectedName = TxtName.Text; gSelectedAddress = TxtAddress.Text; ClientContextoClientContext = newClientContext(ApplicationContext.Current.Url); ListoList = oClientContext.Web.Lists.GetByTitle("Contacts"); oClientContext.Load(oList); gListItem = oList.AddItem(newListItemCreationInformation()); gListItem["Name"] = TxtName.Text; gListItem["Address"] = TxtAddress.Text; gListItem.Update(); oClientContext.Load(gListItem); oClientContext.ExecuteQueryAsync(OnRequestSucceeded, null);         } privatevoidBtnUpdate_Click(object sender, RoutedEventArgs e)         { LblMessage.Content = "Updating Record..."; ClientContextoClientContext = newClientContext(ApplicationContext.Current.Url); ListoList = oClientContext.Web.Lists.GetByTitle("Contacts"); oClientContext.Load(oList); gListItem = oList.GetItemById(gSelectedID); gListItem["Name"] = TxtName.Text; gListItem["Address"] = TxtAddress.Text; gListItem.Update(); oClientContext.Load(gListItem); oClientContext.ExecuteQueryAsync(OnRequestSucceeded, null);         } privatevoidbtnDelete_Click(object sender, RoutedEventArgs e)         { if (MessageBox.Show("Are you sure you want to remove this contact?","Delete Contact",MessageBoxButton.OKCancel) == MessageBoxResult.OK)             { //Delete Record LblMessage.Content = "Deleting Record..."; Button _btn = (Button)sender; int ID = Convert.ToInt32(_btn.CommandParameter.ToString()); ClientContextoClientContext = newClientContext(ApplicationContext.Current.Url); ListoList = oClientContext.Web.Lists.GetByTitle("Contacts"); oClientContext.Load(oList); gListItem = oList.GetItemById(ID); gListItem.DeleteObject(); oClientContext.Load(oList); oClientContext.ExecuteQueryAsync(OnRequestSucceeded, null);             }         } privatevoidOnRequestSucceeded(Object sender, ClientRequestSucceededEventArgsargs)         { // this is not called on the UI thread           Dispatcher.BeginInvoke(ShowMessage);         } privatevoidShowMessage()         { LblMessage.Content = "Operation Completed Successfully!"; LoadContacts();         } privatevoidbtnEdit_Click(object sender, RoutedEventArgs e)         {            Button _btnEdit = (Button)sender; gSelectedID = Convert.ToInt32(_btnEdit.CommandParameter.ToString()); GetContactByID(gSelectedID);         } privatevoidGetContactByID(int ID)         { ClientContextoClientContext = newClientContext(ApplicationContext.Current.Url); ListoList = oClientContext.Web.Lists.GetByTitle("Contacts"); oClientContext.Load(oList); gListItem = oList.GetItemById(ID); oClientContext.Load(gListItem); //gContentsCollection.RetrieveItems().Retrieve(); oClientContext.ExecuteQueryAsync(OnRequestSucceeded_Load, null);         } privatevoidOnRequestSucceeded_Load(Object sender, ClientRequestSucceededEventArgsargs)         { // this is not called on the UI thread           Dispatcher.BeginInvoke(BindData);         } privatevoidBindData()         { gSelectedID = gListItem.Id; TxtName.Text = Convert.ToString(gListItem["Name"]); TxtAddress.Text = Convert.ToString(gListItem["Address"]);         }            } publicclassContactInfo     { publicint ID { get; set; } publicstring Name { get; set; } publicstring Address { get; set; }     } }

Section 3: Create a SharePoint 2010 solution which will deploy a Silverlight XAP file to SharePoint.

1.       Create an Empty SharePoint 2010 project with Deploy on farm solution is checked.

2.       Map ClientBin SharePoint folder from layouts.

3.       Create a new folder as ContactsDemoin ClientBin folder.

4.       Add post-build command as “xcopy  "$(TargetDir)SilverlightDataEntryApplication.xap" "$(SolutionDir)DeploySilverlightToSharePoint\ClientBin\ContactsDemo\" /Y” in the Silverlight project SilverlightDataEntryApplication.

5.       BuildSilvelright Project. One file will be copied to DeploySilverlightToSharePoint\ClientBin\ContactsDemo\ location.

6.       Include SilverlightDataEntryApplication.xapfile in SharePoint Project. Build the SharePoint project and deploy the solution.

7.       Open SharePoint Site and Add Silverlight Web part from the media group on the page.

8.       Go to edit web part and Click on Configure button.

9.       Popup will open with one textbox, enter XAP file path as “_LAYOUTS\ClientBin\ContactsDemo\SilverlightDataEntryApplication.xap” and click in OK Button.