Tutorial: Creación de un elemento web para SharePoint mediante un diseñador

Artículo
06/19/2023

Si crea elementos web para un sitio de SharePoint, los usuarios pueden modificar directamente el contenido, la apariencia y el comportamiento de las páginas de ese sitio mediante un explorador. En este tutorial se muestra cómo crear un elemento web visualmente mediante la plantilla de proyecto de elemento web visual de SharePoint en Visual Studio.

El elemento web que va a crear muestra una vista de calendario mensual y una casilla para cada lista de calendarios del sitio. Los usuarios pueden especificar qué listas de calendario incluir en la vista de calendario mensual activando las casillas.

En este tutorial se muestran las tareas siguientes:

Crear un elemento web mediante la plantilla de proyecto de elemento web visual.
Diseñar el control de usuario mediante el diseñador Visual Web Developer de Visual Studio.
Agregar código para controlar los eventos de los controles en el elemento web.
Probar el elemento web en SharePoint.

Nota

Es posible que el 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. Vea Personalizar el IDE de Visual Studio.

Requisitos previos

Necesitará los componentes siguientes para completar este tutorial:

Ediciones compatibles de Windows y SharePoint.

Creación de un proyecto de elemento web

En primer lugar, cree un proyecto de elemento web mediante la plantilla de proyecto de elemento web visual .

Inicie Visual Studio mediante la opción Ejecutar como administrador.
En la barra de menús, elija Archivo>Nuevo>Proyecto.
En el cuadro de diálogo Crear un nuevo proyecto, seleccione el proyecto vacío de SharePoint* para la versión concreta de SharePoint que ha instalado. Por ejemplo, si tiene instalado SharePoint 2019, seleccione la plantilla Proyecto vacío de SharePoint 2019.

Nota

También puede buscar plantillas escribiendo SharePoint en el cuadro de texto Buscar en la parte superior del cuadro de diálogo Crear un nuevo proyecto. También puede filtrar la lista de plantillas para mostrar solo las plantillas de Office y SharePoint seleccionando "Office" en el cuadro desplegable Tipo de proyecto. Para obtener más información, consulte Creación de un proyecto en Visual Studio.
En el cuadro Nombre, escriba TestProject1 y, a continuación, elija el botón Crear.
En la sección ¿Cuál es el nivel de confianza de esta solución de SharePoint?, active el botón de opción Implementar como solución de granja de servidores.
Elija el botón Finalizar para aceptar la configuración predeterminada del sitio de SharePoint.

Diseño del elemento web

Diseñe el elemento web agregando controles desde el Cuadro de herramientas a la superficie del diseñador de Visual Web Developer.

En el diseñador de Visual Web Developer, elija la pestaña Diseño para cambiar a la vista Diseño.
En la barra de menús, elija Ver>Cuadro de herramientas.
En el nodo Estándar del Cuadro de herramientas, elija el control CheckBoxList y realice uno de los pasos siguientes:
- Abra el menú contextual del control CheckBoxList, elija Copiar, abra el menú contextual de la primera línea del diseñador y, a continuación, elija Pegar.
- Arrastre el control CheckBoxList desde el cuadro de herramientas y conecte el control a la primera línea del diseñador.
Repita el paso anterior, pero mueva un botón a la siguiente línea del diseñador.
En el diseñador, elija el botón Button1.
En la barra de menús, elija Ver>Ventana Propiedades.

Se abre la ventana Propiedades.
En la propiedad Text del botón, escriba Actualizar.

Control de los eventos de los controles en el elemento web

Agregue código que permita al usuario agregar calendarios a la vista del calendario maestro.

Siga una de estas series de procedimientos:
- En el diseñador, haga doble clic en el botón Actualizar.
- En la ventana Propiedades del botón Actualizar, elija el botón Eventos . En la propiedad Click, escriba Button1_Click y, a continuación, elija la tecla Entrar.
  
  El archivo de código de la cinta de opciones se abre en el editor de código y aparece el controlador de eventos Button1_Click. Más adelante, agregará código a este controlador de eventos.

Agregue las siguientes instrucciones en la parte superior del archivo de código del control de usuario.

using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using System.Web.UI.WebControls;

Imports Microsoft.SharePoint
Imports Microsoft.SharePoint.WebControls
Imports System.Web.UI.WebControls

Agregue la línea de código siguiente a la clase VisualWebPart1. Este código declara un control de vista de calendario mensual.
- C#
- VB
```
private MonthlyCalendarView MonthlyCalendarView1;
```
```
Private MonthlyCalendarView1 As MonthlyCalendarView
```

Reemplace el método Page_Load de la clase VisualWebPart1 por el código siguiente. Este código realiza las tareas siguientes:

Agrega una vista de calendario mensual al control de usuario.
Agrega una casilla para cada lista de calendarios del sitio.

Especifica una plantilla para cada tipo de elemento que aparece en la vista de calendario.

protected void Page_Load(object sender, EventArgs e)
{
    MonthlyCalendarView1 = new MonthlyCalendarView();
    this.Controls.Add(MonthlyCalendarView1);
    SPCalendarItemCollection items = new SPCalendarItemCollection();
    SPWeb thisWeb = SPControl.GetContextWeb(Context);

    if (CheckBoxList1.Items.Count == 0)
    {
        foreach (SPList listItem in thisWeb.Lists)
        {
            if (listItem.BaseTemplate == SPListTemplateType.Events)
            {
                CheckBoxList1.Items.Add(new ListItem(listItem.Title));
            }
        }
    }
    MonthlyCalendarView1.ItemTemplateName =
        "CalendarViewMonthItemTemplate";
    MonthlyCalendarView1.ItemAllDayTemplateName =
        "CalendarViewMonthItemAllDayTemplate";
    MonthlyCalendarView1.ItemMultiDayTemplateName =
        "CalendarViewMonthItemMultiDayTemplate";
}

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    MonthlyCalendarView1 = New MonthlyCalendarView()
    Me.Controls.Add(MonthlyCalendarView1)
    Dim items As New SPCalendarItemCollection()
    Dim thisWeb As SPWeb = SPControl.GetContextWeb(Context)

    If CheckBoxList1.Items.Count = 0 Then
        Dim listItem As SPList
        For Each listItem In thisWeb.Lists
            If listItem.BaseTemplate = SPListTemplateType.Events Then
                CheckBoxList1.Items.Add(New ListItem(listItem.Title))
            End If
        Next listItem
    End If
    MonthlyCalendarView1.ItemTemplateName = "CalendarViewMonthItemTemplate"
    MonthlyCalendarView1.ItemAllDayTemplateName = "CalendarViewMonthItemAllDayTemplate"
    MonthlyCalendarView1.ItemMultiDayTemplateName = "CalendarViewMonthItemMultiDayTemplate"
End Sub

Reemplace el método Button1_Click de la clase VisualWebPart1 por el código siguiente. Este código agrega elementos de cada calendario seleccionado la vista del calendario maestro.

protected void Button1_Click(object sender, EventArgs e)
{
    SPCalendarItemCollection items = new SPCalendarItemCollection();
    SPWeb thisWeb = SPControl.GetContextWeb(Context);

    foreach (ListItem item in CheckBoxList1.Items)
    {
        if (item.Selected == true)
        {
            SPList calendarList = thisWeb.Lists[item.Text];
            DateTime dtStart = DateTime.Now.AddDays(-7);
            DateTime dtEnd = dtStart.AddMonths(1).AddDays(7);
            SPQuery query = new SPQuery();
            query.Query = String.Format(
                "<Query>" +
                "<Where><And>" +
                "<Geq><FieldRef Name=\"{0}\" />" +
                "<Value Type=\"DateTime\">{1}</Value></Geq>" +
                "<Leq><FieldRef Name=\"{0}\" />" +
                "<Value Type=\"DateTime\">{2}</Value></Leq>" +
                "</And></Where><OrderBy><FieldRef Name=\"{0}\" /></OrderBy>" +
                "</Query>",
                "Start Time",
                dtStart.ToShortDateString(),
                dtEnd.ToShortDateString());

            foreach (SPListItem listItem in calendarList.GetItems(query))
            {
                SPCalendarItem calItem = new SPCalendarItem();
                calItem.ItemID = listItem["ID"].ToString();
                calItem.Title = listItem["Title"].ToString();
                calItem.CalendarType = Convert.ToInt32(SPCalendarType.Gregorian);
                calItem.StartDate = (DateTime)listItem["Start Time"];
                calItem.ItemID = listItem.ID.ToString();
                calItem.WorkSpaceLink = String.Format(
                    "/Lists/{0}/DispForm.aspx", calendarList.Title);
                calItem.DisplayFormUrl = String.Format(
                    "/Lists/{0}/DispForm.aspx", calendarList.Title);
                calItem.EndDate = (DateTime)listItem["End Time"];
                calItem.Description = listItem["Description"].ToString();
                if (listItem["Location"] != null)
                {
                    calItem.Location = listItem["Location"].ToString();
                }
                items.Add(calItem);
            }
            MonthlyCalendarView1.DataSource = items;
        }

    }

}

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
    Dim items As New SPCalendarItemCollection()
    Dim thisWeb As SPWeb = SPControl.GetContextWeb(Context)

    Dim item As ListItem
    For Each item In CheckBoxList1.Items
        If item.Selected = True Then
            Dim calendarList As SPList = thisWeb.Lists(item.Text)
            Dim dtStart As DateTime = DateTime.Now.AddDays(-7)
            Dim dtEnd As DateTime = dtStart.AddMonths(1).AddDays(7)
            Dim query As New SPQuery()
            query.Query = [String].Format("<Query>" + "<Where><And>" + _
                                          "<Geq><FieldRef Name=""{0}"" />" + _
                                          "<Value Type=""DateTime"">{1}</Value></Geq>" + _
                                          "<Leq><FieldRef Name=""{0}"" />" + _
                                          "<Value Type=""DateTime"">{2}</Value></Leq>" + _
                                          "</And></Where><OrderBy><FieldRef Name=""{0}"" /></OrderBy>" + _
                                          "</Query>", "Start Time", dtStart.ToShortDateString(), dtEnd.ToShortDateString())

            Dim listItem As SPListItem
            For Each listItem In calendarList.GetItems(query)
                Dim calItem As New SPCalendarItem()
                With calItem
                    .ItemID = listItem("ID").ToString()
                    .Title = listItem("Title").ToString()
                    .CalendarType = Convert.ToInt32(SPCalendarType.Gregorian)
                    .StartDate = CType(listItem("Start Time"), DateTime)
                    .ItemID = listItem.ID.ToString()
                    .WorkSpaceLink = [String].Format("/Lists/{0}/DispForm.aspx", calendarList.Title)
                    .DisplayFormUrl = [String].Format("/Lists/{0}/DispForm.aspx", calendarList.Title)
                    .EndDate = CType(listItem("End Time"), DateTime)
                    .Description = listItem("Description").ToString()
                End With

                If Not (listItem("Location") Is Nothing) Then
                    calItem.Location = listItem("Location").ToString()
                End If
                items.Add(calItem)
            Next listItem
            MonthlyCalendarView1.DataSource = items
        End If
    Next item

End Sub

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. Para probar este proyecto, realizará las siguientes tareas:

Agregar un evento a cada una de las dos listas de calendarios independientes.
Agregar el elemento web a una página de elementos web.
Especificar las listas que se van a incluir en la vista de calendario mensual.

Para agregar eventos a listas de calendarios en el sitio

En Visual Studio, elija la tecla F5.

Se abre el sitio de SharePoint y aparece la barra inicio rápido de Microsoft SharePoint Foundation en la página.
En la barra Inicio rápido, en Listas, elija el vínculo Calendario.

Se muestra la página Calendario.

Si no aparece ningún vínculo Calendario en la barra Inicio rápido, elija el vínculo Contenido del sitio. Si la página Contenido del sitio no muestra un elemento Calendario, cree uno.
En la página Calendario, elija un día y, a continuación, elija el vínculo Agregar en el día seleccionado para agregar un evento.
En el cuadro Título, escriba Evento en el calendario predeterminado y, a continuación, elija el botón Guardar.
Elija el vínculo Contenido del sitio y, a continuación, elija el icono Agregar una aplicación.
En la página Crear, elija el tipo de calendario, asigne un nombre al calendario y, a continuación, elija el botón Crear.
Agregue un evento al nuevo calendario, asigne un nombre al evento Evento en el calendario personalizado y, a continuación, elija el botón Guardar.

Para agregar el elemento web a una página de elementos web

En la página Contenido del sitio, abra la carpeta Páginas del sitio.
En la cinta de opciones, elija la pestaña Archivos , abra el menú Nuevo documento y, a continuación, elija el comando Página de elementos web.
En la página Nueva página de elementos web, dé a la página el nombre SampleWebPartPage.aspx y elija el botón Crear.

Aparece la página de elementos web .
En la parte superior de la página de elementos web, elija la pestaña Insertar y, a continuación, elija el botón Elemento web.
Elija la carpeta Personalizada, elija el elemento web VisualWebPart1 y, a continuación, elija el botón Agregar.

El elemento web aparece en la página. Los controles siguientes aparecen en el elemento web:
- Una vista de calendario mensual.
- Un botón Actualizar.
- Una casilla Calendario.
- Una casilla Calendario personalizado.

Para especificar listas que se van a incluir en la vista de calendario mensual

En el elemento web, especifique los calendarios que desea incluir en la vista de calendario mensual y, a continuación, elija el botón Actualizar.

Los eventos de todos los calendarios especificados aparecen en la vista de calendario mensual.

Consulte también

Creación de elementos web para SharePoint Procedimiento: Creación de un elemento web de SharePoint Tutorial: Creación de un elemento web para SharePoint

Compartir a través de