Filtering dynamic items by custom taxonomy in the front end

August 29, 2012 Digital Experience
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.

The Progress Team