Extending Client Component of Field Controls in Sitefinity CMS

Extending Client Component of Field Controls in Sitefinity CMS

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.

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.
Topics
 
 
Latest Stories in
Your Inbox
Subscribe
More From Progress
New_Mobile_Dev_Ebook_Progress_Website_Thumbail
The New Mobile Development Landscape
Download Whitepaper
 
IDC Spotlight Sitefinity Thumbnail
Choosing the Right Digital Experience Platform to Improve Business Outcomes
Download Whitepaper
 
TheFastestWayToBuildMobileAppsArtboard-2
The Fastest Way to Build Mobile Apps With Cloud Data
Watch Webinar