Filtering dynamic items by custom taxonomy in the front end

Filtering dynamic items by custom taxonomy in the front end

August 29, 2012 0 Comments

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.

Since the release of the Module Builder we have received number of requests how to filter items by custom taxonomy from the generated widget. Here I am going to show how with very little custom implementation this can be achieved.

First we need to have a dynamic module with a custom classification field, for instance Countries. Refer to Sitefinity documentation how to create one.

All we are going to do is to add a section to the widget designer template that will handle selecting custom taxonomies by which the content is going to be filtered and after that we will register the new widget designer in the settings.

Get the template “DynamicContentSelectorsDesignerView.ascx” that I have attached to this post and add it to your project. In my case I have a folder “Templates” in which the template is copied. Then edit the template as follows:

If you have a hierarchical taxonomy add this “designers” element:

<designers:FilterSelectorItem ID="FilterSelectorItem4" runat="server" Text="By Custom Classification"
                    GroupLogicalOperator="AND" ItemLogicalOperator="OR" ConditionOperator="Contains"
                    QueryDataName="fieldname" QueryFieldName="fieldname" QueryFieldType="System.Guid">
                    <SelectorResultView>
                        <sitefinity:HierarchicalTaxonSelectorResultView ID="HierarchicalTaxonSelectorResultView2" runat="server" TaxonomyId="xxxxx-xxxx-xxxxx-xxxx-xxxx" WebServiceUrl="~/Sitefinity/Services/Taxonomies/HierarchicalTaxon.svc"
                            AllowMultipleSelection="true" HierarchicalTreeRootBindModeEnabled="false">
                        </sitefinity:HierarchicalTaxonSelectorResultView>
                    </SelectorResultView>
                </designers:FilterSelectorItem>
If you have a flat taxonomy use the following designer:


<designers:FilterSelectorItem ID="FilterSelectorItem4" runat="server" Text="By Geographic Region"
                    GroupLogicalOperator="AND" ItemLogicalOperator="OR" ConditionOperator="Contains"
                    QueryDataName="fieldname" QueryFieldName="fieldname" QueryFieldType="System.Guid">
                    <SelectorResultView>
                        <sitefinity:FlatTaxonSelectorResultView ID="FlatTaxonSelectorResultView1" runat="server" TaxonomyId="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" WebServiceUrl="~/Sitefinity/Services/Taxonomies/FlatTaxon.svc"
                            AllowMultipleSelection="true">
                        </sitefinity:FlatTaxonSelectorResultView>
                    </SelectorResultView>
                </designers:FilterSelectorItem>

Note that the value for TaxonomyId is unique for every application. The easiest way to find it is to add categories widget to a page, edit the widget, delete the value in TaxonomyId field and save then the GUIDs of all of the taxonomies in your application will appear.

QueryDataName and QueryFieldName are the name of the content type taxonomy field. You can find it by editing opening your content type for edit. Just copy the name of the taxonomy field in your module and add it as a value to these properties.
Then go to Sitefinity backend -> Administration -> Settings -> Advanced -> Controls -> ViewMap  and create a new one with the following values:

HostType: Telerik.Sitefinity.Web.UI.ControlDesign.DynamicContentSelectorsDesignerView 

LayoutTemplatePath: ~/Templates/DynamicContentSelectorsDesignerView.ascx (the path to the template)

Save and restart your application. Go to pages, add the dynamic content type widget to a page, edit it and you can see that there is a selector for your custom taxonomy. Select some taxons, save and you can view that only items with that taxon are displayed.

Here is the template that should be used.

progress-logo

The Progress Team

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.

Comments
Comments are disabled in preview mode.
Topics
Latest Stories
in Your Inbox

Subscribe to get all the news, info and tutorials you need to build better business apps and sites

More From Progress
progress-next-logo
ProgressNEXT: Premier Event for Modern Application Development
Read More
 
sitefinity-11-1-webinar
Seven Reasons to Check Out Sitefinity 11.1
Read More
 
omnichannel
Getting Started with Your Omnichannel Content Strategy
Read More