Crear gráficos de Silverlight con datos de SharePoint 2010 mediante LINQ

Artículo
09/24/2014

Pancarta de inicio rápido de SharePoint

Introducción al desarrollo web en aplicaciones de SharePoint 2010 Cree aplicaciones Microsoft Silverlight que recuperan datos de listas de Microsoft SharePoint 2010 mediante LINQ y, a continuación, muestre los datos en gráficos.

Última modificación: jueves, 27 de enero de 2011

Hace referencia a: SharePoint Foundation 2010 | SharePoint Server 2010 | Visual Studio 2010

En este artículo
Crear un proyecto de aplicación de Silverlight
Agregar código para acceder a los datos de la lista y mostrarlos en un control de gráfico de Silverlight
Implementar y probar la solución
Pasos siguientes

Se aplica a:   Microsoft SharePoint Foundation 2010 | Microsoft SharePoint Server 2010 | Microsoft Visual Studio 2010 | Microsoft Silverlight 3
Publicado:   junio de 2010
Proporcionado por:    Frank Rice, Microsoft Corporation

En este ejercicio, creará una aplicación Microsoft Silverlight 3 que muestra datos de la lista de SharePoint representados en un gráfico mediante los controles de gráfico de Silverlight. Para completar esta tarea, debe hacer lo siguiente:

Crear un proyecto de aplicación de Silverlight
Agregar código para acceder a los datos de la lista y mostrarlos en un control de gráfico de Silverlight
Implementar y probar la solución

En este ejercicio, se asume que ha finalizado Crear aplicaciones Silverlight para acceder a los datos de SharePoint 2010. Ese tema describe cómo crear una aplicación Microsoft Silverlight 3 que recupera datos de la lista de SharePoint y, a continuación, los muestra en un control DataGrid en el sitio web.

Crear un proyecto de aplicación de Silverlight

En esta tarea, se crea un proyecto de aplicación de Silverlight en Microsoft Visual Studio 2010.

Para crear el proyecto de Silverlight

Inicie Visual Studio 2010, haga clic en Archivo, elija Nuevo y, a continuación, haga clic en Proyecto.
En la sección Plantillas instaladas, navegue al nodo Otros tipos de proyectos, haga clic en Soluciones de Visual Studio y, a continuación, haga clic en Solución en blanco.
En la parte superior de la pantalla, seleccione .NET Framework 3.5, escriba Begin en el cuadro Nombre y, a continuación, haga clic en Aceptar.
En el menú Archivo, elija Nuevo y, a continuación, haga clic en Proyecto.
En la sección Plantillas instaladas, expanda el nodo Visual C#, haga clic en Silverlight y, a continuación, haga clic en Aplicación de Silverlight.
En la parte superior de la pantalla, seleccione .NET Framework 3.5; en el cuadro Nombre, escriba SilverlightEmployeeContributionsGraph y, a continuación, haga clic en Aceptar.
En el cuadro de diálogo Nueva aplicación de Silverlight, haga clic en Aceptar.
A continuación, agregue una referencia al modelo de objetos cliente de Silverlight de SharePoint. En el Explorador de soluciones, haga clic con el botón secundario en el nodo SilverlightEmployeeContributionsGraph y, a continuación, haga clic en Agregar referencias.
Navegue a la siguiente carpeta: C:\Archivos de programa\Archivos comunes\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin.
Seleccione Microsoft.SharePoint.ClientSilverlight.dll y Microsoft.SharePoint.Client.Silverlight.Runtime.dll y, a continuación, haga clic en Aceptar.
A continuación, agregue una referencia al conjunto de controles para gráficos de Silverlight. Está disponible en el cuadro de diálogo Agregar referencia, en la ficha .NET, y se denomina System.Windows.Controls.DataVisualization.Toolkit.

Nota

Si no ve este conjunto en el cuadro de diálogo Agregar referencia, puede obtenerlo al instalar el Kit de herramientas de Microsoft Silverlight.

Agregar código para acceder a los datos de la lista y mostrarlos en un control de gráfico de Silverlight

En esta tarea, se agrega código que permita acceder a los datos de la lista de SharePoint mediante LINQ y a los controles de creación de gráficos de Silverlight para mostrar los datos en un gráfico.

Para agregar código al proyecto

En el Explorador de soluciones, haga clic con el botón secundario en el archivo App.xaml y, a continuación, haga clic en Ver código. Agregue las siguientes instrucciones using en la parte superior del archivo.
```
using Microsoft.SharePoint.Client;
using System.Threading;
```
Agregue el siguiente código al principio del método Application_Startup.
```
ApplicationContext.Init(e.InitParams, SynchronizationContext.Current);
```

En la vista XAML del archivo MainPage.xaml, agregue el siguiente espacio de nombres XML en el elemento UserControl.

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

Agregue el siguiente control de creación de gráficos de Silverlight dentro del elemento 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>

Abra MainPage.xaml.cs y, a continuación, agregue la siguiente instrucción using en la parte superior del archivo.
```
using Microsoft.SharePoint.Client;
```

Agregue las siguientes clases antes de la clase 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; }
}

Agregue la siguiente variable a la clase MainPage.
```
private ListItemCollection _employees;
```

Agregue el siguiente código en el método MainPage después de llamar a 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);

Agregue el siguiente código después del método 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; 
}

En el código que se agregó, el modelo de objetos cliente de Silverlight de SharePoint recupera datos de una lista de SharePoint. Cuando los elementos de contribución de empleado se agregan a la lista, LINQ se usa para organizar a los empleados en equipos y sumar sus contribuciones. Las contribuciones del equipo se establecen, a continuación, como fuente de datos del gráfico.

Implementar y probar la solución

En esta tarea, se implementa y se prueba la solución agregando el elemento web de Silverlight a la página en el sitio web.

Para probar la solución

Para implementar la solución en SharePoint, el archivo .xap resultante creado por el proyecto de Silverlight debe estar en la carpeta C:\Archivos de programa\Archivos comunes\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin .

Haga clic con el botón secundario en el nodo SilverlightEmployeeContributionsGraph, haga clic en Propiedades y, a continuación, haga clic en Generar.
Cambie la Ruta de acceso de resultados a C:\Archivos de programa\Archivos comunes\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin.
Para generar la solución, haga clic con el botón secundario en el nodo SilverlightEmployeeContributionsGraph y, a continuación, haga clic en Generar. El archivo .xap se copia en el directorio requerido y ya se puede agregar el elemento web de Silverlight al sitio web de SharePoint.
Abra Internet Explorer y vaya al sitio web especificado anteriormente.
A continuación, actualice el elemento web de Silverlight en Crear aplicaciones Silverlight para acceder a los datos de SharePoint 2010 para elegir el control de creación de gráficos de Silverlight que creó en este tema. Haga clic en la lista desplegable en la esquina superior derecha del elemento web de Silverlight y, a continuación, haga clic en Editar elemento web.
Haga clic en Configurar en el extremo derecho de la pantalla y escriba /_layouts/ClientBin/SilverlightEmployeeContributionsGraph.xap en el cuadro de diálogo del elemento web de Silverlight.
Haga clic en Aceptar y, a continuación, haga clic en Aceptar en la parte inferior de la barra lateral del elemento web de Silverlight.

El resultado debe ser similar a la figura 1.

Figura 1. Elemento web de gráfico de Silverlight

Compartir a través de