Monday, January 24, 2011

Create Silverlight Applications to Access SharePoint 2010 List Data using Client Object Model

In this article, I will create a simple Silverlight 4 application that displays a SharePoint 2010 list data inside a datagrid control. To do so, I need to follow given steps:-
1. Create a Silverlight Application Project.
2. Add code to access SharePoint list data.
3. Deploy the solution.
4. Test the solution.

Create a Silverlight Application Project

1. Start VS 2010, Click File, point to New Project, then select Silverlight Application.

2. At the top of the screen, select .NET Framework 3.5, type SilverlightApplicationDemo in the Name box and then click ok.

3. The New Silverlight Application dialog box appears, and then unchecks the “Host the Silverlight application in a new web site” option. We don’t need it even though you can use this to host your silverlight application and select Silverlight 4 as silverlight version.

4. Add reference to the SharePoint silverlight client object model. For doing so in solution explorer, right click on Add References.

5. Next, browse to “C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin”, then select Microsoft.SharePoint.ClientSilverlight.dll and Microsoft.SharePoint.Client.Silverlight.Runtime.dll, and click OK.


Add Code to access SharePoint list data

1. To view data, drag a DataGrid control from the toolbox onto existing grid in the MainPage.xaml silverlight Designer. And set AutoGenerateColumns to true.
2. Open MainPage.xaml.cs and then add following statement at the top of the file.
using Microsoft.SharePoint.Client;

3. Add the following class before the MainPage class.
public class EmpInfo
{
// Public properties
public string EmpID { get; set; }
public string Name { get; set; }
public string Address { get; set; }
}
4. ListItemCollection gempItemCol
ObservableCollection< EmpInfo > gEmpInfo= new ObservableCollection< EmpInfo >();

public MainPage()
{
InitializeComponent();
GetEmpData();
}
private void GetEmpData ()
{
try
{
ClientContext Context = new ClientContext(ApplicationContext.Current.Url);
Context.Load(Context.Web);
List _emps = Context.Web.Lists.GetByTitle(“emp”);
Context.Load(_channels);
CamlQuery _query = new Microsoft.SharePoint.Client.CamlQuery();
string _camlQueryXml = @"View> /View>";
_query.ViewXml = _camlQueryXml;
gempItemCol =_emps.GetItems(_query);
Context.Load(gempItemCol);
Context.ExecuteQueryAsync(OnRequestSucceeded, null);
}
catch (Exception ex)
{;}
}
private void OnRequestSucceeded (Object sender, ClientRequestSucceededEventArgs args)
{
try
{
Dispatcher.BeginInvoke(BindEmpsData);
}
catch (Exception ex)
{; }
}

private void BindEmpsData ()
{
try
{
foreach (ListItem _item in gempItemCol)
{
_ EmpID= _item.FieldValues["EmpID"] as FieldLookupValue;//if taken lookup field
String _strEmpID;
if (_EmpID == null)
_ strEmpID = string.Empty;
else
_ strEmpID = _ EmpID.LookupValue;

gEmpInfo.Add(new EmpInfo()
{
Name = Convert.ToString(_item["Name"]),
EmpID = Convert.ToString(_item.Id),
Address== Convert.ToString(_item["Address "])
});
}
lstEmployee.ItemsSource = gEmpInfo;//Bind DataGrid
}
catch (Exception ex)
{ ; }
}

Deploy the solution

1. To deploy the solution onto SharePoint, the resulting .xap file of silverlight application must be present in the C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin folder.
2. To do so there are two ways
a) You can change the output path to “C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin”.
b) Manual copy and paste it in ClientBin folder.
3. Build the solution and follow any of the above approach.

Test the solution

1. Navigate to the SharePoint site.
2. Select Edit Page icon.
3. Click Insert and then click web part, select Media and Content from web part list and then click add.
4. In the silverlight web part dialog box type /_layouts/ClientBin/ SilverlightApplicationDemo.xap as URL and then click ok.

No comments:

Post a Comment