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

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):

~/Sitefinity/Admin/ControlTemplates/Products/CommandPanel.ascx

Now, uncomment the markup for tags, so that these two lines are not commented anymore:

Once you are done your CommandPanel template should look like this:
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:

Telerik.Samples.Products.WebControls.Admin.CommandPanel

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:
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)):
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:

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:

~/Sitefinity/Admin/ControlTemplates/Generic_Content/TagsManagement.ascx
~/Sitefinity/Admin/ControlTemplates/Generic_Content/App_LocalResources/TagsManagement.ascx.resx
~/Sitefinity/Admin/ControlTemplates/Genetic_Content/App_LocalResources/GenericContentTagsFAQText.txt

to following locations respectively:

~/Sitefinity/Admin/ControlTemplates/Products/
~/Sitefinity/Admin/ControlTemplates/Products/App_LocalResources
~/Sitefinity/Admin/ControlTemplates/Products/App_LocalResources

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:

~/Sitefinity/Admin/ControlTemplates/Products/ControlPanelInsert.ascx

and paste the following code somewhere inside the ContentMetaFields ItemTemplate:

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:

~/Sitefinity/Admin/ControlTemplates/Products/ControlPanelEdit.ascx

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

~/Sitefinity/Admin/ControlTemplates/Generic_Content/TagEditor.ascx
~/Sitefinity/Admin/ControlTemplates/Generic_Content/App_LocalResources/TagEditor.ascx.resx

to these locations respectively:

~/Sitefinity/Admin/ControlTemplate/Products/
~/Sitefinity/Admin/ControlTemplates/Products/App_LocalResources/

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.