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

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.Este tutorial muestra cómo crear un elemento web utilizando la plantilla de proyecto de SharePoint Elemento web visual en Visual Studio.

El elemento web muestra una vista de calendario mensual y una casilla para cada lista de calendarios del sitio.Los usuarios pueden elegir 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 utilizando la plantilla de proyecto Elemento web visual.
Diseñar el elemento web con el diseñador de Visual Web Developer en Visual Studio.
Agregar código para controlar eventos de controles 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 de elemento web

Primero, cree un proyecto de elemento web utilizando la plantilla de proyecto Elemento web visual.

Para crear un proyecto de elemento web visual

Inicie Visual Studio con la opción Ejecutar como administrador.
En la barra de menú, elija Archivo, Nuevo, Proyecto.Si el IDE está establecido para utilizar la configuración de desarrollo de Visual Basic, en la barra de menú, elija Archivo, Nuevo proyecto.

Aparecerá el cuadro de diálogo Nuevo proyecto.
En el cuadro de diálogo de Nuevo proyecto , en *** Visual C# *** o Visual Basic, expanda el nodo de SharePoint y, a continuación el nodo de *** 2010 *** .
En el panel de Plantillas instaladas de Visual Studio , elija la plantilla de Elemento web visual de SharePoint 2010 , y elija el botón de Aceptar .

Aparece el Asistente para la personalización de SharePoint.Con este asistente, puede especificar el sitio que se va a usar para depurar el proyecto y el nivel de confianza de la solución.
En la sección de Cuál es el nivel de confianza de esta solución de SharePoint? , elija el botón de opción de Implementar como solución de granja de servidores .
Elija el botón de Finalizar para aceptar el sitio local predeterminado de SharePoint.

Diseñar el elemento web

Diseñar el elemento web agregando controles de Cuadro de herramientas a la superficie del control de usuario.

Para diseñar el área del elemento web

En el diseñador de Visual Web developer, elija la pestaña de Diseño para cambiar a la Vista diseño.
En la barra de menú, elija Ver, Cuadro de herramientas.
En el nodo de Estándar de Cuadro de herramientas, elija el control de *** CheckBoxLIst *** y después realice uno de los pasos siguientes:
- Abrir el menú contextual para el control de *** CheckBoxList *** y elija Copiar, elija la primera línea en el diseñador, abra el menú contextual de la línea y, a continuación Pegar.
- Arrastre el control de *** CheckBoxList *** de Cuadro de herramientas y conéctelo a la primera línea en el diseñador.
Repita el paso anterior, pero mueva un botón a la línea siguiente del diseñador.
En el diseñador, elija el botón de button1 .
En la barra de menú, elija Ver, Ventana Propiedades.

Se abre la ventana Propiedades.
En la propiedad de Texto button, escriba update.

Controlar los eventos de los controles del elemento web

Agregue código que permita agregar calendarios a la vista de calendario principal.

Para controlar eventos de controles del elemento web

Siga una de estas series de procedimientos:
- En el diseñador, haga doble clic en el botón de Actualizar .
- En la ventana de Propiedades para el botón de Actualizar , elija el botón de Eventos .En la propiedad de Haga clic en , entre en Button1_Click, y elija la tecla ENTRAR.
El archivo de código del control de usuario se abre en el editor de código y aparece el controlador de eventos Button1_Click.Después, agregará código a este controlador de eventos.

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

Imports Microsoft.SharePoint
Imports Microsoft.SharePoint.WebControls

using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;

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

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 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

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";
}

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

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

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;
        }

    }

}

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 tareas siguientes:

Agregar un evento a cada una de dos listas de calendarios independientes.
Agregar el elemento web a una página de elemento web.
Especifique las listas para incluir en la vista de calendario mensual.

Para agregar eventos a listas de calendario del sitio

En Visual Studio, elija la tecla F5.

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

Aparece la página Calendario.
Elija la pestaña de Eventos , y elija Nuevo evento en la cinta de opciones.
En el cuadro de Título , escriba el evento en el calendario predeterminado, y elija el botón de Guardar .
En el menú de *** Busque las acciones *** , elija el comando de Más opciones .
En la página de Crear , elija el tipo de Calendario , llame al calendario, y elija el botón de Crear .

La página Calendario personalizado aparece.
Agregar un evento al calendario personalizado, llame al evento de evento en el calendario personalizado, y elija el botón de Guardar .

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

En el menú de *** Busque las acciones *** , elija el comando de Más opciones .
En la página de Crear , elija el tipo de *** Página de elementos web *** , y 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 .
Elija 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 .
Elija la carpeta de Personalizado , elija el elemento web de *** VisualWebPart1 *** , y elija el botón de Agregar .

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

Para especificar listas para incluir en la vista de calendario mensual

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

Los eventos de todos los calendarios que especificó aparecen en la vista de calendario mensual.