The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.
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.
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:
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.
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)
<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> |
<%@ Register TagPrefix="cc1" Namespace="Telerik.Cms.Web.UI" Assembly="Telerik.Cms.Web.UI" %> |
<h2> |
<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 %>"> |
</cc1:LabelToolTip> |
<asp:DropDownList ID="providersList" AutoPostBack="true" runat="server"> |
</asp:DropDownList> |
</div> |
<!-- menu with various commands of CommandPanel --> |
<dl id="expMenu"> |
<dt id="all"> |
<asp:LinkButton ID="contentViewButton" Text="<%$Resources:ProductItems %>" runat="server" /> |
</dt> |
<dd> |
<asp:Literal runat="server" Text="<%$Resources:ControlDescription %>"></asp:Literal> |
</dd> |
<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> |
--> |
</dl> |
public IButtonControl TagsViewButton |
{ |
get |
{ |
if (tagsView == null) |
tagsView = (IButtonControl) FindRequiredControl<Control>("tagsView"); |
return tagsView; |
} |
} |
IButtonControl tagsView; |
// 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"; |
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; |
ctrlPnl.Refresh(); |
break; |
case "CategoriesView": |
ctrlPnl.Mode = Cms.Engine.WebControls.Admin.ControlPanel.Modes.Categories; |
ctrlPnl.Refresh(); |
break; |
case "TagsView": |
ctrlPnl.Mode = Cms.Engine.WebControls.Admin.ControlPanel.Modes.Tags; |
ctrlPnl.Refresh(); |
break; |
} |
// 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:
~/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
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
<h3> |
<asp:Literal ID="Literal7" runat="server" Text="<%$Resources:Tags %>"></asp:Literal> |
</h3> |
<fieldset class="set"> |
<ol class="setIn"> |
<li class="tags"> |
<sfTag:TagEditor ID="tagsControl" runat="server" /> |
</li> |
</ol> |
</fieldset> |
<div class="bottom"> |
<div> |
<!-- --> |
</div> |
</div> |
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:
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:
The code for this sample can be downloaded from here.
View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.
Learn MoreSubscribe to get all the news, info and tutorials you need to build better business apps and sites
Progress collects the Personal Information set out in our Privacy Policy and the Supplemental Privacy notice for residents of California and other US States and uses it for the purposes stated in that policy.
You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.