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

If you create web parts for a SharePoint site, your users can directly modify the content, appearance, and behavior of pages in that site 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.

The web part that you'll create displays a monthly calendar view and a check box for each calendar list on the site. Users can specify which calendar lists to include in the monthly calendar view by selecting the check boxes.

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 elements of the user interface for Visual Studio in the following instructions. The Visual Studio edition that you have and the settings that you use determine these elements. See Customizing Development Settings in Visual Studio.

Prerequisites

You need the following components to complete this walkthrough:

• Supported editions of Windows and SharePoint. See Requirements for Developing SharePoint Solutions.

• Visual Studio Professional or greater.

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

1. Start Visual Studio by using the Run as Administrator option.

2. On the menu bar, choose File, New, Project.

   The New Project dialog box appears.

3. In the New Project dialog box, under either Visual C# or Visual Basic, expand Office/SharePoint, and then choose the SharePoint Solutions category.

4. In the list of templates, choose the SharePoint 2013 - Visual Web Part template, and then choose the OK button.

   The SharePoint Customization Wizard appears. By using this wizard, you can specify the site that you'll use to debug the project and the trust level of the solution.

5. In the What is the trust level for this SharePoint solution? section, choose the Deploy as a farm solution option button.

6. Choose the Finish button to accept the default local SharePoint site.

Designing the web part

Design the web part by adding controls from the Toolbox to the surface of the Visual Web Developer designer.

To design the layout of the web part

1. On the Visual Web Developer designer, choose the Design tab to switch to Design view.

2. On the menu bar, choose View, Toolbox.

3. In the Standard node of the Toolbox, choose the CheckBoxList control, and then perform one of the following steps:

   • Open the shortcut menu for the CheckBoxList control, choose Copy, open the shortcut menu for the first line in the designer, and then choose Paste.

   • Drag the CheckBoxList control from the Toolbox, and connect the control to the first line in the designer.

4. Repeat the previous step, but move a Button to the next line of the designer.

5. In the designer, choose the Button1 button.

6. On the menu bar, choose View, Properties Window.

   The Properties window opens.

7. In the Text property of the button, enter 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

1. Perform one of the following sets of steps:

   • In the designer, double-click the Update button.

   • In the Properties window for the Update button, choose the Events button. In the Click property, enter Button1_Click, and then choose the Enter key.

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

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

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

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

3. Add the following line of code to the VisualWebPart1 class. This code declares a monthly calendar view control.

   Private MonthlyCalendarView1 As MonthlyCalendarView
   

   private MonthlyCalendarView MonthlyCalendarView1;
   

4. Replace the Page_Load method of the VisualWebPart1 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";
   }
   

5. Replace the Button1_Click method of the VisualWebPart1 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’ll perform the following tasks:

• Add an event to each of two separate calendar lists.

• Add the web part to a web part page.

• Specify the lists to include in the monthly calendar view.

To add events to calendar lists on the site

1. In Visual Studio, choose the F5 key.

   The SharePoint site opens, and the Microsoft SharePoint Foundation 2010 Quick Launch bar appears on the page.

2. On the Quick Launch bar, under Lists, choose the Calendar link.

   The Calendar page appears.

   If you no Calendar link appears on the Quick Launch bar, choose the Site Contents link. If the Site Contents page doesn't show a Calendar item, create one.

3. On the Calendar page, choose a day, and then choose the Add link in the selected day to add an event.

4. In the Title box, enter Event in the default calendar, and then choose the Save button.

5. Choose the Site Contents link, and then choose the Add an app tile.

6. On the Create page, choose the Calendar type, name the calendar, and then choose the Create button.

7. Add an event to the new calendar, name the event Event in the custom calendar, and then choose the Save button.

To add the web part to a web part page

1. On the Site Contents page, open the Site Pages folder.

2. On the ribbon, choose the Files tab, open the New Document menu, and then choose the Web Part Page command.

3. On the New Web Part Page page, name the page SampleWebPartPage.aspx, and then choose the Create button.

   The web part page appears.

4. In the top zone of the web part page, choose the Insert tab, and then choose the Web Part button.

5. Choose the Custom folder, choose the VisualWebPart1 web part, and then choose the Add button.

   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 check box.

To specify lists to include in the monthly calendar view

• In the web part, specify calendars that you want to include in the monthly calendar view, and then choose the Update button.

  Events from all calendars that you specified appear in the monthly calendar view.

See Also

Tasks

How to: Create a SharePoint Web Part

How to: Create a SharePoint Web Part by Using a Designer

Walkthrough: Creating a Web Part for SharePoint

Other Resources

Creating Web Parts for SharePoint