Bilbro Bloggins

This is the first part of a multipart blog series.

1. In part one, we created a simple SharePoint Web Part which displayed a text label that could be set via the Web Part Properties Editor.
2. In part two of this blog series, we extended the simple SharePoint Web Part by adding a dropdown list box and populating it with values from a SharePoint list.
3. In part three, we add the capabilities to use the selected value in the dropdown list box to filter various SharePoint lists on the page.
4. In part four, you can download the Visual Studio 2008 project solution.

 

Blog Series Summary:

As a part of a proof of concept site I was creating in SharePoint, I wanted to learn how to create a web part in SharePoint that can communicate to other web parts on the page.  The web part that I wanted to create was a drop-down list box that would display a list of projects.   Selecting a project on the drop-down list would then drive the contents of the various SharePoint project lists (issues, notes, risks, etc…) on the SharePoint page.]

 

Part One:

In part one of this blog, we’ll make a simple SharePoint Web Part that has a text label utilizing Visual Studio Extensions for Windows SharePoint Services.  You’ll be able to set the text of the label in the SharePoint web part property editor.

Step 1 – Create a SharePoint Web Part project

 

Step 2 – Delete the WebPart1 that is created by default when you create a SharePoint Web Part project.

Step 3 – Add the dropdown filter Web Part to the project.

 

Step 4 – Add the necessary code in the CreateChildControls method that creates an instance of the label control.

private Label _textLabel = null;
protected override void CreateChildControls()
{
    base.CreateChildControls();
    _textLabel = new Label();
    this.Controls.Add(_textLabel);
}

Step 5 – Add the label text property (TextLabel).

        [WebBrowsable(true),
        Personalizable(PersonalizationScope.User),
        WebDescription("Text"),
        Category("Dropdown Filter"),
        WebDisplayName("Text")]
        public string TextLabel
        {
            get 
            {
                EnsureChildControls();
                return _textLabel.Text;
            }
            set
            {
                EnsureChildControls();
                _textLabel.Text = value;
            }
        }

The TextLabel property takes advantage of some attributes.

·         WebBrowsable – Setting this to true will allow this property to be set with the Web Part property editor.

·         Personalizable – This allows the property value to be persistable at the web part control level.

·         WebDescription – This is the tool tip that will be displayed in the web part property editor when you mouse over the property.

·         Category – When the web part property editor is display this controls which category in the editor the property should be displayed.

·         WebDisplayName – This is the friendly name of the property that you would like to display in the web part property editor.

An item of note:

using statements need –The Category reference will require the following to be added to your list of using statements at the top of the class. 

using System.ComponentModel; 

 

Step 6 – Set a friendly title and description for your web part.  You can set these values in the .webpart xml file associated with your web part.

<?xml version="1.0" encoding="utf-8"?>
<webParts>
  <webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
    <metaData>
      <!--
      The following Guid is used as a reference to the web part class, 
      and it will be automatically replaced with actual type name at deployment time.
      -->
      <type name="83f9fbbf-dba8-4a8e-a1f6-cafacbaafbbb" />
      <importErrorMessage>Cannot import DropDownFilterBlog Web Part.</importErrorMessage>
    </metaData>
    <data>
      <properties>
        <property name="Title" type="string">DropDown List filter web part</property>
        <property name="Description" type="string">This web part will allow you to 
        populate the dropdown list from a SharePoint list and then use the value
        in the dropddown to filter other web parts on the page.</property>
      </properties>
    </data>
  </webPart>
</webParts>

 

Step 7 – Set the URL to your SharePoint server:  Right click project -> Properties -> Debug -> Start browser with URL.

 

 

 

Step 8 – Build and Deploy the web part to your SharePoint server. Right click project -> Deploy

Step 9 – This step is not necessarily but if you want to see, you should see your web part in the Site Collection Feature list and it should already be activated.

Step 10 – Edit a page in SharePoint that allows web parts.

 

Step 11 –Add the web part to your page.

  

 

Step 12 – Bring up the Web Part Properties Editor.

Step 13 – Set the value for the Text label.

 

Step 14 – After selecting OK on the editor and then exiting the page edit, you should see your text displayed in the web part.

 

This completes part one of Dropdown Filter web part.   You can proceed to part two to learn more by adding the dropdown list box and populating it with values from a SharePoint list.