Using EditorParts for Dynamic/Data Driven WebPart Editors
Having worked with Sharepoint for a few months now I’ve been overwhelmed by the endless amount of XML I’ve had to type in just to package a simple feature to a deployable wsp. And also by the fact that I’m now spending significantly less time writing c# code that I’ve gotten so accustomed to working with. In fact, there seems to be just one particular thing I’m 100% comfortable with in Sharepoint development. Webparts!
Today I’m blogging about web parts and focusing on a particular aspect of web parts. In a customer project I was faced with a user requirement that led me to study on how I can enhance the end user web part editing experience by developing more dynamic web part editors that reflect the underlying data.
Web parts already save you a lot of manual labor by turning web part properties decorated by specific attributes to full-fledged web user interfaces. In more advanced scenarios however, you will soon find out this is still a rather limited feature and leads to poor user experience. Luckily, the folks at Microsoft regognized this and introduced EditorPart abstraction as a base class for developing advanced web part editors.
The Scenario
- User maintains a list of urls that point to other sharepoint lists
- Web part needs to fetch data from those urls
- User needs to be able to select Urls in web part editor
The Implementation
First, you need to define a Web Part property where the user web part settings will be stored. In this case the Urls the user selects from the checkbox list in the web part editor interface. To my surprise you can not only persist simple strings or integers or boolean values but also collections:
[Personalizable(PersonalizationScope.Shared)]
public ArrayList NewsSources { get; set; }
Next up you will have your WebPart class implement the IWebEditable interface:
//create an instance of each custom EditorPart control
//associated with a server control and return them as collection
EditorPartCollection IWebEditable.CreateEditorParts()
{
//Add custom CheckBoxList editor for editing NewsSources Property
List<EditorPart> editors = new List<EditorPart>();
editors.Add(
new NewsFeedsEditorPart { ID="NewsFeedsEditorPart1"});
return new EditorPartCollection(editors);
}
//a reference to the associated server control
object IWebEditable.WebBrowsableObject
{
get { return this; }
}
#endregion
Now we are ready to implement the actual EditorPart.
Implementing the EditorPart
Start up by inheriting from EditorPart class and overriding a few essential methods:
These two methods are the key to making your editor part do its work. In SyncChanges method you set up your Editor Part to reflect the current state of the corresponding web part and when the user presses the save button after editing the web part ApplyChanges is used to bring the values in an EditorPart control back to the WebPart control’s persisted properties.
Let’s go ahead and implement these methods. At this point I’m also going to override a third method which sets up the UI. I do this in CreateChildControls method:
protected override void CreateChildControls()
{
base.CreateChildControls();
newsSourcesCheckBoxList = new CheckBoxList();
Controls.Add(newsSourcesCheckBoxList);
}
Here are the implementations for ApplyChanges and SyncChanges methods:
{
//call to make sure the check box list is set up
EnsureChildControls();
// get a reference to the corresponfing web part
var wb = WebPartToEdit as NewsListWebPart;
if (wb == null) return;
newsSourcesCheckBoxList.Items.Clear();
using (var site = new SPSite("yourUrl"))
{
using (var web = site.OpenWeb())
{
var nList = web.Lists["NewsSourcesList"];
var items = nList.GetItems(new SPQuery());
foreach (SPListItem item in items)
{
string checkBoxLabel = item.Title;
string checkBoxValue =
item["NewsSourceUrl"].ToString();
ListItem listItem =
new ListItem(checkBoxLabel, checkBoxValue);
listItem.Selected =
wb.NewsSources.Contains(item["NewsSourceUrl"])
}
}
}
}
{
//call to make sure the check box list is set up
EnsureChildControls();
var wb = WebPartToEdit as NewsListWebPart;
if (wb == null) return false;
var sources = new ArrayList();
foreach (ListItem item in newsSourcesCheckBoxList.Items)
{
if (item.Selected)
{
sources.Add(item.Value);
}
}
wb.NewsSources = sources;
return true;
}
And we are finished developing our web part with a custom web part editor. The code is very straightforward and can really help you boost up the web part editing user experience.
Popularity: 2% [?]
[...] Using EditorParts for Dynamic/Data Driven WebPart Editors (SharePoint Blues)Having worked with Sharepoint for a few months now I’ve been overwhelmed by the endless amount of XML I’ve had to type in just to package a simple feature to a deployable wsp. And also by the fact that I’m now spending significantly less time writing c# code that I’ve gotten so accustomed to working with. In fact, there seems to be just one particular thing I’m 100% comfortable with in Sharepoint development. Webparts! [...]
Nice Article. If adding Sreen shots that will be good to understand New SP Guys.
Thanks,
venkat
The article is extreamly usefull, thank you for sharing. But, I have a few doubts:
1. The property should be marked as [WebBrowsable(false)], isn’t it?
2. If the property is of type ArrayList, your example does not work! The custom property does not appear in the web part’s panel when in edit mode. If I change the property type from ArrayList to string, everything works as expected.
I did a similar example as yours from msdn. For a property of type string, things work as a charm. When I move to ArrayList, does not work.
Do you have any functional project sample for the ArrayList? Are you sure it’s working with ArrayList also?
Thank you.
Never mind my previous comment… You are totally right! You are supposed to mark it [WebBrowsable(false)], and not [WebBrowsable(true)]. And you are supposed to declare NewsFeedsEditorPart as a public class. This was (logically) the problem.
Again, thank you so much for the article!
http://www.sharepointblues.com/2010/06/28/sharepoint-2010-ajax-panel-in-web-part%E2%80%99s-editor-part/ is also great!
Hello Diana. Glad to know you found my article useful.
Cheers
Erkka
It would be great if you can post the source code for use Sharepoint newbies. I tried the code in your blog and it does not work for me. It compiles and I can deploy it, but I don’t see the controls in the Editor Menu.
Eventually, I found the following tutorial working for me: http://www.dmcinfo.com/blog.aspx/articleType/ArticleView/articleId/263/Custom-Editor-Parts-in-SharePoint-2010.aspx
“Nice Article. If adding Sreen shots that will be good to understand New SP Guys.
Thanks,”
If some one needs to be updated with most recent technologies afterward he must be pay a visit this
web page and be up to date every day.