+1-888-365-2779
Try Now
More in this section
Categories
Bloggers
Blogs RSS feed

Creating custom sidebar widgets

by Radoslav Georgiev

This blog post, as many others, is inspired by a client support request. I've decided to put post it, so others can use the code to create their own sidebar widgets for their custom modules. In this post I am going to sample how you can extend a built in command widget to add new functionality to it, and make it filter by something which is not part of the out of the box functionality. For convenience, please refer to the ProductsCatalogSample module which is distributed with the Sitefinity SDK

Implementing the custom widget

I've decided to extend the DynamicCommandWidget class which allows you to bind a datasource such as collection of categories and display them on the side bar. Then you can filter for your items based on desired filter expression.

Implement the server-side class.

First we need to create our custom widget class. The only difference with the built in one is that we are going to add an extra JavaScript file reference to execute our custom logic:

 

using System;
using System.Collections.Generic;
using System.Web.UI;
using Telerik.Sitefinity.Web.UI.Backend.Elements.Widgets;
 
namespace ProductCatalogSample.Web.UI
{
    class CustomDynamicCommandWidget : DynamicCommandWidget
    {
        protected override Type ResourcesAssemblyInfo
        {
            get
            {
                return typeof(DynamicCommandWidget);
            }
        }
 
        public override IEnumerable<System.Web.UI.ScriptReference> GetScriptReferences()
        {
            var widgetInterfaceScript = new ScriptReference
            {
                Assembly = typeof(IWidget).Assembly.FullName,
                Name = Scripts.IWidget
            };
            var commandWidgetInterfaceScript = new ScriptReference
            {
                Assembly = typeof(DynamicCommandWidget).Assembly.FullName,
                Name = Scripts.ICommandWidget
            };
            var commandWidgetScript = new ScriptReference
            {
                Assembly = typeof(DynamicCommandWidget).Assembly.FullName,
                Name = Scripts.DynamicCommandWidget
            };          
            //register the custom script
            var customCommandWidgetScript = new ScriptReference
            {
                Assembly = typeof(CustomDynamicCommandWidget).Assembly.FullName,
                Name = Scripts.CustomDynamicCommandWidget
            };
            return new ScriptReference[] { widgetInterfaceScript, commandWidgetInterfaceScript, commandWidgetScript, customCommandWidgetScript };
        }
         
        internal struct Scripts
        {
            public const string IWidget = "Telerik.Sitefinity.Web.SitefinityJS.UI.IWidget.js";
            public const string ICommandWidget = "Telerik.Sitefinity.Web.SitefinityJS.UI.ICommandWidget.js";
            public const string DynamicCommandWidget = "Telerik.Sitefinity.Web.UI.Backend.Elements.Widgets.Scripts.DynamicCommandWidget.js";
            public const string CustomDynamicCommandWidget = "ProductCatalogSample.Web.UI.CustomDynamicCommandWidget.js";
        }
    }
}

Implement the client-side component

After we have implemented the server-side class we need to add our custom filtering functionality to the client-side component (CustomDynamicCommandWidget.js). There is a built in method which handles item commands and we are simply going to override it:

 

/// <reference name="MicrosoftAjax.js"/>
/// <reference name="Telerik.Sitefinity.Resources.Scripts.jquery-1.4.2-vsdoc.js" assembly="Telerik.Sitefinity.Resources"/>
Type.registerNamespace("ProductCatalogSample.Web.UI");
 
ProductCatalogSample.Web.UI.CustomDynamicCommandWidget = function (element) {
    ProductCatalogSample.Web.UI.CustomDynamicCommandWidget.initializeBase(this, [element]);
}
 
ProductCatalogSample.Web.UI.CustomDynamicCommandWidget.prototype =
{
    initialize: function () {
        ProductCatalogSample.Web.UI.CustomDynamicCommandWidget.callBaseMethod(this, "initialize");
    },
 
    dispose: function () {
        ProductCatalogSample.Web.UI.CustomDynamicCommandWidget.callBaseMethod(this, "dispose");
    },
 
    _binderCommandHandler: function (sender, args) {
        var commandEventArgs = new Telerik.Sitefinity.UI.CommandEventArgs(this._commandName, { 'filterExpression': this.getCategoriesFilterExpression() });
        //send a filtering command ot our grid view to fitler by the selected checkboxes
        //if there are no selected checkboxes the filtering expression will be empty string showing all items
        var h = this.get_events().getHandler('command');
        if (h) h(this, commandEventArgs);
    },
 
    getCategoriesFilterExpression: function () {
        var selectedItems = jQuery("input.sf_binderCommand_filterByCategory:checked");
        var expression = '';
        //get selected checkboxes and cosntruct the filter expression
        if (selectedItems.length > 0) {
            for (var i = 0; i < selectedItems.length; i++) {
                if (i == 0)
                    expression = expression + 'Category.Contains((' + selectedItems[i].value + '))';
                else
                    expression = expression + 'OR Category.Contains((' + selectedItems[i].value + '))';
            }
        }
        return expression;
    }
}
 

ProductCatalogSample.Web.UI.CustomDynamicCommandWidget.registerClass("ProductCatalogSample.Web.UI.CustomDynamicCommandWidget", Telerik.Sitefinity.Web.UI.Backend.Elements.Widgets.DynamicCommandWidget, Telerik.Sitefinity.UI.ICommandWidget, Telerik.Sitefinity.UI.IWidget);

 

Implement grid view extension script

Since we are building a custom type widget we need to explicitly tell the grid view in our backend items list to bind the widget with our datasource (CustomDynamicCommandWidgetExtensionScript.js). We need to get the sidebar and find our widget. Then bind it:

 

function OnMasterViewLoaded(sender, args) {
    if (sender.get_sidebar()) {
        var widgetsInSidebar = sender.get_sidebar()._widgets;
        if (widgetsInSidebar) {
            for (var i = 0; i < widgetsInSidebar.length; i++) {
                if (Object.getTypeName(widgetsInSidebar[i]) == "ProductCatalogSample.Web.UI.CustomDynamicCommandWidget") {
                    widgetsInSidebar[i].dataBind();
                }
            }
        }
    }
}

 

Regsiter scripts with the assembly

When we are done with the client-side component and the extension script we need to register them as embedded resources in the AssemblyInfo class of our code library project:

[assembly: WebResource("ProductCatalogSample.Web.UI.CustomDynamicCommandWidget.js","text/javascript")]
[assembly: WebResource("ProductCatalogSample.Web.UI.CustomDynamicCommandWidgetExtensionScript.js", "text/javascript")]
 

Set the custom module to use the command widget

All configurations of the backend of your modules are done through the module's definition class. We need to register the extension script and our custom command widget. Since we are working with the ProductsCatalogSample project we need to edit the ProductsDefinitions class.

Register the extension script

This is done in the DefineProductsBackendContentView method where the grid view is defined:

    #region external scripts
 
    var scripts = new Dictionary<string, string>();
 
    scripts.Add(
        string.Format("{0}, {1}",
        ProductsDefinitions.CustomDynamicCommandWidgetExtensionScript,typeof(ProductsModule).Assembly.FullName),
        "OnMasterViewLoaded");
 
    productsGridView.ExternalClientScripts = scripts;
 
    #endregion
public const string CustomDynamicCommandWidgetExtensionScript = "ProductCatalogSample.Web.UI.CustomDynamicCommandWidgetExtensionScript.js";

Configure the custom dynamic command widget

We need to substitute the built in dynamic command widget definition for filtering by categories with the custom one. Find where the dynamic command widget for categories is registered in the ProductDefinitions class and amend it to be as bellow:

var categoryFilterWidget = new DynamicCommandWidgetElement(categoryFilterSection.Items)
{
    Name = "CategoryFilter",
    CommandName = "filter",
    PageSize = 10,
    WidgetType = typeof(CustomDynamicCommandWidget),
    IsSeparator = false,
    BindTo = BindCommandListTo.HierarchicalData,
    BaseServiceUrl = String.Format("~/Sitefinity/Services/Taxonomies/HierarchicalTaxon.svc/{0}/", TaxonomyManager.CategoriesTaxonomyId),
    ChildItemsServiceUrl = "~/Sitefinity/Services/Taxonomies/HierarchicalTaxon.svc/subtaxa/",
    PredecessorServiceUrl = "~/Sitefinity/Services/Taxonomies/HierarchicalTaxon.svc/predecessor/",
    ClientItemTemplate = @" <input type='checkbox' class='sf_binderCommand_filterByCategory' sys:value='{{ Id }}'>{{ Title }}</input> <span class='sfCount'>({{ItemsCount}})</span>"
};

Finally build the project and see the result.

 

2 comments

Leave a comment
  1. Dan Sovrea Mar 05, 2012
    The download link at the bottom of your article is broken.
  2. Anthony Feb 18, 2016
    How can this be done for a built in content type like comments?

    Leave a comment