Try Now
More in this section
Blogs RSS feed

In the mean time series (part 1): "Products" module - simple implementation with enabled tags

by Ivan Osmak

About the series

At the moment our team is being overwhelmed with different tasks, and since updating the Developer’s Manual requires involvement of several different people, I will be patching the missing topics from the developer’s manual here on the blog. As soon as the things get back to normal, the topics will be transferred to the manual and we will continue with the regular updates (and the blog will again become the home of the more unconventional code samples). So the first post of this series is the third post on the roadmap I’ve promised we’ll finish a month or so ago – “Products” module – simple implementation. In case you are not sure what am I talking about you can check out this page of the developer’s manual to refresh your memory.

NOTE: This sample has been created and built with Sitefinity 3.5 Service Pack 1, however it will work normally with 3.5 as well. For users running Sitefinity 3.2 the sample should work as well, though you will need to change the references and implementation of RadControls. You can take a look at the first two samples in the developers manual two see how was the implementation done for 3.2.

“Products” module – simple implementation with enabled tags

Similarly to the categories functionality, tagging functionality is built-in part of the Generic Content module, so we will be able to add it to our products module in few very simple steps. We can divide our task into two subtasks:

  • adding tagging functionality to the admin side and
  • adding tagging functionality to the public side

Let’s start by adding tagging functionality to the admin side of our products module.

Since this article is a sequential part of the series, you should make sure that you have read the first article named Simple implementation and set up your project as it was explained there. I will reference that project throughout this article.

Admin side – tags management

The first thing we want to enable is Tag Management view in the CommandPanel. Take a look at Figure 1 to see what exactly is a Tag Management view.

Figure 1: Tag Management view command in the command panel (left side) and Tag Management View (right side)

First thing we are going to do is edit the CommandPanel template of the Products module and add the markup for the “Tags” link in it. Open following file in your website (if you haven’t set up the products website so far, please read this article on how to do that and come back after you are done):


Now, uncomment the markup for tags, so that these two lines are not commented anymore:
<dt id="tags"><asp:LinkButton ID="tagsView" Text="<%$Resources:Tags %>" runat="server" CausesValidation="false"></asp:LinkButton></dt>  
<dd><asp:Literal ID="Literal2" runat="server" Text="<%$Resources:TagsDescription %>"></asp:Literal></dd>  

Once you are done your CommandPanel template should look like this:
<%@ Register TagPrefix="cc1" Namespace="Telerik.Cms.Web.UI" Assembly="Telerik.Cms.Web.UI" %> 
    <asp:Literal runat="server" Text="<%$Resources:ExploreProducts %>"></asp:Literal></h2>  
<!-- panel which provides User Interface for working with multiple providers in Products module --> 
<div id="providersPanel" runat="server" class="provider SiteMapTools">  
    <cc1:LabelToolTip HelpBoxCssClass="HelpBox" ID="labelHelpBox1" runat="server" LabelMode="true" 
        LabelTargetID="providersList" LabelText="<%$Resources:ChangeGroup %>" ToolTipTitle="<%$Resources:Group %>" 
        ToolTipText="<%$Resources:AboutGroup %>" AlternateText="<%$Resources:AboutGroup %>">  
    <asp:DropDownList ID="providersList" AutoPostBack="true" runat="server">  
<!-- menu with various commands of CommandPanel --> 
<dl id="expMenu">  
    <dt id="all">  
        <asp:LinkButton ID="contentViewButton" Text="<%$Resources:ProductItems %>" runat="server" /> 
        <asp:Literal runat="server" Text="<%$Resources:ControlDescription %>"></asp:Literal> 
    <dt id="cat"><asp:LinkButton ID="categoriesView" Text='<%$Resources:Categories %>' runat="server" CausesValidation="false"></asp:LinkButton></dt>  
    <dd><asp:Literal ID="Literal1" runat="server" Text="<%$Resources:CategoriesDescription %>"></asp:Literal></dd>  
    <dt id="tags"><asp:LinkButton ID="tagsView" Text="<%$Resources:Tags %>" runat="server" CausesValidation="false"></asp:LinkButton></dt>  
    <dd><asp:Literal ID="Literal2" runat="server" Text="<%$Resources:TagsDescription %>"></asp:Literal></dd>  
    <!-- link is commented out because comments are not used in SIMPLE IMPLEMENTATION --> 
            <dt runat="server" id="commentsDt"><asp:LinkButton ID="commentsLink" Text="<%$Resources:Comments %>" runat="server" /></dt>  
            <dd runat="server" id="commentsDd"><asp:Literal runat="server" Text="<%$Resources:CommentsDescription %>"></asp:Literal></dd>  
    <!-- link is commented out because permissions are not used in SIMPLE IMPLEMENTATION --> 
            <dt id="globalPerm"><asp:LinkButton ID="permissionViewButton" Text="<%$Resources:Permissions %>" runat="server" /></dt>  
            <dd><asp:Literal ID="Literal3" runat="server" Text="<%$Resources:PermissionsDescription %>"></asp:Literal></dd>  
Now that we have the controls in our CommandPanel, we need to add the logic for handling the events (in other words, we need to do something when user clicks on the tagsView LinkButton). While, this would generally involve a lot of coding, since we are building a module based on Generic Content, all we have to do in our logic is switch the ControlPanel mode to tags. Open the following file located in the Telerik.Samples.Products project:


The first thing we need to do is go to the Container class and make sure we can get strongly typed reference to our tagsView LinkButton across the class. Add following code to the Container class:
public IButtonControl TagsViewButton  
       if (tagsView == null)  
           tagsView = (IButtonControl) FindRequiredControl<Control>("tagsView");  
       return tagsView;  
IButtonControl tagsView;  
Now, we should go to the CreateChildControls method of the CommandPanel class and attach event handlers to the TagsViewButton. Go to the CreateChildControls method and paste following code there (just above the last line – Controls.Add(container)):
// set up the behavior of TagsViewButton  
container.TagsViewButton.CommandName = "TagsView";  
container.TagsViewButton.Command += button_Command;  
if (container.TagsViewButton is LinkButton && ctrlPnl.Mode == Cms.Engine.WebControls.Admin.ControlPanel.Modes.Tags)  
   ((LinkButton) container.TagsViewButton).CssClass = "sel";  
Basically, what we’ve done here is simply set the command name, command and then some UX stuff to change the css class if the control panel is currently in the tags mode.

The last thing we need to do in the CommandPanel control is to handle the TagsView command. So, find the button_Command event handler and modify it so that in the end it looks like this:
protected virtual void button_Command(object sender, CommandEventArgs e)  
    // based on the command name, set the Mode of ControlPanel  
    ControlPanel ctrlPnl = ((ControlPanel) base.ControlPanel);  
    switch (e.CommandName)  
        case "ContentView":  
            ctrlPnl.Mode = Cms.Engine.WebControls.Admin.ControlPanel.Modes.List;  
        case "CategoriesView":  
            ctrlPnl.Mode = Cms.Engine.WebControls.Admin.ControlPanel.Modes.Categories;  
        case "TagsView":  
            ctrlPnl.Mode = Cms.Engine.WebControls.Admin.ControlPanel.Modes.Tags;  
    // loop through all the buttons, and make the button that sent the command  
    // have "sel" css class  
    foreach (Control ctrl in container.Controls[0].Controls)  
       if (ctrl is LinkButton)  
            LinkButton button = (LinkButton) ctrl;  
            button.CssClass = button.ID == ((LinkButton) sender).ID ? "sel" : "";  

Very simple logic – in case that command name is TagsView – we switch the ControlPanel mode to Tags and refresh the ControlPanel.
Because ControlPanel in Tags mode will use TagsManagement control, we’ll need to paste the template for that control from some other Generic Content based module to our products module. Let’s use Generic_Content module as we have done so far and copy following files:


to following locations respectively:


Admin side – tag editor

We have successfully completed the TagsManagement implementation and now we are left with the implementation of the TagEditor control, which is used in Insert/Edit modes for selecting the tags for particular content item. Take a look at the Figure 2 to see how TagEditor controls look like:

Figure 2: TagEditor control used for tagging particular content item

This control we will need to add at two places: ControlPanelInsert and ControlPanelEdit template of our Products module. Open first this file:


and paste the following code somewhere inside the ContentMetaFields ItemTemplate:
   <asp:Literal ID="Literal7" runat="server" Text="<%$Resources:Tags %>"></asp:Literal> 
<fieldset class="set">  
   <ol class="setIn">  
      <li class="tags">  
          <sfTag:TagEditor ID="tagsControl" runat="server" /> 
<div class="bottom">  
      <!-- --> 

In case you are wondering how did I came up with this markup… it’s simple – I’ve opened the same file in the Generic_Content folder and copied it from there. Do the same thing in this file as well:


Since we will need the template for TagEditor control now as well, let’s copy these two files:


to these locations respectively:


And that completes our work at the admin side. Now, to the the public side:

Public side – setting up TagsList to work with the ProductsView control

Now that we have set up Tags for the products module we can start using TagsList with our ProductsView control. Here is what you need to do:

  • Drag TagsList on the page
  • Set the ProviderName property to Products
  • Point the TaggedContentUrl property to the page which contains ProductsView control
  • Change the TagItemKey to “ProductsTagID”And that’s it. You can observe the templates of other controls to see how are tags utilized there.

The code for this sample can be downloaded from here.

Leave a comment