Custom Editor Part For Web Parts
We have seen so many web part related articles. There are different types of mode
in Web parts.
-
Browse
-
Design
-
Catalog
-
Edit
-
Connect.
But here we are going to discuss the Edit Mode of the Web Part.
First of all you have to declare a class for edit, which will contain all the properties
which you want to edit in your web part.
Like say I have one Web Part on my page. And it contains two Labels. Both are like
Welcome notes.
But I have taken them as user control in my main Web Part page.
Here is the declaration of WelcomeUserControl.
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WelcomeUserControl.ascx.cs" Inherits="WelcomeUserControl" %>
<asp:Label ID="Label1" runat="server" Text="Welcome to USA."></asp:Label>
<br />
<asp:Label ID="Label2" runat="server" Text="Welcome to Florida."></asp:Label>
And See the code behing for the user control.
public partial class WelcomeUserControl : BaseUserControl,IWebEditable
{
WelcomeEditorPart part1 = new WelcomeEditorPart();
protected void Page_Load(object sender, EventArgs e)
{
base.MyText = Label1.Text;
base.MyText2 = Label2.Text;
}
protected void Page_Prerender(object sender, EventArgs e)
{
Label1.Text = base.MyText;
Label2.Text = base.MyText2;
}
protected void Page_Init(object sender, EventArgs e)
{
GenericWebPart gwp = Parent as GenericWebPart;
if (gwp != null)
{
gwp.Title = "UserControl WebPart1";
}
}
#region IWebEditable
public EditorPartCollection CreateEditorParts()
{
ArrayList editorArray = new ArrayList();
WelcomeEditorPart edPart = new WelcomeEditorPart();
edPart.ID = this.ID + "_WelcomePart1";
editorArray.Add(edPart);
EditorPartCollection editorParts = new EditorPartCollection(editorArray);
return editorParts;
}
public object WebBrowsableObject
{
get { return this; }
}
#endregion IWebEditable
}
You can see that the page inherits class named BaseUserControl and an interface named
IwebEditable.
You have to take one class file and name it BaseUserControl. (ie BaseUserControl.cs).
The file will automatically be located in app_code folder of your application.
Here is the class file BaseUserControl.cs
public class BaseUserControl : System.Web.UI.UserControl
{
private string _myText;
private string _myText2;
private string _myColor;
private string _HeaderText;
public BaseUserControl()
{
//
// TODO: Add constructor logic here
//
}
[Personalizable(), WebBrowsable()]
public string MyText
{
get { return _myText; }
set { _myText = value; }
}
public string MyText2
{
get { return _myText2; }
set { _myText2 = value; }
}
}
The WebPart renders out the text specified in MyText and MyText2, and putting it
in either Microsoft Office SharePoint Server 2007 or an ASP.NET 2.0 WebPart framework
that you wrote yourself enables you to modify the MyText value. In the case of
an ASP.NET 2.0 WebPart framework, you can modify it with the PropertyGridEditorPart
because MyText is decorated by the WebBrowsable() attribute.
Now lets come to the main Page (ie. Aspx page) where we are going to use the user
control with editable values.
On the top of the page declare the user control like this
<%@ Register Src="~/UserControls/WelcomeUserControl.ascx" TagName="WelcomeUserControl" TagPrefix="uc1" %>
And then use it in the WebPart Zone of your web part.
<asp:WebPartZone ID="WebPartZone1" runat="server">
<ZoneTemplate>
<uc1:WelcomeUserControl ID="WelcomeUserControl1" runat="server" />
</ZoneTemplate>
</asp:WebPartZone>
The page load event of the page contains some useful declarations.
Page_Load of Main Aspx page...
protected void Page_Load(object sender, EventArgs e)
{
if (WebPartManager1.Personalization.Scope == PersonalizationScope.User)
{
if (WebPartManager1.Personalization.CanEnterSharedScope)
{
WebPartManager1.Personalization.ToggleScope();
}
}
WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode;
WebPartZone1.HeaderText = " ";
}
Also it maintains the ID of the selected webpart for edit.(But this will be helpful
when you are having more than 1 webpartzones on the page).
protected void Page_PreRender(object sender, EventArgs e)
{
if (WebPartManager1.SelectedWebPart != null)
{
Hidden1.Value = WebPartManager1.SelectedWebPart.ID;
}
}
Where Hidden1 is the Asp Hidden control. It is used to maintain the id of the selected
webpart zone.
And here is how your custom Editor part is done.
Also refer to This Article[http://www.developer.com/net/asp/print.php/3627871] for
some theoritical concepts.
Also like the MyText we can declare other properties like color, fonts etc to be
changed.
All the Best..