Créer des graphiques Silverlight avec des données SharePoint 2010 à l’aide de LINQ

Article
09/24/2014

Bannière Démarrage rapide SharePoint

Prise en main du développement Web dans SharePoint 2010 Créer des applications Microsoft Silverlight qui récupèrent des données de liste Microsoft SharePoint 2010 à l’aide de LINQ, puis qui affichent les données dans des graphiques.

Dernière modification : jeudi 27 janvier 2011

S’applique à : SharePoint Foundation 2010 | SharePoint Server 2010 | Visual Studio 2010

Dans cet article
Créer un projet d’application Silverlight
Ajouter du code pour accéder aux données de liste et les afficher dans un contrôle graphique Silverlight
Déployer et tester la solution
Étapes suivantes

Dans cet exercice, vous créez une application Microsoft Silverlight 3 qui affiche des données de liste SharePoint dans un graphique à l’aide des contrôles de création de graphique Silverlight. Pour accomplir cette tâche, vous devez effectuer les opérations suivantes :

Créer un projet d’application Silverlight
Ajouter du code pour accéder aux données de liste et les afficher dans un contrôle graphique Silverlight
Déployer et tester la solution

Cet exercice suppose que vous avez effectué la tâche Créer des applications Silverlight pour accéder à des données SharePoint 2010. Cette rubrique explique comment créer une application Microsoft Silverlight 3 qui récupère des données de liste SharePoint, puis qui les affiche dans un contrôle DataGrid sur le site Web.

Créer un projet d’application Silverlight

Dans cette tâche, vous créez un projet d’application Silverlight dans Microsoft Visual Studio 2010.

Pour créer le projet Silverlight

DémarrezVisual Studio 2010, cliquez sur Fichier, pointez sur Nouveau, puis cliquez sur Projet.
Dans la section Modèles installés, accédez au nœud Autres types de projets, cliquez sur Solutions Visual Studio, puis cliquez sur Nouvelle solution.
En haut de l’écran, sélectionnez .NET Framework 3.5, tapez Begin dans la zone Nom, puis cliquez sur OK.
Dans le menu Fichier, pointez sur Nouveau, puis cliquez sur Projet.
Dans la section Modèles installés, développez le nœud Visual C#, cliquez sur Silverlight, puis cliquez sur Application Silverlight.
En haut de l’écran, sélectionnez .NET Framework 3.5, dans la zone Nom, tapez SilverlightEmployeeContributionsGraph, puis cliquez sur OK.
Dans la boîte de dialogue Nouvelle application Silverlight, cliquez sur OK.
Ensuite, ajoutez une référence au modèle objet SharePoint client Silverlight. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nœud SilverlightEmployeeContributionsGraph, puis cliquez sur Ajouter des références.
Accédez au dossier suivant : C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin.
Sélectionnez Microsoft.SharePoint.ClientSilverlight.dll et Microsoft.SharePoint.Client.Silverlight.Runtime.dll, puis cliquez sur OK.
Ensuite, ajoutez une référence à l’assembly de contrôles de création de graphique Silverlight. Il est disponible dans la boîte de dialogue Ajouter une référence, sous l’onglet .NET, et porte le nom System.Windows.Controls.DataVisualization.Toolkit.

Notes

Si cet assembly n’apparaît pas dans la boîte de dialogue Ajouter une référence, vous pouvez l’obtenir en installant la Boîte à outils Microsoft Silverlight (éventuellement en anglais).

Ajouter du code pour accéder aux données de liste et les afficher dans un contrôle graphique Silverlight

Dans cette tâche, vous ajoutez du code qui vous permet d’accéder aux données de liste SharePoint à l’aide de LINQ et vous recourez aux contrôles de création de graphique Silverlight pour afficher les données dans un graphique.

Pour ajouter du code au projet

Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le fichier App.xaml, puis cliquez sur Afficher le code. Ajoutez les instructions using suivantes au début du fichier.
```
using Microsoft.SharePoint.Client;
using System.Threading;
```

Ajoutez le code suivant au début de la méthode Application_Startup.

ApplicationContext.Init(e.InitParams, SynchronizationContext.Current);

Dans la vue XAML du fichier MainPage.xaml, ajoutez l’espace de noms XML suivant dans l’élément UserControl.

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

Ajoutez le contrôle de création de graphique Silverlight suivant dans l’élément grid.

<chartingToolkit:Chart x:Name="chart" Width="350" Height="250" Title="Team Contributions">
    <chartingToolkit:Chart.Series>
        <chartingToolkit:ColumnSeries ItemsSource="{Binding}" 
            DependentValuePath="Contributions" 
            IndependentValuePath="Name"
            AnimationSequence="FirstToLast"   
            Title="Contributions" IsSelectionEnabled="True" />
    </chartingToolkit:Chart.Series>
</chartingToolkit:Chart>

Ouvrez MainPage.xaml.cs, puis ajoutez l’instruction using suivante au début du fichier.
```
using Microsoft.SharePoint.Client;
```

Ajoutez les classes suivantes avant la classe MainPage.

public class EmployeeContributions
{
    public string Name { get; set; }
    public string TeamName { get; set; }
    public decimal Contributions { get; set; }
}

public class TeamContributions
{
    public string Name { get; set; }
    public decimal Contributions { get; set; }
}

Ajoutez la variable suivante à la classe MainPage.
```
private ListItemCollection _employees;
```

Ajoutez le code suivant à la méthode MainPage après l’appel à initializeComponent.

ClientContext context = new ClientContext(ApplicationContext.Current.Url);
context.Load(context.Web);
List employees = context.Web.Lists.GetByTitle("Employees");
context.Load(employees);

CamlQuery query = new CamlQuery();
string camlQueryXml = null;

query.ViewXml = camlQueryXml;
_employees = employees.GetItems(query);
context.Load(_employees);
context.ExecuteQueryAsync(new ClientRequestSucceededEventHandler(OnRequestSucceeded), null);

Ajoutez le code suivant après la méthode MainPage :

private void OnRequestSucceeded(Object sender, ClientRequestSucceededEventArgs args)
{
    // This is not called on the UI thread.
    Dispatcher.BeginInvoke(BindData);
}

private void BindData()
{
    List<EmployeeContributions> employees = new List<EmployeeContributions>();

        // Get the list item values into a strongly-typed class.
        foreach (ListItem li in _employees)
        {
            employees.Add(new EmployeeContributions
            {
                Name = li["Title"].ToString(),
                TeamName = li["Team"].ToString(),
                Contributions = Convert.ToDecimal(li["Contribution_x0020__x0028_in_x00"])
            });
        }

        // Use LINQ to organize employees by team name and then total team contributions.
         List<TeamContributions> teams = employees
             .GroupBy(e => e.TeamName)
             .Select(t => new TeamContributions
             {
                 Name = t.Key,
                 Contributions = t.Sum(e => e.Contributions)
             }).ToList();
         // This must be on a UI thread.
         chart.DataContext = teams; 
}

Dans le code que vous avez ajouté, le modèle objet client SharePoint Silverlight récupère les données d’une liste SharePoint. Lorsque les éléments relatifs à la contribution des employés sont ajoutés à la liste, LINQ permet d’organiser les employés en équipes et d’additionner leurs contributions. Les contributions d’équipe sont ensuite définies en tant que source de données du graphique.

Déployer et tester la solution

Dans cette tâche, vous déployez, puis testez la solution en ajoutant le composant WebPart Silverlight à la page sur le site Web.

Pour tester la solution

Pour que vous puissiez déployer la solution sur SharePoint, le fichier.xap obtenu à partir du projet Silverlight doit se trouver dans le dossier C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin .

Cliquez avec le bouton droit sur le nœud SilverlightEmployeeContributionsGraph, cliquez sur Propriétés, puis cliquez sur Générer.
Définissez Chemin de sortie sur C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin.
Générez la solution en cliquant avec le bouton droit sur le nœud SilverlightEmployeeContributionsGraph, puis en cliquant sur Générer. Le fichier .xap est copié dans le répertoire requis et vous êtes en mesure d’ajouter le composant WebPart Silverlight au site Web SharePoint.
Ouvrez Internet Explorer et accédez au site Web précédemment spécifié.
Ensuite, vous mettez à jour le composant WebPart Silverlight ajouté au cours de la procédure Créer des applications Silverlight pour accéder à des données SharePoint 2010 afin qu’il pointe vers le contrôle de création de graphique Silverlight que vous avez créé dans cette rubrique. Cliquez sur la liste déroulante dans le coin supérieur droit du composant WebPart Silverlight, puis cliquez sur Modifier le composant WebPart.
Cliquez sur Configurer tout à fait à droite de l’écran, puis tapez /_layouts/ClientBin/SilverlightEmployeeContributionsGraph.xap dans la boîte de dialogue Composant WebPart Silverlight.
Cliquez sur OK, puis cliquez sur OK en bas de la barre latérale du composant WebPart Silverlight.

Le résultat doit ressembler à figure 1.

Figure 1. Composant WebPart graphique Silverlight

Partager via