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

Artículo
08/10/2011

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 de proyecto Elemento web visual de SharePoint en Visual Studio 2010.

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é 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 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 2010 con la opción Ejecutar como administrador.
En el menú Archivo, elija Nuevo y, a continuación, haga clic en Proyecto. Si el IDE está establecido para utilizar la configuración de desarrollo de Visual Basic, en el menú Archivo, haga clic en Nuevo 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 instaladas de Visual Studio, seleccione Elemento web visual y, a continuación, 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.
Haga clic en Finalizar para aceptar el sitio local predeterminado de SharePoint y el nivel de confianza predeterminado para la solución.

De forma predeterminada, Visual Web Developer muestra el control de usuario del proyecto en la vista Código fuente, donde puede ver los elementos HTML de la página.

Diseñar el elemento web

Diseñe el elemento web arrastrando los controles del 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, haga clic en la pestaña Diseño para pasar a la Vista de diseño.
En el menú Ver, haga clic en Cuadro de herramientas.
En el Cuadro de herramientas, en el grupo Estándar, arrastre un CheckBoxList y un Button al diseñador.
En el diseñador, haga clic en Button.
En el menú Ver, haga clic en Ventana Propiedades.
En la ventana Propiedades, establezca la propiedad Text del botón en 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

En el diseñador, haga doble clic en el botón control Update.

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 VisualWebPart1userControl. 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 VisualWebPart1UserControl 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 VisualWebPart1UserControl 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.
Seleccionar listas para incluir en la vista de calendario mensual.

Para agregar eventos a listas de calendario del sitio

En Visual Studio, presione F5.

El sitio de SharePoint se abre y aparece la barra de Inicio rápido de Microsoft SharePoint Foundation 2010 en la página.
En la barra de Inicio rápido, en Listas, haga clic en Calendario.

Aparece la página Calendario.
Haga clic en Eventos y, a continuación, en Nuevo evento.
En el cuadro Título, escriba Evento en el calendario predeterminado y, a continuación, haga clic en Guardar.
Haga clic en Acciones del sitio y, a continuación, en Más opciones.
En la página Crear, haga clic en Calendario, asigne un nombre al calendario y, a continuación, haga clic en Crear.

La página Calendario personalizado aparece.
Agregue un nuevo evento al calendario personalizado denominado Evento en el calendario personalizado.

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

Haga clic en Acciones del sitio y, a continuación, en Más opciones.
En la página Crear, haga clic en 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 la pestaña Insertar y, a continuación, haga clic en Elemento web.
Haga clic en la carpeta Personalizar, haga clic en el elemento web VisualWebPart1 y, a continuación, haga clic en 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 seleccionar listas para incluir en la vista de calendario mensual

En el elemento web, seleccione los calendarios que desea incluir en la vista de calendario mensual y, a continuación, haga clic en Actualizar.

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

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

Otros recursos

Crear elementos web para SharePoint

Compartir a través de