Custom Field in Module Builder

Posted by Community Admin on 29-Feb-2012 00:00

Hi there,

We are trying to build a custom module with dynamic drop down list of image libraries.
I followed the following thread:
www.sitefinity.com/.../extend_the_image_selector_for_content_items_with_filtering_by_album.aspx

from there I added a drop down list class, definition class and element class.
I went the Sitefinity backend and created a new module inside the module builder and I added a custom field with my control. When I tried to activate the module I get an error saying "There has been an error activating module! ".

The frontend of my drop down list control

<%@ Control Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>

<%@ Register Assembly="ThumbnailSelectorField" Namespace="Telerik.Sitefinity.Samples" TagPrefix="samples" %>

<div>

<p><strong>Gallery:</strong></p>

<sitefinity:ChoiceField runat="server" ID="GalleryChoiceField" DisplayMode="Write" RenderChoicesAs="DropDown" />

</div>

My code behind looks like this

using Telerik.Sitefinity.Web.UI.Fields;

using Telerik.Sitefinity.Web.UI.Fields.Contracts;

using Telerik.Sitefinity.Web.UI;

using Telerik.Sitefinity;

using Telerik.Sitefinity.Web.UI.Fields.Enums;

/// <summary>

/// Summary description for DropDownList

/// </summary>

namespace Telerik.Sitefinity.Samples

[FieldDefinitionElement(typeof(DropDownListElement))]

public class DropDownList : ChoiceField

protected override void InitializeControls(GenericContainer container)

GalleryChoice.Choices.Add(new ChoiceItem Text = "Select A Gallery", Value = Guid.Empty.ToString() );

foreach (var gallery in App.WorkWith().Albums().Get().ToList())

GalleryChoice.Choices.Add(new ChoiceItem Text = gallery.Title, Value = gallery.Id.ToString() );

protected override string LayoutTemplateName

get return string.Empty;

#region PageControls

protected ChoiceField GalleryChoice

get return Container.GetControl<ChoiceField>("GalleryChoiceField", true);

#endregion

private string _layoutTemplatePath = "~/ThumbnailSelector/ThumbnailSelectorField.DropDownList.DropDownList.ascx";

private string _scriptReference = "ThumbnailSelectorField.DropDownList.DropDownList.js";

public override string LayoutTemplatePath get return _layoutTemplatePath;

public override IEnumerable<ScriptReference> GetScriptReferences()

var scripts = base.GetScriptReferences() as List<ScriptReference>;

if (scripts == null) return base.GetScriptReferences();

scripts.Add(new ScriptReference(_scriptReference));

return scripts.ToArray();

public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()

var descriptors = new List<ScriptDescriptor>(base.GetScriptDescriptors());

var descriptor = (ScriptControlDescriptor)descriptors.Last();

descriptor.AddComponentProperty("GalleryChoice", this.GalleryChoice.ClientID);

return descriptors;

My Javascript file

/// <reference name="MicrosoftAjax.js"/>

/// <reference name="Telerik.Sitefinity.Resources.Scripts.jquery-1.4.2-vsdoc.js" assembly="Telerik.Sitefinity.Resources"/>

(function ()

var getter_maker, setter_maker, make_getter_and_setter;

Type.registerNamespace("Telerik.Sitefinity.Web.UI.Fields");

Type.registerNamespace("Telerik.Sitefinity.Samples");

this.DropDownList = function (element)

DropDownList.initializeBase(this, [element]);

this._GalleryChoice = null;

;

getter_maker = function (key)

return function ()

return this[key];

;

setter_maker = function (key)

return function (value)

return this[key] = value;

;

make_getter_and_setter = function (obj, name)

obj["get" + name] = getter_maker(name);

obj["set" + name] = setter_maker(name);

return obj;

;

ProjectDisplayDesigner.prototype =

initialize: function ()

ProjectDisplayDesigner.callBaseMethod(this, 'initialize');

, dispose: function ()

ProjectDisplayDesigner.callBaseMethod(this, 'dispose');

, refreshUI: function ()

var controlData = this._propertyEditor.get_control();

this.get_GalleryChoice().set_value(controlData.GalleryID);

, applyChanges: function ()

var controlData = this._propertyEditor.get_control();

controlData.GalleryID = this.get_GalleryChoice().get_value();

, _resizeControlDesigner: function ()

return setTimeout('dialogBase.resizeToContent()', 100);

;

make_getter_and_setter(ProjectDisplayDesigner.prototype, '_GalleryChoice');

Telerik.Sitefinity.Samples.DropDownList.registerClass('Telerik.Sitefinity.Samples.DropDownList', Telerik.Sitefinity.Web.UI.Fields.ChoiceField);

Sys && Sys.Application.notifyScriptLoaded();

).call(this);

Any help you can provide will be appreciated!!!

Posted by Community Admin on 05-Mar-2012 00:00

Hi Chris,

Can you tell me how exactly you registered your custom field control? Also, the best thing that you can do is test the Field Control in another module (one of Sitefinity's built-in, for example the News module) in order to see what exactly is the problem. If the control works in a regular module, then it will work in the Module Builder, as well. Here's another article with an example of adding custom fields to the Module Builder:
http://www.sitefinity.com/blogs/radoslavgeorgiev/posts/12-02-27/creating_one_to_many_relationships_in_dynamic_modules.aspx

All the best,
Svetoslav Petsov
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 06-Mar-2012 00:00

Hi there,
I managed to get my custom field show up on News module. However, the css and the javascript on the Create News page are not working properly. Do you have any ideas what causing this problem?
The frontend of my drop down list control looks like this

<%@ Control Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI"

TagPrefix="sf" %>

<div>

<asp:Label runat="server" ID="titleLabel" Text=""></asp:Label>

<asp:Label ID="titleLabel_dropdown" runat="server"></asp:Label>

<asp:DropDownList ID="dropDown" runat="server">

</asp:DropDownList>

<asp:Label runat="server" ID="exampleLabel"></asp:Label><br />

<asp:Label runat="server" ID="descriptionLabel"></asp:Label>

</div>

Lastly, this is how I registered my custom field control to the Module Builder:





My virtualpath:

VirtualPath

: ~/CustomControlDropDownList/*
ResourceLocation: CustomControlDropDownList
ResolverName: EmbeddedResourceResolver

I created a Module, added a new field with type "Choice" and in the "Type or Virtual path of the custom widget " section I put "CustomControlDropDownList.GalleryDropDown".
When I tried to activate the module I get an error saying "There has been an error activating module! ".

My code behind looks like this

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using Telerik.Sitefinity.Web.UI.Fields;

using Telerik.Sitefinity.Data.Metadata;

using Telerik.Sitefinity.Model;

using Telerik.Sitefinity.Modules.Forms.Web.UI.Fields;

using Telerik.Sitefinity.Metadata.Model;

using Telerik.Sitefinity.Web.UI;

using Telerik.Sitefinity;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Sitefinity.Web.UI.Fields.Enums;

using Telerik.Sitefinity.Modules.Libraries;

using Telerik.Sitefinity.Libraries.Model;

using Telerik.Web.UI;

namespace CustomControlDropDownList

[FieldDefinitionElement(typeof(GalleryDropDownElement))]

public class GalleryDropDown : ChoiceField

public GalleryDropDown()

public override Telerik.Sitefinity.Web.UI.Fields.Enums.RenderChoicesAs RenderChoicesAs

get

return Telerik.Sitefinity.Web.UI.Fields.Enums.RenderChoicesAs.DropDown;

set

base.RenderChoicesAs = value;

protected override void InitializeControls(GenericContainer container)

this.ExampleLabel.Text = this.Example;

this.TitleLabel.Text = this.Title;

this.DescriptionLabel.Text = this.Description;

this.DropDown.Items.Add(new ListItem Text = "Select A Gallery", Value = Guid.Empty.ToString() );

foreach (var gallery in App.WorkWith().Albums().Get().ToList())

this.DropDown.Items.Add(new ListItem Text = gallery.Title, Value = gallery.Id.ToString() );

#region Pubic properies

public override string Example get; set;

public override string Title get; set;

public override string Description get; set;

#endregion

#region PageControls

protected internal virtual Label titleLabel

get return this.Container.GetControl<Label>("titleLabel", true);

protected internal virtual Label descriptionLabel

get return Container.GetControl<Label>("descriptionLabel", true);

protected internal virtual Label exampleLabel

get return this.Container.GetControl<Label>("exampleLabel", this.DisplayMode == FieldDisplayMode.Write);

protected virtual DropDownList dropDown

get return this.Container.GetControl<DropDownList>("dropDown", true);

protected override System.Web.UI.WebControls.WebControl TitleControl

get

return this.titleLabel;

protected override WebControl DescriptionControl

get

return this.descriptionLabel;

protected override WebControl ExampleControl

get

return this.exampleLabel;

#endregion

protected override string LayoutTemplateName

get return null;

public override string LayoutTemplatePath

get

return "~/CustomControlDropDownList/CustomControlDropDownList.Resources.GalleryDropDown.ascx";

set

base.LayoutTemplatePath = value;

private string _scriptReference = "CustomControlDropDownList.Resources.GalleryDropDown.js";

public override IEnumerable<ScriptReference> GetScriptReferences()

var scripts = base.GetScriptReferences() as List<ScriptReference>;

if (scripts == null) return base.GetScriptReferences();

scripts.Add(new ScriptReference(_scriptReference));

return scripts.ToArray();

public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()

var descriptors = new List<ScriptDescriptor>(base.GetScriptDescriptors());

var descriptor = (ScriptControlDescriptor)descriptors.Last();

descriptor.AddComponentProperty("dropDown", this.dropDown.ClientID);

return descriptors;

Thanks again

Posted by Community Admin on 09-Mar-2012 00:00

Hello Chris,

From the picture that you provided, there seems to be a javascript error on the page (probably caused by your custom field control's javascript part). What you can do is inspect the page with Firebug and see what javascript error is thrown in the Console log. This can help you locate the problem inside your javascript and correct it.

Greetings,
Svetoslav Petsov
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

This thread is closed

All Replies