In past projects, we’ve always made web parts customizable in the web part properties panel using a custom toolbox. I have found that in doing that, you are allowing the end users of your site to make changes to the other properties of the web part thinking these other settings are their’s to play with. Yes I know you’ve seen it before.

What I have started to do in more recent projects is to make the web parts customizable directly in the WebPart display view – when the page is in edit mode. This way, you only expose the properties that the end user should be playing with and it makes for a better editing experience from the end-user’s perspective.

A typical scenario would be:

• The user inserts the web part on the page
• The user fills in the required properties in the web part itself
• The user clicks save on the web part form and boom, the web part is ready to use.

This process has successfully been used in many web parts so far so here is the process I use to make it work:

First, one of the properties i always want to override is the chrome of the web part. we force the web part to display with no chrome using the following block of code inside the WebPart class:

public override PartChromeType ChromeType
{
	get { return PartChromeType.None; }
	set { base.ChromeType = PartChromeType.None; }
}

Then we declare the properties for the web part:

private int _Height;
[Browsable(true)]
[Category("Appearance")]
[DefaultValue(false)]
[Description("Max Height")]
public int Height
{
	get
	{
		return _Height;
	}
	set
	{
		_Height = value;
	}
}

Then what we need to do is override CreateChildControls and check the current display mode:

Panel editPanel;
TextBox height;
Button submit;

protected override void CreateChildControls()
{
	if (SPContext.Current.FormContext.FormMode == SPControlMode.Display)
	{
		//Render WebPart here for display mode
		//check if properties are configured and display message if not
	}
	else// SPContext.Current.FormContext.FormMode = SPControlMode.Edit
	{
		editPanel = new Panel();
		editPanel.Width = Unit.Pixel(460);
		editPanel.Controls.Add(new LiteralControl("WebPart Configuration"));
		editPanel.Controls.Add(new LiteralControl("<br/>Please define the height in pixels<br/>"));
		height = new TextBox();
		if (Height >= 0)
		{
			height.Text = Height.ToString();
		}
		editPanel.Controls.Add(height);
		editPanel.Controls.Add(new LiteralControl("<br/>"));
		submit = new Button();
		submit.Text = "Save";
		submit.Click += new EventHandler(submit_Click);
		editPanel.Controls.Add(submit);
		Controls.Add(editPanel);
	}
}

Finally we need to define the event handler for the button click:

void submit_Click(object sender, EventArgs e)
{
	if (!string.IsNullOrEmpty(height.Text.Trim()))
	{
		Controls.Remove(editPanel);
		Height = Convert.ToInt32(height.Text);
		this.SetPersonalizationDirty(); //This is what saves the property
		Controls.Add(new LiteralControl("WebPart Configured."));
	}
	else
	{
		Controls.Add(new LiteralControl("Missing value."));
	}
}

When you click the submit button, the value gets saved to the web part properties.

The end-users have reported great feedback on this simplified web part configuration process so we intend on using this method on all future projects.

Let me know if you try it out!