Walkthrough: Creating a Web Part for SharePoint by Using a Designer

Article
02/04/2013

Web Parts enable users to directly modify the content, appearance, and behavior of SharePoint site pages by using a browser. This walkthrough shows you how to create a Web Part visually by using the SharePoint Visual Web Part project template in Visual Studio 2010.

The Web Part displays a monthly calendar view and a check box for each calendar list on the site. Users can choose which calendar lists to include in the monthly calendar view by selecting the checkboxes.

This walkthrough illustrates the following tasks:

Creating a Web Part by using the Visual Web Part project template.
Designing the Web Part by using the Visual Web Developer designer in Visual Studio.
Adding code to handle the events of controls on the Web Part.
Testing the Web Part in SharePoint.

Note

Your computer might show different names or locations for some of the Visual Studio user interface elements in the following instructions. The Visual Studio edition that you have and the settings that you use determine these elements. For more information, see Working with Settings.

Prerequisites

You need the following components to complete this walkthrough:

Supported editions of Microsoft Windows and SharePoint. For more information, see Requirements for Developing SharePoint Solutions.
Visual Studio 2010 Professional or an edition of Visual Studio Application Lifecycle Management (ALM).

Creating a Web Part Project

First, create a Web Part project by using the Visual Web Part project template.

To create a Visual Web Part Project

Start Visual Studio 2010 by using the Run as Administrator option.
On the File menu, point to New, and then click Project. If your IDE is set to use Visual Basic development settings, on the File menu, click New Project.

The New Project dialog box appears.
Open the New Project dialog box, expand the SharePoint node under the language that you want to use, and then select the 2010 node.
In the Visual Studio Installed Templates pane, select Visual Web Part, and then click OK.

The SharePoint Customization Wizard appears. This wizard enables you to select the site that you will use to debug the project and the trust level of the solution.
Click Finish to accept the default local SharePoint site and default trust level for the solution.

By default, the Visual Web Developer displays the user control of the project in Source view where you can see the page's HTML elements.

Designing the Web Part

Design the Web Part by dragging controls from the Toolbox to the surface of the user control.

To design the layout of the Web Part

On the Visual Web Developer designer, click the Design tab to switch to Design view.
On the View menu, click Toolbox.
In the Toolbox, from the Standard group, drag a CheckBoxList and a Button to the designer.
In the designer, click Button.
On the View menu, click Properties Window.
In the Properties window, set the Text property of the button to Update.

Handling the Events of Controls on the Web Part

Add code that enables the user to add calendars to the master calendar view.

To handle events of controls on the Web Part

On the designer, double-click the Update button.

The user control code file opens in Code Editor and the Button1_Click event handler appears. Later, you will add code to this event handler.

Add the following statements to the top of the user control code file.

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

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

Add the following line of code to the VisualWebPart1userControl class. This code declares a monthly calendar view control.
```
Private MonthlyCalendarView1 As MonthlyCalendarView
```
```
private MonthlyCalendarView MonthlyCalendarView1;
```

Replace the Page_Load method of the VisualWebPart1UserControl class with the following code. This code performs the following tasks:

Adds a monthly calendar view to the user control.
Adds a check box for each calendar list on the site.
Specifies a template for each type of item that appears in the calendar view.

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

Replace the Button1_Click method of the VisualWebPart1UserControl class with the following code. This code adds items from each selected calendar to the master calendar view.

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

    }

}

Testing the Web Part

When you run the project, the SharePoint site opens. The Web Part is automatically added to the Web Part Gallery in SharePoint. To test this project, you will perform the following tasks:

Add an event to each of two separate calendar lists.
Add the Web Part to a Web Part Page.
Select lists to include in the monthly calendar view.

To add events to calendar lists on the site

In Visual Studio, press F5.

The SharePoint site opens and the Microsoft SharePoint Foundation 2010 Quick Launch bar appears on the page.
In the Quick Launch bar, under Lists, click Calendar.

The Calendar page appears.
Click Events, and then click New Event.
In the Title box, type Event in the default calendar, and then click Save.
Click Site Actions, and then click More Options.
In the Create page, click Calendar, name the calendar, and then click Create.

The Custom Calendar page appears.
Add a new event to the custom calendar named Event in the custom calendar.

To add the Web Part to a Web Part Page

Click Site Actions, and then click More Options.
In the Create page, click Web Part Page, and then click Create.
In the New Web Part Page page, name the page SampleWebPartPage.aspx, and then click Create.

The Web Part page appears.
Select any zone on the Web Part page.
At the top of the page, click the Insert tab, and then click Web Part.
Click the Custom folder, click the VisualWebPart1 Web Part, and then click Add.

The Web Part appears on the page. The following controls appear on the Web Part:
- A monthly calendar view.
- An Update button.
- A Calendar check box.
- A Custom Calendar checkbox.

To select lists to include in the monthly calendar view

In the Web Part, select calendars that you want to include in the monthly calendar view, and then click Update.

Events from all selected calendars appear in the monthly calendar view.