Sharepoint 2010: Teil 6 – Silverlight in Sharepoint 2010

Von Andreas Aschauer Autor Feed 28. May 2010 18:27

Nachdem wir in den vorangegangen Teilen der Artikelreihe viel pber administrative Funktionen und die grundlegenden Konzepte von Sharepoint Out-of-the-Box zu erfahren war, wenden wir uns jetzt einem “coolen” Entwicklerthema zu – Silverlight mit Sharepoint 2010. Das heisst: Eine schöne UI wie man sie von einer modernen RIA erwarten darf, aufbauend auf die Enterprise Plattform Sharepoint. Klingt gut - Also gleich mitten rein!

Unsere Aufgabe: Für ein Project Management Office soll in Sharepoint grafisch ausgewertet werden, welcher Mitarbeiter wie stark (in Stunden) in ein Projekt involviert war/ist.

Zunächst legen wir ein neues Silverlight Projekt an und referenzieren das Sharepoint Client Object Model, welches es uns erlaubt, typisiert auf Sharepoint, vom Client aus, zuzugreifen.

SPAddSLReference

Vor Sharepoint 2010 konnte man nur via SOAP WebServices remote auf Sharepoint zugreifen. Das ist Geschichte: In der aktuellen Version steht das Client OM zur Verfügung und sogar ein REST basierter Zugriff. Nähere Informationen dazu, in den Links.

Das Client OM für Silverlight ist definiert in den Asssemblies Microsoft.Sharepoint.Client.Silverlight und Microsoft.Sharepoint.Client.Silverlight.Runtime welche sich im 14 Hive unter \TEMPLATE\LAYOUTS\ClientBin befinden. Da Sharepoint 2010 Silverlight 3 verwendet, befinden sich die Chart Controls im Silverlight 3 Toolkit, welches extra geladen werden muss und unter “Downloads” unten verlinkt ist. Nach der Instalaltion des Toolkits steht unter Add Reference > .NET > Die Komponente System.Windows.Controls.DataVisualization.Toolkit zur Verfügung, die ebenfalls referenziert werden muss.

SPAddSLReference_SLToolkit

Als nächstes öffnen wir den Code unserer App.xaml und fügen in die Application_Startup Methode den Initialisierungsaufruf für das Client OM hinzu.

   1: using Microsoft.SharePoint.Client;
   2: using System.Threading;
   3: ..
   4: private void Application_Startup(object sender, StartupEventArgs e)
   5: {
   6:     ..
   7:     ApplicationContext.Init(e.InitParams, SynchronizationContext.Current)
   8:     ..
   9: }

Danach erstellen wir in MainPage.xaml unser Chart. Zunächst binden wir in der XAML Ansicht den passenden XML Namepace ein und dann definieren wir unser Chart. Hier erzeugen wir ein Balkendiagramm das die Properties Contributions als y-Achsenwert und Name als x – Achsenwert nimmt. Die Properties werden wir in einem eigenen ViewModel noch deklarieren. Ist alles richtig erscheint das Chart sofort im Designer.

   1: xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;
   2: assembly=System.Windows.Controls.DataVisualization.Toolkit" 

   1: <chartingToolkit:Chart x:Name="empContribChart" Width="450" 
   2:         Height="300" Title="Employee Contributions / Project">
   3:  
   4:     <chartingToolkit:Chart.Series>
   5:  
   6:     <chartingToolkit:ColumnSeries ItemsSource="{Binding}"
   7:         DependentValuePath="Contributions"
   8:         IndependentValuePath="Name"
   9:         AnimationSequence="FirstToLast"
  10:         Title="Contributions / Employee"
  11:         IsSelectionEnabled="True" />
  12:  
  13:     </chartingToolkit:Chart.Series>
  14: </chartingToolkit:Chart>

chartindesigner

Als nächstes definieren wir uns ViewModel, welches wir dann an das Chart binden. Es wird eine neue Klasse EmployeeContribution eingefügt, welche die zwei Chart Properties enthält.

   1: public class EmployeeContributions 
   2: { 
   3:     public string Employee { get; set; } 
   4:     public decimal Contribution { get; set; } 
   5: } 
   6:  

Dann fügen wir im Code unserer MainPage die Methoden hinzu welche asynchron via Client OM die Daten von Sharepoint Server abrufen. Die Methode LoadData() wird vom Konstruktor aus aufgerufen. Die Vorgehensweise ist etwas gewöhnungsbedürftig. zunächst wird ein ClientContext angelegt. Jedes Objekt muss danach explizit mit Load() geladen werden. So laden wir das Web und die eigentliche Sharepointliste “EmployeeContributions”.

Sobald der Aufruf ExecuteQueryAsync() erfolgt, werden die Anfragen asynchron an den Server gesandt und ausgeführt. In unserem EventHandler OnRequestSuceeded binden wir anschliessen die Daten. Achtung! Das der asynchrone Aufruf nicht im UI Thread stattfindet muss hier Dispatcher.BeginInvoke(..) verwendet werden!

   1: private void LoadData()
   2: {
   3:     ClientContext context = new ClientContext(ApplicationContext.Current.Url); 
   4:     context.Load(context.Web); 
   5:     List employees = context.Web.Lists.GetByTitle("EmployeeContribution"); 
   6:     context.Load(employees); 
   7:  
   8:     _employees = employees.GetItems(new CamlQuery{ViewXml=""}); 
   9:     context.Load(_employees); 
  10:     context.ExecuteQueryAsync(new 
  11:     ClientRequestSucceededEventHandler(OnRequestSucceeded), null); 
  12: }
  13:  
  14: private void OnRequestSucceeded(Object sender, ClientRequestSucceededEventArgs e) 
  15: { 
  16:     Dispatcher.BeginInvoke(BindData); 
  17: }

Zum Schluss implementieren wir noch BindData(), diese Methode durchläut die _employess Variable (die Sharepoint Liste) und erzeugt eine generische Liste von EmployeeContribution Instanzen. Zum Schluss wird noch nach Project gruppiert und die Werte für Contribution pro Mitarbeiter aufsummiert.

   1: private void BindData()
   2:    {
   3:        var viewModelList = new List<EmployeeContribution>();
   4:  
   5:        foreach (ListItem item in _employees)
   6:        {
   7:            viewModelList.Add(new EmployeeContribution
   8:            {
   9:                Employee = item["Title"].ToString(),
  10:                Contribution = Convert.ToDecimal(item["Contribution"]),
  11:                Project = item["Project"].ToString()
  12:            });
  13:        }
  14:  
  15:        var totalContrib = viewModelList.GroupBy(emp => emp.Project).Select(c => new EmployeeContribution
  16:        {
  17:            Employee = c.Key,
  18:            Contribution = c.Sum(emp => emp.Contribution)
  19:        }).ToList();
  20:  
  21:        empContribChart.DataContext = totalContrib;
  22:    }

Anschliessend komplieren wird das Project und kopieren die *.XAP Datei in den 14 Hive nach \TEMPLATE\LAYOUTS\ClientBin. Danach erstellen wir auf einer Seite unserer Wahl ein neues Silverlight WebPart und geben in der Konfiguration des WebParts den Pfad zur XAP Datei an ( /_layouts/ClientBin/[Nme der XAP] ) ..fertig!

So einfach wird mit Silverlight und dem Client Object Model aus einfachen Listendaten ein auf Wunsch animierter, interaktiver Graph.

Ein Tipp noch: Falls SecurityExceptions auftreten, liegt das an einer fehlenden clientaccesspolicy.xml –> Silverlight 3 – Sharepoint Cross Domain Calls

Links

Sharepoint Foundation REST Interface

Sharepoint Client Object Model

Silverlight 3 – Sharepoint Cross Domain Calls

Downloads

Silverlight 3 Toolkit

Pingbacks and trackbacks (4)+

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

www.microsoft.com/austria | © 2009 Microsoft Corporation. Alle Rechte vorbehalten.
BlogEngine.NET 2.5.0.6 powered by atwork