Tutorial: Crear un elemento web para SharePoint

Los elementos web permiten a los usuarios modificar directamente el contenido, el aspecto y el comportamiento de las páginas de sitios de SharePoint mediante un explorador. En este tutorial se muestra cómo crear un elemento web utilizando la plantilla elemento web de Visual Studio 2010.

El elemento web muestra los empleados en una cuadrícula de datos. El usuario especifica la ubicación del archivo que contiene los datos de los empleados. El usuario también puede filtrar la cuadrícula de datos para que en la lista solo aparezcan los empleados que son administradores.

En este tutorial se muestran las tareas siguientes:

Crear un elemento web utilizando la plantilla elemento web de Visual Studio.
Crear una propiedad que puede establecer el usuario del elemento web. Esta propiedad especifica la ubicación del archivo de datos de los empleados.
Presentar el contenido de un elemento web agregando controles a la colección de controles del elemento web.
Crear un nuevo elemento de menú, al que se hace referencia como a un verbo que aparece en el menú de verbos del elemento web presentado. Los verbos permiten al usuario modificar los datos que aparecen en el elemento web.
Probar el elemento web en SharePoint.

Nota

Es posible que su equipo muestre nombres o ubicaciones diferentes para algunos de los elementos de la interfaz de usuario de Visual Studio en las siguientes instrucciones. La edición de Visual Studio que tenga y la configuración que esté utilizando determinan estos elementos. Para obtener más información, vea Trabajar con valores de configuración.

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

Ediciones compatibles de Microsoft Windows y SharePoint. Para obtener más información, vea Requisitos para desarrollar soluciones de SharePoint.
Visual Studio 2010 Professional o una edición de Visual Studio Application Lifecycle Management (ALM).

Crear un proyecto vacío de SharePoint

Primero, cree un proyecto de SharePoint vacío. Más adelante le agregará un elemento web utilizando la plantilla elemento web.

Para crear un proyecto vacío de SharePoint

Inicie Visual Studio 2010 con la opción Ejecutar como administrador.
En el menú Archivo, elija Nuevo y, a continuación, haga clic en Proyecto.

Aparecerá el cuadro de diálogo Nuevo proyecto.
Abra el cuadro de diálogo Nuevo proyecto, expanda el nodo SharePoint bajo el lenguaje que desea usar y, a continuación, seleccione el nodo 2010.
En el recuadro Plantillas, seleccione Proyecto vacío de SharePoint y haga clic en Aceptar.

Aparece el Asistente para la personalización de SharePoint. Este asistente permite seleccionar el sitio que se va a usar para depurar el proyecto, así como el nivel de confianza de la solución.
Seleccione Implementar como solución de granja de servidores y haga clic en Finalizar para aceptar el sitio local predeterminado de SharePoint.

Agregar un elemento web al proyecto

Agregue un elemento web al proyecto. El elemento web agrega el archivo de código. Después, agregará código al archivo de código para presentar el contenido del elemento web.

Para agregar un elemento web al proyecto

En el menú Proyecto, haga clic en Agregar nuevo elemento.
En el cuadro de diálogo Agregar nuevo elemento, en el recuadro Plantillas instaladas, expanda el nodo SharePoint y, a continuación, haga clic en 2010.
En la lista de plantillas de SharePoint, seleccione Elemento web y, a continuación, haga clic en Agregar.

El elemento web aparece en el Explorador de soluciones.

Presentar contenido en el elemento web

Puede especificar los controles que desea que aparezcan en el elemento web agregándolos a la colección de controles de la clase Web Part.

Para presentar contenido en el elemento web

En el Explorador de soluciones, haga doble clic en WebPart1.vb (en Visual Basic) o WebPart1.cs (en C#).

Se abre el archivo de código del elemento web en el editor de código.
Agregue las siguientes instrucciones en la parte superior del archivo de código del elemento web.
```
Imports System.Data
```
```
using System.Data;
```
Agregue el código siguiente a la clase WebPart1. Este código declara los siguientes campos:
- Una cuadrícula de datos para mostrar los empleados en el elemento web.
- Texto que aparece en el control que se utiliza para filtrar la cuadrícula de datos.
- Una etiqueta que presenta un error si la cuadrícula de datos no puede mostrar los datos.
- Una cadena que contiene la ruta del archivo de datos de los empleados.
```
Private grid As DataGrid
Private Shared verbText As String = "Show Managers Only"
Private errorMessage As New Label()
Protected xmlFilePath As String
```
```
private DataGrid grid;
private static string verbText = "Show Managers Only";
private Label errorMessage = new Label();
protected string xmlFilePath;
```

Agregue el código siguiente a la clase WebPart1. Este código agrega una propiedad personalizada denominada DataFilePath al elemento web. Una propiedad personalizada es una propiedad que el usuario puede establecer en SharePoint. Esta propiedad obtiene y establece la ubicación de un archivo de datos XML que se utiliza para rellenar la cuadrícula de datos.

<Personalizable(PersonalizationScope.[Shared]), _
    WebBrowsable(True), WebDisplayName("Path to Employee Data File"), _
    WebDescription("Location of the XML file that contains employee data")> _
Public Property DataFilePath() As String
    Get
        Return xmlFilePath
    End Get
    Set(ByVal value As String)
        xmlFilePath = value
    End Set
End Property

[Personalizable(PersonalizationScope.Shared), WebBrowsable(true),
WebDisplayName("Path to Employee Data File"),
WebDescription("Location of the XML file that contains employee data")]
public string DataFilePath
{
    get
    {
        return xmlFilePath;
    }
    set
    {
        xmlFilePath = value;
    }
}

Reemplace el método CreateChildControls por el código siguiente. Este código realiza las tareas siguientes:

Agrega la cuadrícula de datos y la etiqueta que declaró en el paso anterior.
Enlaza la cuadrícula de datos a un archivo XML que contiene los datos de los empleados.

Protected Overloads Overrides Sub CreateChildControls()

    'Define the grid control that displays employee data in the Web Part.
    grid = New DataGrid()
    With grid
        .Width = Unit.Percentage(100)
        .GridLines = GridLines.Horizontal
        .HeaderStyle.CssClass = "ms-vh2"
        .CellPadding = 2
        .BorderWidth = Unit.Pixel(5)
        .HeaderStyle.Font.Bold = True
        .HeaderStyle.HorizontalAlign = HorizontalAlign.Center
    End With



    'Populate the grid control with data in the employee data file.
    Try
        Dim dataset As New DataSet()
        dataset.ReadXml(xmlFilePath, XmlReadMode.InferSchema)
        grid.DataSource = dataset
        grid.DataBind()
    Catch x As Exception
        errorMessage.Text += x.Message
    End Try

    'Add control to the controls collection of the Web Part.
    Controls.Add(grid)
    Controls.Add(errorMessage)
    MyBase.CreateChildControls()

End Sub

protected override void CreateChildControls()
{
    // Define the grid control that displays employee data in the Web Part.
    grid = new DataGrid();
    grid.Width = Unit.Percentage(100);
    grid.GridLines = GridLines.Horizontal;
    grid.HeaderStyle.CssClass = "ms-vh2";
    grid.CellPadding = 2;
    grid.BorderWidth = Unit.Pixel(5);
    grid.HeaderStyle.Font.Bold = true;
    grid.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;

    // Populate the grid control with data in the employee data file.
    try
    {
        DataSet dataset = new DataSet();
        dataset.ReadXml(xmlFilePath, XmlReadMode.InferSchema);
        grid.DataSource = dataset;
        grid.DataBind();
    }
    catch (Exception x)
    {
        errorMessage.Text += x.Message;
    }

    // Add control to the controls collection of the Web Part.
    Controls.Add(grid);
    Controls.Add(errorMessage);
    base.CreateChildControls();
}

Agregue el método siguiente a la clase WebPart1. Este código realiza las tareas siguientes:

Crea un verbo que aparece en el menú de verbos de elemento web del elemento web presentado.
Controla el evento que se genera cuando el usuario hace clic en el verbo del menú de verbos. Este código filtra la lista de empleados que aparece en la cuadrícula de datos.

Public Overrides ReadOnly Property Verbs() As WebPartVerbCollection
    Get
        Dim customVerb As New WebPartVerb("Manager_Filter_Verb", _
            New WebPartEventHandler(AddressOf CustomVerbEventHandler))

        customVerb.Text = verbText
        customVerb.Description = "Shows only employees that are managers"

        Dim newVerbs() As WebPartVerb = {customVerb}

        Return New WebPartVerbCollection(MyBase.Verbs, newVerbs)
    End Get
End Property

Protected Sub CustomVerbEventHandler(ByVal sender As Object, ByVal args As WebPartEventArgs)
    Dim titleColumn As Integer = 2

    Dim item As DataGridItem
    For Each item In grid.Items
        If item.Cells(titleColumn).Text <> "Manager" Then
            If item.Visible = True Then
                item.Visible = False
            Else
                item.Visible = True
            End If
        End If
    Next item
    If verbText = "Show Managers Only" Then
        verbText = "Show All Employees"
    Else
        verbText = "Show Managers Only"
    End If
End Sub

public override WebPartVerbCollection Verbs
{
    get
    {
        WebPartVerb customVerb = new WebPartVerb("Manager_Filter_Verb",
            new WebPartEventHandler(CustomVerbEventHandler));

        customVerb.Text = verbText;
        customVerb.Description = "Shows only employees that are managers";

        WebPartVerb[] newVerbs = new WebPartVerb[] { customVerb };

        return new WebPartVerbCollection(base.Verbs, newVerbs);
    }
}

protected void CustomVerbEventHandler(object sender, WebPartEventArgs args)
{
    int titleColumn = 2;

    foreach (DataGridItem item in grid.Items)
    {
        if (item.Cells[titleColumn].Text != "Manager")
        {
            if (item.Visible == true)
            {
                item.Visible = false;
            }
            else
            {
                item.Visible = true;
            }
        }

    }
    if (verbText == "Show Managers Only")
    {
        verbText = "Show All Employees";
    }
    else
    {
        verbText = "Show Managers Only";
    }
}

Prueba del elemento web

Cuando se ejecuta el proyecto, se abre el sitio de SharePoint. El elemento web se agrega automáticamente a la Galería de elementos web de SharePoint. Puede agregar el elemento web a cualquier página de elementos web.

Para probar el elemento web

Pegue el código siguiente en un archivo de Bloc de notas. Este archivo XML contiene los datos de ejemplo que aparecerán en el elemento web.

<?xml version="1.0" encoding="utf-8" ?>
    <employees xmlns="https://schemas.microsoft.com/vsto/samples">
       <employee>
           <name>David Hamilton</name>
           <hireDate>2001-05-11</hireDate>
           <title>Sales Associate</title>
       </employee>
       <employee>
           <name>Karina Leal</name>
           <hireDate>1999-04-01</hireDate>
           <title>Manager</title>
       </employee>
       <employee>
           <name>Nancy Davolio</name>
           <hireDate>1992-05-01</hireDate>
           <title>Sales Associate</title>
       </employee>
       <employee>
           <name>Steven Buchanan</name>
           <hireDate>1955-03-04</hireDate>
           <title>Manager</title>
       </employee>
       <employee>
           <name>Suyama Michael</name>
           <hireDate>1963-07-02</hireDate>
           <title>Sales Associate</title>
       </employee>
    </employees>

En Bloc de notas, haga clic en Archivo y, a continuación, en Guardar como.
En el cuadro de diálogo Guardar como, en la lista desplegable Guardar como tipo, seleccione Todos los archivos.
En el cuadro Nombre de archivo, escriba data.xml.
Seleccione una carpeta utilizando el botón Examinar carpetas y, a continuación, haga clic en Guardar.
En Visual Studio, presione F5.

Se abre el sitio de SharePoint.
Haga clic en Acciones del sitio y, a continuación, en Más opciones.
En la página Crear, seleccione Página de elementos web y, a continuación, haga clic en Crear.
En la página Nueva página de elementos web, dé a la página el nombre SampleWebPartPage.aspx y haga clic en Crear.

Aparece la página de elementos web .
Seleccione cualquier zona de la página de elementos web.
En la parte superior de la página, haga clic en Insertar y, a continuación, en Elemento web.
En el recuadro Categorías, haga clic en la carpeta Personalizado, haga clic en el elemento web WebPart1 y, a continuación, haga clic en Agregar.

El elemento web aparece en la página.

Probar la propiedad personalizada

Para rellenar la cuadrícula de datos que aparece en el elemento web, especifique la ruta de acceso del archivo XML que contiene los datos sobre cada empleado.

Para probar la propiedad personalizada

Haga clic en la flecha que aparece en la esquina del elemento web y, a continuación, haga clic en Editar elemento web.

Un recuadro con las propiedades del elemento web aparece en el lado derecho de la página.
En el recuadro, expanda el nodo Miscellaneous, escriba la ruta de acceso del archivo XML que creó anteriormente y haga clic en Aplicar y, a continuación, haga clic en Aceptar.

Compruebe que en el elemento web aparece una lista de empleados.

Probar el verbo de elemento web

Muestra y oculta a los empleados que no son administradores cuando se hace clic en un elemento que aparece en el menú de verbos del elemento web.

Para probar el verbo del elemento web

Haga clic en la flecha que aparece en la esquina del elemento web y, a continuación, haga clic en Show Managers Only.

Solo los empleados que son administradores aparecen en el elemento web.
Haga clic de nuevo en la flecha y, a continuación, haga clic en Show All Employees.

Todos los empleados aparecen en el elemento web.

Vea también

Tareas

Cómo: Crear un elemento web de SharePoint

Cómo: Crear un elemento web de SharePoint con un diseñador

Tutorial: Crear un elemento web para SharePoint mediante un diseñador

Otros recursos

Crear elementos web para SharePoint

Last updated on 2011-08-10