Sunday 13 May 2012

Silverlight in Sharepoint 2010 webpart

Step 1) Create Silverlight project using Visual Studio 2010

Step2) Add Sharepoint Silverlight dll Reference  

located in
 %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS\ClientBin


1)Microsoft.SharePoint.Client.Silverlight.dll
2) Microsoft.SharePoint.Client.Silverlight.Runtime.dll


Step 3)   Add  DataGrid & button to xaml file



    <Grid x:Name="LayoutRoot" Background="White">
        <sdk:DataGrid AutoGenerateColumns="True" Height="92" HorizontalAlignment="Left" Margin="10,10,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="378" />
        <Button Content="Get List Data" Height="34" HorizontalAlignment="Left" Margin="10,120,0,0" Name="GetListData" VerticalAlignment="Top" Width="211" Click="GetListData_Click" />
    
Step 4) Add Button event handler 

in the button event handler.
 //1. get current context
 //2. get web on which silverlight xap file runs
//3. get perticular list in that web
//4. load all items in the list
//silverlight only supports asynchronous mechanism, so load with ExecuteQueryAsync    
   
  private void GetListData_Click(object sender, RoutedEventArgs e)
        {
             ctx = ClientContext.Current;
             currentWeb=ctx.Web;
            ctx.Load(currentWeb);
            list=currentWeb.Lists.GetByTitle("Sales-Details");//get Sales-details custom list
            //query all items in the list.
            CamlQuery query = CamlQuery.CreateAllItemsQuery();
            allItems=list.GetItems(query);
            ctx.Load(allItems);


            ctx.ExecuteQueryAsync(successEventHandler, FailedEventHandler);




        }


        void FailedEventHandler(object sender, ClientRequestFailedEventArgs args)
        {
        }

       //On success this method gets executed.

        void successEventHandler(object sender, ClientRequestSucceededEventArgs args)
        {
           //Bind datagrid asynchronously with delegate
            Action a = new Action(UpdateGrid);
            this.Dispatcher.BeginInvoke(a);
        }

        void UpdateGrid()
        {
            foreach(ListItem item in allItems)
            {
                PurchaseOrder oRder = new PurchaseOrder { TITLE= item["Title"].ToString()};

                poList.Add(oRder);
                
            }

            dataGrid1.ItemsSource = poList;
        }

Step 5) Add a class  PurchaseOrder  with single property in that

namespace SilverlightApplication2
{
    public class PurchaseOrder
    {
        private string Title;

        public string TITLE
        {
            get { return Title; }
            set { Title = value; }
        }

    }
}

Step 6) If user has more columns/fields in the list then add corresponding properties in PurchaseOrder class
           and samething in UpdateUI method.

Step 7)  Build the Silverlight Project,
              .XAP file will be generated.

Step 8) Upload generated .xap file into document library .
             in this example: http://sp2010:22913/sites/sc2/doclib/SilverlightApplication2.xap
           SilverlightApplication2.xap uploaded to doclib --> document library.

Step 9)   Create a Web page,   insert Silverlight Web part
              note: Silverlight Web part located in   "Media & Content"-->Silverlight Web part.

Step 10)  The following Output will generate
                            Figure1) Empty data Grid
 After button click, actual data in the list will be displayed.



Complete Sample Code in  MainPage.xaml.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.SharePoint.Client;
using Microsoft.SharePoint.Client.Utilities;
namespace SilverlightApplication2
{
    public partial class MainPage : UserControl
    {
        ClientContext ctx = null;
        Web currentWeb = null;
        ListItemCollection allItems = null;
        List list = null;
        System.Collections.Generic.List<PurchaseOrder> poList =
            new List<PurchaseOrder>();
        public MainPage()
        {
            InitializeComponent();
        }


        private void GetListData_Click(object sender, RoutedEventArgs e)
        {
             ctx = ClientContext.Current;
             currentWeb=ctx.Web;
            ctx.Load(currentWeb);
            list=currentWeb.Lists.GetByTitle("Sales-Details");
            CamlQuery query = CamlQuery.CreateAllItemsQuery();
            allItems=list.GetItems(query);
            ctx.Load(allItems);


            ctx.ExecuteQueryAsync(successEventHandler, FailedEventHandler);




        }


        void FailedEventHandler(object sender, ClientRequestFailedEventArgs args)
        {
        }
        void successEventHandler(object sender, ClientRequestSucceededEventArgs args)
        {
            Action a = new Action(UpdateGrid);
            this.Dispatcher.BeginInvoke(a);
        }


        void UpdateGrid()
        {
            foreach(ListItem item in allItems)
            {
                PurchaseOrder oRder = new PurchaseOrder { TITLE= item["Title"].ToString()};


                poList.Add(oRder);
                
            }


            dataGrid1.ItemsSource = poList;
        }


    }
}

No comments:

Post a Comment