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…..
- Create UI in Silverlight.
- Use Client side object model to Add, Update, Delete and retrieve records of SharePoint 2010 list from Silverlight 4 Application.
- 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.
|
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.