Products module: Adding new features to Generic Content module

[This post is part of the developer's manual preview published on this blog. You can find temporary TOC here.]

 

In the previous post we have examined our possibilities for removing the unneeded functionality from the base Generic Content module. More often than not, however, we will need to add new functionality on top of the one provided in the base module.

 

Conceptually speaking, this is a tremendously simple task: we only need to add new Views. Once you have reused all the needed functionality, adding new functionality is like building a new module, except that you have of course saved yourself few months of work already.

 

To illustrate this approach we will take a look at the sample products module and see how we could add a feature for managing customers that buy products. Note that in this article we are going to examine only the approach and won’t implement the actual feature (such as UI, data persistence or business logic).

 

Our task is best illustrated by the following screenshot:

 

As you can see, all our reused Views are present, such as:

• Products
• Categories
• Tags
• Comments and
• Permissions

However, we have decided to extend our application furthermore - with the customer management feature. Adding new functionality is nothing more than adding a View to the host which we have already described in this article, however we will apply that knowledge in a different context this time.

 

*** BEGIN NOTE ***

 

You may have noticed that good number of articles regarding the new backend architecture is actually demonstrating techniques that were explained in the overview of this topic. We believe that this fact is one of the biggest strengths of the new architecture. Namely, the basic concepts of the new architecture can be learned in several hours. From that point on, you will be developing solutions simply by applying these few fundamental approaches in different ways. That of course provides for a very flat learning curve as well as for the great reuse of the knowledge you already acquired.

 

*** END NOTE ***

 

In order to add new functionality to your Generic Content based module, all you need to do is create a new View and add it to the existing hierarchy. We can start by creating a new template for our CustomersView.

 

Creating an embedded template for the CustomersView

• Add new file to Telerik.Samples.Products.Resources.ControlTemplatesBackend and name it CustomersView.ascx (actually, Visual Studio will not offer you User Control in the New Item Dialog, so you can just copy and paste one of the existing items and then rename it).
• Make sure that the Build Action of the CustomersView.ascx file is set to Embedded Resource (right click on the file and select properties to set the Build Action).
• Paste following markup in the template:
  

  <%@ Control Language="C#" %>

  <%@ Register TagPrefix="sf" Namespace="Telerik.Cms.Web.UI" Assembly="Telerik.Cms.Web.UI" %>

  <div class="ToolsAll">

  <asp:PlaceHolder ID="fullWindow" runat="server">

  </asp:PlaceHolder>

  <div class="clear"><!-- --></div>

  </div>

  <div class="workArea">

  <h2>Customers view</h2>

  </div>

Implementing the CustomersView class

Now, that our template is ready, next thing we should do is implement the View. In our example, the View will simply set the template, however, in a real world scenario this is where you would implement your UI and business logic (e.g. handling the events, adding child views - such as “EditCustomerView”, “PreviewCustomerView”, “CustomerOrdersView” and so on).

• Add a new class to the Telerik.Samples.Products.WebControls.Admin and name it CustomersView
• Once implemented, your class should look like this:
  

  using Telerik.Cms.Web.UI;

  namespace Telerik.Samples.Products.WebControls.Admin

  {

  /// <summary>

  /// View for managing customers

  /// </summary>

  public class CustomersView : ViewModeControl<ProductsControlPanel>

  {

  #region Properties

  [WebSysTemplate(CustomersView.customersViewTemplateName, "Products_Customers_Template", "/Products", false, "2009-03-23")]

  public override string LayoutTemplatePath

  {

  get { return base.LayoutTemplatePath; }

  set { base.LayoutTemplatePath = value; }

  }

  protected override string LayoutTemplateName

  {

  get { return CustomersView.customersViewTemplateName; }

  }

  #endregion

  #region Private fields

  private const string customersViewTemplateName = "Telerik.Samples.Products.Resources.ControlTemplates.Backend.CustomersView.ascx";

  #endregion

  }

  }

As you can see, all we’ve done is inherited from ViewModeControl and specified that ProductsControlPanel will be the host of this View. We’ve also specified the template we’ve created in the first step as the template of this View.

 

The final piece of the puzzle is to add this View to the existing View hierarchy of our Products module.

 

Adding View to the View hierarchy

Having in mind that we wish the CustomersView to be accessible through the automatically generated CommandPanel we will add the View in the ProductsControlPanel. All we need to do is call the AddView method inside of the CreateViews method in the ProductsControlPanel class. The CreateViews method should look like this after we have added the View:

 

Conclusion

Once again, this article did not provide us with any new knowledge, but simply demonstrated how to use new backend architecture and Views to extend an existing module with a completely new functionality.