Digital Experience
Extending Client Component of Field Controls in Sitefinity CMS

Extending Client Component of Field Controls in Sitefinity CMS

by Pavel Benov
Posted on December 11, 2013 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.

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.

Custom Extensibility Field Controls Sitefinity 5.0 Sitefinity 6.0

Pavel Benov

View all posts from Pavel Benov 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.
Follow us viaRSS Feed
 
Topics

Sitefinity Training and Certification Now Available.

Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.

Learn More
More From Progress
 
 
 
Latest Stories
in Your Inbox

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

Loading animation