October 25, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Writing Custom Editors for WebParts

  • August 23, 2006
  • By Sahil Malik
  • Send Email »
  • More Articles »

Using the Custom Editor

To use the custom editor, set up a Web site in Visual Studio 2005 and add a reference to the class library that holds your WebPart and its EditorPart. You will have to perform the additional setup steps for the telerik r.a.d. control as well. This includes copying the ToolsFile.xml, the RadControls directory, and the various references. (For more help, see www.telerik.com.) Of course, you are not limited to using only the telerik control; you can use anything that will run in ASP.NET 2.0.

In the default.aspx, add a WebPartManager, two WebPartZones, an EditorZone, and a CatalogZone. Inside the CatalogZone's ZoneTemplate, add a DeclarativeCatalogPart. Inside the DeclarativeCatalogPart's WebPartsTemplate, add an instance of your SimpleWebPart. The changes to the default.aspx should look as follows:

<asp:WebPartManager  ="WebPartManager1" runat="server" />
<asp:WebPartZone     ="WebPartZone1"    runat="server" />
<asp:WebPartZone ID  ="WebPartZone2"    runat="server" />
<asp:CatalogZone ID  ="CatalogZone1"    runat="server">
   <ZoneTemplate>
      <asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1"
                                  runat="server">
         <WebPartsTemplate>
            <cc1:SimpleWebPart ID="SimpleWebPart1" runat="server">
            </cc1:SimpleWebPart>
         </WebPartsTemplate>
      </asp:DeclarativeCatalogPart>
   </ZoneTemplate>
</asp:CatalogZone>
<asp:EditorZone ID="EditorZone1" runat="server">
   <ZoneTemplate>
      <asp:PropertyGridEditorPart ID="PropertyGridEditorPart1"
                                  runat="server"/>
   </ZoneTemplate>
</asp:EditorZone>

With this set up, add three link buttons at the bottom of the page. These link buttons will set the appropriate display mode for the WebPartManager. The following is the aspx code for the link buttons:

<asp:LinkButton ID="Edit" runat="server"
                OnClick="Edit_Click">Edit</asp:LinkButton> |
<asp:LinkButton ID="Catalog" runat="server"
                OnClick="Catalog_Click">Catalog</asp:LinkButton> |
<asp:LinkButton ID="Browse" runat="server"
                OnClick="Browse_Click">Browse</asp:LinkButton>

Here is the code-behind for these:

protected void Edit_Click(object sender, EventArgs e)
{
   WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode;
   }
protected void Catalog_Click(object sender, EventArgs e)
{
   WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode;
}
protected void Browse_Click(object sender, EventArgs e)
{
   WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;
}

That's it. Press "F5" and run the Web application.

To begin with, you should see a UI like this:

Click the "Catalog" button to view the only control you added in the catalog. Select its checkbox and add an instance to WebPartZone1, as shown below:

The control should now show its default value. Click the "Edit" link button at the bottom of the page. The catalog should now disappear, and the WebParts and WebPartZones should be visible. The SimpleWebPart instance that you just added to the WebPartZone1 should have a tiny down-facing arrow right next to it. Clicking on that arrow displays a menu. Click on that arrow, and select "Edit" from the drop down menu as shown below:

By doing so, you will be able to see the r.a.d. editor in the EditorZone as shown here:

Just to be fancy, go to this link and copy and paste a nice looking area of that page into the rich HTML editor. Click "OK" to make your changes permanent, and then click on the "Browse" link button to view the page in action. You should see something like this:

Thus, you now have much more flexibility and the ease of editing the HTML displayed in your SimpleWebPart.

Feel free to experiment a bit more with this framework, and add further EditorParts that come in-built with the .NET 2.0 Framework. One such EditorPart that you may wish to add is the AppearanceEditorPart. You then could give a custom title to the content block you just created, or simply get rid of its title. You also can add further personalization options in the framework, tie the Web application with a sitemap and a URL rewriter, and get a quick-and-dirty content management solution that lacks any kind of workflow but enables you to set up and create an easily maintainable Web site rather cheaply.

Write Custom Editors for Your Various WebParts

Custom editors, along with WebParts, provide you with a fantastic set of building blocks for producing final solutions. You probably will need to write custom editors for your various WebParts in many scenarios. A simple task such as entering a date or time can be very error prone if the user is typing into a textbox. The task would be much smoother for the user if you leveraged one of the many standard third-party controls that can display a calendar or time picker on a Web page.

SharePoint 2007 will understand your editor parts just as easily as it understands your ASP.NET 2.0 WebParts. As long as you follow the security and deployment steps that SharePoint 2007 requires, it will automatically discover your custom editors and be show them in its EditorZone.

About the Author

Sahil Malik (www.winsmarts.com) has worked for a number of top-notch clients in Microsoft technologies ranging from DOS to .NET. He is the author of Pro ADO.NET 2.0 and co-author of Pro ADO.NET with VB.NET 1.1. Sahil is currently also working on a multimedia series on ADO.NET 2.0 for Keystone Learning. For his community involvement, contributions, and speaking, he has also been awarded the Microsoft MVP award.





Page 2 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel