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

Extending Client Component of Field Controls in Sitefinity CMS

by Pavel Benov

Recently more and more people request to extend the client component (the Javascript) of the built-in field controls in Sitefinity for various reasons, so in this short post I will try to explain the basic ways to do this. 

For the purpose of this demo I will take the FlatTaxonField and try to filter the taxa collection displayed when an item is created/ edited. In order to pass my custom script that will do the filtering I will need to override the GetScriptReferences() method of the control’s class:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Sitefinity.Security;
using Telerik.Sitefinity.Security.Model;
using Telerik.Sitefinity.Model;
using Telerik.Sitefinity.Utilities.TypeConverters;
using Telerik.Sitefinity.Web.UI;
using Telerik.Sitefinity.Web.UI.Fields;
using Telerik.Sitefinity.Web.UI.Fields.Contracts;
using Telerik.Web.UI;
namespace SitefinityWebApp
{
    public class CustomFlatTaxonField : FlatTaxonField
    {
 
        protected override void InitializeControls(GenericContainer container)
        {
           //We need to also pass the taxonomy id (may vary on your end) and the web service url
            this.TaxonomyId = new Guid("CB0F3A19-A211-48A7-88EC-77495C0F5374");
            this.WebServiceUrl = "~/Sitefinity/Services/Taxonomies/FlatTaxon.svc/"+TaxonomyId.ToString();
            base.InitializeControls(container);
        }
 
        protected override Label TaxonomyTitle
        {
            get
            {
                return base.TaxonomyTitle;
            }
        }
        public override ITemplate LayoutTemplate
        {
            get
            {
                return base.LayoutTemplate;
            }
            set
            {
                base.LayoutTemplate = value;
            }
        }
        public override IEnumerable<ScriptReference> GetScriptReferences()
        {
            var scripts = new List<ScriptReference>(base.GetScriptReferences());
            scripts.Add(new ScriptReference(CustomFlatTaxonField.ScriptReference, typeof(CustomFlatTaxonField).Assembly.FullName));
            return scripts;
        }
        public static readonly string ScriptReference = "SitefinityWebApp.CustomFlatTaxonField.js";
 
    }
}

Next thing to do is to create the custom Javascript CustomFlatTaxonField.js and set its build action to Embedded Resource.

Now it’s time to extend the base  Javascript  and plug in our own logic to it. To do so we use the following snippet and just replace the namespaces and classes:

Type.registerNamespace("mynamespace");
 
mynamespace.mycontrol = function (element) {
    mynamespace.mycontrol.initializeBase(this, [element]);
}
 
mynamespace.mycontrol.prototype = {
    initialize: function () {
        mynamespace.mycontrol.callBaseMethod(this, 'initialize');
    },
    dispose: function () {
        mynamespace.mycontrol.callBaseMethod(this, 'dispose');
    }
}
 
mynamespace.mycontrol.registerClass('mynamespace.mycontrol', Sys.UI.Control);

One important thing to note here is the Sys.UI.Control which should be the type of the control we are inheriting from. So after replacing all the values we end up with the following Javascript:

Type.registerNamespace("SitefinityWebApp ");
 
SitefinityWebApp. CustomFlatTaxonField = function (element) {
    SitefinityWebApp. CustomFlatTaxonField.initializeBase(this, [element]);
}
 
SitefinityWebApp. CustomFlatTaxonField.prototype = {
    initialize: function () {
        SitefinityWebApp. CustomFlatTaxonField.callBaseMethod(this, 'initialize');
    },
    dispose: function () {
        SitefinityWebApp. CustomFlatTaxonField.callBaseMethod(this, 'dispose');
    }
}
 
SitefinityWebApp. CustomFlatTaxonField.registerClass(SitefinityWebApp. CustomFlatTaxonField, Telerik.Sitefinity.Web.UI.Fields.FlatTaxonField);

Now we are ready to plug in our custom logic to the client component. As I have already said I am going to filter the collection of flat taxa showed by the control, so what better way to do it than using the filterExpression of the taxon binder? I plug in my logic to the already existing function _bindMostPopularExistingTaxa and set the filterExpression, right after the dispose function:

_bindMostPopularExistingTaxa: function () {
        this._mostPopularTaxonsBound = true;
        this._allTaxonsBound = false;
        $(this._openingExistingLoader).show();
        this._existingTaxaBinder.set_take(30);
        this._existingTaxaBinder._filterExpression = "(Title.Contains(\"TestTaxonTitle\"))"    this._existingTaxaBinder.DataBind();
    }

 

Now build the solution and you can use the CustomFlatTaxonField throughout the modules in Sitefinity. Let’s say you want to use this functionality for the News module’s Tags. Go to Administration->Settings->Advanced->News->Controls->NewsBackend->Views->NewsBackendInsert->Sections->TaxonSection->Fields->Tags. Just change the default field type with the type of the CustomFlatTaxonField and save. Do the same for NewsBackendEdit view and then restart the application so that the new control can be initialized with the view and test it out. Registering the control for any other module is analogical to the above.

You can either extend the already existing functions, or you can write your own logic that handles any custom controls you might have added to the control template. 

Here is an archive with 2 sample controls - 1 from the above example and the other (DateField), using the same technique to set timing in a 12-hour format.

I hope you find this helpful.

2 comments

Leave a comment
  1. Nazim Oct 29, 2014

    I followed your blog and register my CustomFlatTaxonField in Sitefinty as you said.

    FieldType
    SitefinityWebApp.Taxonomy.ClientCompnentofFieldControl

    When I create new New it show me that your namespace is not registor.

    Error
    ContentViewInsertDialog:1925 (File where error found)

    $create(SitefinityWebApp.Taxonomy.ClientCompnentofFieldControl,.......

  2. Pavel Oct 29, 2014

    Hey Nazim,

    Did you set the .js script's Build action to Embedded resource? If not please give this a try, recompile and see if it fixes the problem.


    Leave a comment