Walkthrough: Creating a Basic Web Part

Article
10/20/2016

Applies to: SharePoint Foundation 2010

This walkthrough provides the steps for creating a basic custom Web Part that can be added to your site pages. It is a simple Web Part that enables the user to define a custom message that is displayed inside the Web Part. This Web Part derives from the Microsoft ASP.NET Web Part class, which is the recommended practice for Microsoft SharePoint Foundation.

For more information about ASP.NET Web Parts, see the following ASP.NET documentation: ASP.NET QuickStart Tutorials and ASP.NET Web Parts Controls.

Prerequisites

ASP.NET

SharePoint development tools in Microsoft Visual Studio 2010

Creating a Web Part

To create a Web Part

Start Microsoft Visual Studio 2010.
On the File menu, point to New, and then click Project. If Visual Studio is set to use Visual Basic development settings, on the File menu, click New Project.
In the New Project dialog box, in the Installed Templates pane, expand the SharePoint node under the programming language that you want to use, and then select 2010.
In the Templates pane, select Empty SharePoint Project.
Type Sample.DisplayMessage as the project name, and then click OK.
In the SharePoint Customization Wizard, select Deploy as a sandboxed solution, and then click Finish.
In Solution Explorer, click the Sample.DisplayMessage project.
On the Project menu, click Add New Item.
In the Add New Item dialog box, select the Web Part template, type DisplayMessageWebPart as the Name, and then click Add.

Adding a Web Part Property

After adding the new Web Part, add a property that can be personalized for the Web Part. The Web Part property determines the text that is rendered inside the Web Part. This is personalized based on the individual user.

Note

For more information about customization and personalization, see Web Parts Personalization.

For Web Parts based on the ASP.NET Web Parts Pages base class, the tags that are used for the customizable properties are named differently than Web Parts that are based on the WebPart base class. The following list describes each of those properties:

The WebBrowsableAttribute attribute ensures that your custom property renders in the editing tool pane in SharePoint Foundation.
The WebDescriptionAttribute attribute displays a tooltip to help guide users when they are editing your custom property.
The WebDisplayNameAttribute attribute shows a display name for your custom property.
The PersonalizableAttribute attribute determines whether changes to your custom property affect all users or only individual users.

To create the Web Part property

In the DisplayMessageWebPart file, copy and paste the following code to create a basic customizable property.

private string customMessage = "Hello, world!";

public string DisplayMessage
{
    get { return customMessage; }
    set { customMessage = value; }
}

Private customMessage As String = "Hello, world!"

Public Property DisplayMessage() as String
    Get
        Return customMessage
    End Get
    Set(ByVal value as String)
        customMessage = value
    End Set
End Property

Add the following tags above the public declaration to allow changes on a per-user basis.

[WebBrowsable(true),
  WebDescription("Displays a custom message"),
  WebDisplayName("Display Message"),
  Personalizable(PersonalizationScope.User)]

<WebBrowsable(True), _
  WebDescription("Displays a custom message"), _
  WebDisplayName("Display Message"), _
  Personalizable(PersonalizationScope.User)> _

Now you have created a personalizable Web Part property.

Overriding the CreateChildControls Method

Next, you must add functionality to your Web Part. By overriding the CreateChildControls method, you can tell the Web Part what operations to perform when the page is visited. In this example, the Web Part renders the user-defined text.

To override the CreateChildControls method

In the DisplayMessageWebPart file, paste the following code to override the CreateChildControls method.

protected override void CreateChildControls()
{
    base.CreateChildControls();
    LiteralControl message = new LiteralControl();
    message.Text = DisplayMessage;
    Controls.Add(message);
}

Protected Overrides Sub CreateChildControls()
    MyBase.CreatChildControls()
    Dim message As LiteralControl = New LiteralControl()
    message.Text = DisplayMessage
    Me.Controls.Add(message)
End Sub

Deploying and Testing the Web Part

To deploy and test the Web Part

Press F5 to deploy the Web Part.
Click Site Actions, and then click More Options.
On the Create page, click Web Part Page, and then click Create.
On the New Web Part Page page, for the Name, type DisplayMessageWebPartPage, and then click Create.
Click Add a Web Part in the Header zone.
On the ribbon, click the Insert tab, and then click Web Part.
In the Categories pane, click Custom.
In the Web Parts pane, click DisplayMessageWebPart, and then click Add.
On the ribbon, click the Page tab, and then click Stop Editing.

Share via