Compartir vía

Tutorial: Creación de un elemento web para SharePoint

  • Artículo

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 mediante la plantilla de 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:

  • Creación de un elemento web mediante la plantilla de 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.

  • Creación de 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 tu 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 se tenga y la configuración que se utilice determinan estos elementos. Para más información, vea Personalizar el IDE de Visual Studio.

Prerrequisitos

  • Ediciones compatibles de Microsoft Windows y SharePoint.

  • Visual Studio 2017 o Azure DevOps Services.

Creación de un proyecto de SharePoint vacío

En primer lugar, cree un proyecto vacío de SharePoint. Más adelante le agregará un elemento web mediante la plantilla de Elemento web.

  1. Inicie Visual Studio mediante la opción Ejecutar como administrador.

  2. En la barra de menús, seleccione Archivo>Nuevo>Proyecto.

  3. En el cuadro de diálogo Nuevo proyecto, expanda el nodo SharePoint bajo el lenguaje que desea usar y después seleccione el nodo 2010.

  4. En el panel Plantillas, seleccione Proyecto de SharePoint 2010 y después seleccione el botón Aceptar.

    Aparecerá 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.

  5. Seleccione el botón de opción Implementar como solución de granja de servidores y después seleccione el botón Finalizar para aceptar el sitio local predeterminado de SharePoint.

Adición de un elemento web al proyecto

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

  1. En la barra de menús, elija Proyecto>Agregar nuevo elemento.

  2. En el cuadro de diálogo Agregar nuevo elemento, en el panel Plantillas instaladas, expanda el nodo SharePoint y, después, seleccione el nodo 2010.

  3. En la lista de plantillas de SharePoint, seleccione la plantilla Elemento web y, luego, seleccione el botón Agregar.

    El Elemento web aparece en el Explorador de soluciones.

Representación de 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.

  1. En el 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.

  2. Agregue las directivas siguientes a la parte superior del archivo de código del elemento web.

    using System.Data;

  3. Agregue el siguiente código 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 DataGrid grid;
private static string verbText = "Show Managers Only";
private Label errorMessage = new Label();
protected string xmlFilePath;

  4. Agregue el siguiente código 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 string DataFilePath
{
    get
    {
        return xmlFilePath;
    }
    set
    {
        xmlFilePath = value;
    }
}

  5. 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 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();
}

  6. Agregue el siguiente método 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 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.

  1. 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="http://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>

  2. En el Bloc de notas, en la barra de menús, seleccione Archivo>Guardar como.

  3. En el cuadro de diálogo Guardar como, en la lista desplegable Save as type (Guardar como tipo), seleccione Todos los archivos.

  4. En el cuadro Nombre de archivo, escriba data.xml.

  5. Seleccione una carpeta con el botón Examinar carpetas y, después, seleccione el botón Guardar.

  6. En Visual Studio, seleccione la tecla F5.

    Se abre el sitio de SharePoint.

  7. En el menú Acciones del sitio, seleccione Más opciones.

  8. En la página Crear, seleccione el tipo Página de elementos web y después seleccione el botón Crear.

  9. En la página Nueva página de elemento web, dé a la página el nombre SampleWebPartPage.aspx y seleccione el botón Crear.

    Aparece la página de elementos web .

  10. Seleccione cualquier zona de la página de elementos web.

  11. En la parte superior de la página, seleccione la pestaña Insertar y, después, seleccione el botón Elemento web.

  12. En el panel Categorías, seleccione la carpeta Personalizado, seleccione el elemento web WebPart1 y, luego, el botón Agregar.

    El elemento web aparece en la página.

Prueba de 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.

  1. Seleccione la flecha que aparece a la derecha del elemento web y después seleccione Editar elemento web en el menú que aparece.

    Un panel con las propiedades del elemento web aparece en el lado derecho de la página.

  2. En el panel, expanda el nodo Varios, escriba la ruta de acceso del archivo XML que creó anteriormente, elija el botón Aplicar y, después, el botón Aceptar.

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

Prueba del verbo del elemento web

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

  1. Seleccione la flecha que aparece a la derecha del elemento web y después seleccione Show Managers Only (Mostrar solo los administradores) en el menú que aparece.

    Solo los empleados que son administradores aparecen en el elemento web.

  2. Seleccione la flecha de nuevo y después seleccione Show All Employees (Mostrar todos los empleados) en el menú que aparece.

    Todos los empleados aparecen en el elemento web.

Consulte también

Creación de elementos web para SharePointCómo: Crear un elemento web de SharePointCómo: Crear un elemento web de SharePoint mediante un diseñadorTutorial: Creación de un elemento web para SharePoint mediante un diseñador