Adding child views to the View

As it was already said, such requirement was enough to make an adult developer cry prior to Sitefinity 3.6. This kind of development would include building a new module based on Generic Content module, inheriting from dozen of classes and unavoidable nightmares on the upgrades. In Sitefinity 3.6 the solution to this problem is so simple that we will completely solve it by the end of this article.

 

First thing we are going to do is create a new View. As it was described in this article, we can create Views either from User Controls or Custom Controls. For the purpose of this article, we are going to create a View from a User Control. Here are step-by-step instructions on what you need to do to create the View we are going to use.

 

• Create a new folder in the root of your website and name it “Views”
• Add new User Control to this folder and name it “ContentReportingView.ascx” (make sure you tick the “Place code in separate file” checkbox before you add the file)
• Open the code-behind file of this User Control and derive from ViewModeUserControl base class instead from UserControl base class and set the host to GenericControlPanel, since we will be adding this View directly to the root View of the Generic Content module, namely GenericControlPanel. Once you are done, your code behind should look like this:
  

  using System;

  using Telerik.Cms.Web.UI;

  using Telerik.Cms.Engine.WebControls.Admin;

  public partial class Views_ContentReportingView : ViewModeUserControl<GenericControlPanel>

  {

  protected void Page_Load(object sender, EventArgs e)

  {

  }

  }

•  Place some user interface on the User Control to make sure that the View has been loaded when it is supposed to (visual check!). Here is the markup I’ve used for the screenshots above:
  

  <%@ Control Language="C#" AutoEventWireup="true" CodeFile="ContentReportingView.ascx.cs"

  Inherits="Views_ContentReportingView" %>

  <div id="divWorkArea" runat="server" class="workArea insert">

  <div class="mainForm">

  <h3>Authoring statistics</h3>

  <fieldset class="set">

  <ol class="setIn">

  <li>

  <strong>Items count</strong>: 88

  </li>

  <li>

  <strong>Words count</strong>: 22.547

  </li>

  </ol>

  </fieldset>

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

  </div>

  </div>

And we are done with our View. Now the only thing left to do is to “inject” this View somehow in the Generic Content module.

 

*** NOTE ***

 

While the code-behind file and the markup for this sample are intentionally simple, you can make them complex and functional as much as you need. Don’t forget though, that a View should do only one single thing. If you would to develop a complex reporting functionality, you would be best off adding Subviews to the View we’ve built above, thus creating hierarchy. For more on this concept consult this article.

 

*** END NOTE ***

 

Adding a new Subview to an existing View

We are already familiar with one collection of the viewSettings element, namely the additionalTemplates collection which allows us to define multiple templates for the Control or View. Here we are about to learn of the second collection of the viewSettings element: views collection.

 

Views collection of the viewSettings element represents the subviews of the View defined in the hostType property of the viewSettings element. Views collection supports add, remove and clear methods as it is customary with the xml configurations and collections. To achieve our taks of injecting a new View in the Generic Content module we will put following declaration in the Controls Config file: