In the CustomizedWebPart code sample I am looking at customizing the behavior and functionality of Web Parts using custom properties. The Web Part is developed using the Visual Studio .NET environment. This sample contains a DataGrid control which displays customer information. Using our custom properties, the user will be able to customize the following information:
- Select to view chosen customer record in DataGrid in separate detail pane by checking a check box in property pane.
- Selecting a company name from an enum class that will make company names available in the property pane.
- Adding an accountant name from a text box in the property pane.
It is important to understand how to develop custom Web Parts before we start any coding. Please refer to my previous article "Developing Web Parts for SharePoint 2003 in VS.NET" for more information regarding developing Web Parts. (http://www.devx.com/dotnet/Article/17518)
How to add a check box to the property pane
First let's look at adding a check box to the property pane.
///<summary>
/// This property will
determine, wether to display the selected customer
/// information in a detail
pane in label controls.
/// This will be available
in a check box.
///</summary>
[Browsable(true), //Display the
property in property pane
Category("Customer Details"), //Create a Customer Details category in
property pane
DefaultValue(false), //Assign a default value
WebPartStorage(Storage.Personal),//Make available in both personal and
shared
mode
FriendlyName("Display
Details"), //The caption display in property
pane
Description("Displaying
Customer Details")]//The tool tip
publicbool DisplayCustomerDetails
{
get
{
return m_blnDispalyDetails;
}
set
{
m_blnDispalyDetails
= value;
}
}
Figure 6: Custom property code that will create a check box in the property pane
The above code will create a Category named "Customer Details" in the property pane. This will help organize the information in a logical manner. Whenever any customer customization needs to be done, we will be able to go straight to the "Customer Details" category.
Figure 7: The "Customer Details" category added to the property pane with a check box.
When above check box in not selected, the customer DataGrid will display as follows:
Figure 8: Default look of Customer Web Part
When user selects the "Display Details" check box from the property pane, it will render as follows:
TIP: To access the property pane, select the Edit mode of the Web Part. Then click the down arrow located at top right hand corner of the Web Part. Select "Modify Shared web part" (or personnel depend on witch mode the Web Part is running). This will open the property pane and then expand the "Customer Details" category. At the end, click Apply and Ok buttons.
Figure 9: Customized Web Part with additional customer details
How to add a drop down list to the property pane
Secondly, let's make use of an enum structure which contains company names (as displayed below).
///<summary>
/// Holds the company names
///</summary>
publicenum CompanyName : int
{
TaxOffice = 0, //This will
display customers as Tax Office Customers
PostOffice
= 1, //This will display customers as Post Office
Customers
Bank
= 2, //This will display customers as Bank Customers
Telephone
= 3 //This will display customers as Telephone
Customers
}
Figure 10: Enum class that hold the company names
I expose this enum class as a Web Part custom property as display below,
///<summary>
/// This property will
determine the name of the company.
/// The names of the
companies are stored in an enum collection.
/// This will be available
in a drop down list.
///</summary>
[Browsable(true),//Display the
property in property pane
Category("Customer
Details"),//Create a Customer Details category
in
property
pane
DefaultValue(CompanyName.Bank),//Assign a default value
WebPartStorage(Storage.Personal),//Make available in both personal and
shared
mode
FriendlyName("Company
name"),//The caption display in property pane
Description("Select
the office")]//The tool tip
public CompanyName DisplayCompanyName
{
get
{
return m_enmSelectedCompany;
}
set
{
m_enmSelectedCompany
= value;
}
}
Figure 11: Custom property with an enum class This custom property will display in property pane as below
Figure 12: "Company Name" custom property in a drop down list
The user can select any company name they prefer and this information will display in the Web Part as shown below:
Figure 13: Displaying selected "Bank" company name from property pane.
How to add a text box to the property pane
Finally, let's have a look at adding a text box to property pane. The following code will allow the user to type a string value in a text box. Then I will use this string value as the accountant's name for the customers displayed.
///<summary>
/// This property will
allow to enter a string value to a text box.
///</summary>
[Browsable(true),//Display the
property in property pane
Category("Customer
Details"),//Create a Customer Details category
in
property
pane
DefaultValue("John
Smith"),//Assign a default value
WebPartStorage(Storage.Personal),//Make available in both personal and
shared
mode
FriendlyName("Accountant
name"),//The caption display in property
pane
Description("Accountant
name")]//The tool tip
publicstring AccountantName
{
get
{
return m_strAccountantName;
}
set
{
m_strAccountantName
= value;
}
}
Figure 14: Custom property with text box
This custom property will display in the property pane as follow,
Figure 15: Custom property as a text box to input Accountant name
The user can input any name they like and this will show in the Web Part as displayed below:
Figure 16: Displaying the accountant's name from property pane.
