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.
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.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.
Learn MoreSubscribe to get all the news, info and tutorials you need to build better business apps and sites
Progress collects the Personal Information set out in our Privacy Policy and the Supplemental Privacy notice for residents of California and other US States and uses it for the purposes stated in that policy.
You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.