Working with ContentViewDesigners (part 6): Implementing a custom designer

We’ve arrived at the end of ContentViewDesigner series. The last post in the series will explain how to implement a custom designer. Many of you may have noticed that while I keep talking about ContentViewDesigners, the ContentView control itself does not have a designer. In this post we are going to remedy that.

MyContentView control – enhanced version of ContentView control with implemented designer

Since designers are defined as an attribute of the class, we will need to make our own custom implementation of ContentView control. This however will be a trivial thing to do. Add App_Code folder to your application if it’s not already there and then inside of it, add new class MyContentView.cs. The code for this class should look like this:

As you can see, the class itself inherits from ContentView and we do not change anything in its behavior except that we have added the ControlDesigner attribute to point to our implementation of the designer. Before we move on, let’s also add this control in Sitefinity toolbox by opening web.config and pasting following line in the telerik/csm/toolboxControls section:

MyContentViewDesigner – custom designer implementation for MyContentView control

As we have declared the designer for MyContentView in the previous paragraph, now it is time to implement it. Add a class to your App_Code folder and name it MyContentViewDesigner.cs. The code for this class should look like this:

Again, the implementation is trivial. All that we had to do is to inherit from ContentViewDesignerBase and override the designer template path.

Implementing the template for MyContentViewDesigner

We haven’t even started and we are almost done. The last thing that we need to do in order to get our designer up and running is to define a designer template. You may remember from the previous posts in this series that this is actually where the magic happens. Since the markup for the designer template is rather complex (in the current version, we will simplify this greatly in the versions to come) the easiest thing to do is simply to copy the markup from one of the already existing designers and then modify it to fit our needs. In this example I have copied the news designer template, located here:

~/Sitefinity/Admin/ControlTemplates/News/Design/NewsViewControlDesigner.ascx

So, as per the specified path in the previous paragraph – create a new folder in the root of your website, name it “MyTemplates” and inside of it create a new user control which you should name “MyContentViewDesigner.ascx”. In this user control paste the markup from the NewsView designer and modify it as you wish – to reflect the designer you want to have for the MyContentView control. I have done several changes and this is how my modified designer template looks when I was done:

Nothing special as you can see. I’ve renamed my mode and changed some of its settings. Removed some of the settings I didn’t need, as well as the behavior setting. I believe most of the properties are self-explanatory so I won’t go into details here. You can experiment and see what happens.

The code used in this example you can download from here.

Conclusion

This post ends our six-part series on ContentView designers. I hope I was able to explain the most important concepts and that you will have no problems while creating or modifying your ContentViewDesigners. If you have a question, or if you think I haven’t covered something – let me know and I’ll try to do it in a timely manner. In the next posts I will be covering the FilterExpression property and ContentFilterBuilder class. I’ll talk about current implementation, motivation behind it and how will this area evolve in the future releases.

Hope you had fun with this series.