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é usando determinan estos elementos.Para obtener más información, vea Valores de configuración de Visual Studio.

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 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 con la opción Ejecutar como administrador.
En los hombres impida, elija Archivo, Nuevo, Proyecto.
En el cuadro de diálogo de Nuevo proyecto , expanda el nodo de SharePoint bajo el lenguaje que desea usar y, a continuación el nodo de 2010 .
En el panel de Plantillas , elija Proyecto de SharePoint 2010, y elija el botón de 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.
Elija el botón de opción de Implementar como solución de granja de servidores , y elija el botón de 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 la barra de menú, elija Proyecto, Agregar nuevo elemento.
En el cuadro de diálogo de Agregar nuevo elemento , en el panel de Plantillas instaladas , expanda el nodo de SharePoint y, a continuación el nodo de 2010 .
En la lista de plantillas de SharePoint, elija la plantilla de Elemento Web , y elija el botón de 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 Explorador de soluciones, abra 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 elige 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 el Bloc de notas, en la barra de menú, elija Archivo, Guardar como.
En el cuadro de diálogo de Guardar como , en la lista de Guardar como tipo , elija Todos los archivos.
En el cuadro de Nombre de archivo , escriba data.xml.
Elija una carpeta utilizando el botón de Examinar carpetas , y elija el botón de Guardar .
En Visual Studio, elija la clave de F5 .

Se abre el sitio de SharePoint.
En el menú de Busque las acciones , elija Más opciones.
En la página de Crear , elija el tipo de Página de elementos web , elija el botón de Crear .
En la página de nueva Página de elementos web , llame a la página SampleWebPartPage.aspx, y elija el botón de 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, elija la pestaña de Insertar , y elija el botón de Elemento Web .
En el panel de Categorías , elija la carpeta de Personalizado , elija el elemento web de WebPart1 , y elija el botón de 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

Elija la flecha que aparece a la derecha del elemento web, y elija Edite el elemento web del menú que aparece.

Un panel con las propiedades del elemento web aparece en el lado derecho de la página.
En el panel, expanda el nodo de Varios , escriba la ruta de acceso del archivo XML que creó anteriormente, elija el botón de Aplicar , y después elija el botón de 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

Elija la flecha que aparece a la derecha del elemento web, y elija Muestra solo a los administradores del menú que aparece.

Solo los empleados que son administradores aparecen en el elemento web.
Elija la flecha de nuevo, y elija Muestra todos los empleados del menú que aparece.

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 2013-02-19