Create a Custom Visual WebPart Property With Default Value in SharePoint 2013 / 2010

In this article, I will explain

How to create a custom Visual WebPart property with default value in SharePoint 2013 / 2010?

Scenario:

In SharePoint 2013, I would like to create a visual web part that shows tasks based on the Project ID as a custom property.

Custom WebPart Property in Visual WebPart in SharePoint 2013

Steps :
  • Open Visual Studio.
  • Create a new SharePoint Solution.
  • Add new item > Visual Web Part.

Missing custom webpart property in SharePoint 2013.png

Note: Make sure that you have selected Visual Web Part not Visual Web Part (Farm Solution Only).

The custom propery will not work with Visual Web Part (Farm Solution Only) becasue the partial calss inherite from UserControl

Missing Custom Propery In visual Web Part in SharePoint 2013.png

Not from System.Web.UI.WebControls.WebParts.WebPart.

Missing Custom Propery In visual Web Part in SharePoint 2013 - User Control.png

  • From Solution Explorer > Double click on .asx.cs file.

CUSTOM WEBPART PROPERTY WITH DEFAULT VALUE IN SHAREPOINT 2013

  • By default, the following code would be generated above class definition.

[ToolboxItemAttribute(false)]

  • Add the following code below class definition.

[WebBrowsable(true),

WebDisplayName("Project ID"),

WebDescription("Enter Project Number"),

Personalizable(PersonalizationScope.Shared),

System.ComponentModel.Category("Project Settings")]

public string ProjectID { get; set; }

  • In the Visual Web Part Constructor, Set the default value for Custome Property, 

public CustomProperty2013_MQassas()
{
// set the default value for the custom property in Vsiual Web Part
ProjectID = "M.Qassas-12";
}

The final code should look like


using System;
using System.ComponentModel;
using System.Web.UI.WebControls.WebParts;

namespace SP2013Sample.CustomProperty2013_MQassas
{
[ToolboxItemAttribute(false)]
public partial class CustomProperty2013_MQassas : WebPart
{
[WebBrowsable(true),
WebDisplayName("Project ID"),
WebDescription("Enter Project Number"),
Personalizable(PersonalizationScope.Shared),
Category("Project Settings")]

//Define Property
public string ProjectID { get; set; }

public CustomProperty2013_MQassas()
{
// set the default value for the property
ProjectID = "M.Qassas-12";
}

protected override void OnInit(EventArgs e)
{
base.OnInit(e);
InitializeControl();
}

protected void Page_Load(object sender, EventArgs e)
{
//Read the property value
string PID = ProjectID;
}
}
}

Create Custom WebPart Property in Visual WebPart SharePoint 2013

  • Where :
    • WebBrowsable attribute enables the property to be displayed in edit mode of Web Part. If set to false, this property won’t be available for the users to change the property by editing the Web Part.
    • WebDisplayName attribute is the user-friendly display name for this property.
    • WebDescription attribute acts as a tooltip for WebDisplayName attribute.
    • Personalizable attribute accepts PersonalizationScope enumerator as an input. This enumerator has two options one is Shared, and another one is User. If this attribute is set as Shared, the changes to this property will be available to all users. If this attribute is set to User, then changed property value will be available only for that user alone.
    • Category attribute is used to display this property under a specified group.
  • Deploy the SharePoint solution.
  • Go to your page to add Web Part > From right side click on arrow > Select Edit Web Part.

CREATE A CUSTOM WEBPART PROPERTY WITH DEFAULT VALUE IN SHAREPOINT 2013

  • The new “Project ID” property should be now added successfully.

Custom WebPart Property in Visual WebPart in SharePoint 2013

Note: To get the Custom property value,  you should use the “ProjectID” variable that defined as public string ProjectID { get; set; }


string PID = ProjectID;

Advertisements

5 thoughts on “Create a Custom Visual WebPart Property With Default Value in SharePoint 2013 / 2010

  1. HI Qassas,
    I need to access the property in the UserControl Page( UserControl.ascx.cs). can you please share the sample code

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s