1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Custom Field in Module Builder

Custom Field in Module Builder

4 posts, 0 answered
  1. Chris Hayward
    Chris Hayward avatar
    36 posts
    Registered:
    17 Dec 2009
    29 Feb 2012
    Link to this post
    Hi there,

    We are trying to build a custom module with dynamic drop down list of image libraries.
    I followed the following thread:
    http://www.sitefinity.com/blogs/slavoingilizov/posts/11-09-09/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!!!
  2. Svetoslav Petsov
    Svetoslav Petsov avatar
    456 posts
    Registered:
    24 Sep 2012
    05 Mar 2012
    Link to this post
    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
  3. Chris Hayward
    Chris Hayward avatar
    36 posts
    Registered:
    17 Dec 2009
    06 Mar 2012
    Link to this post
    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
  4. Svetoslav Petsov
    Svetoslav Petsov avatar
    456 posts
    Registered:
    24 Sep 2012
    09 Mar 2012
    Link to this post
    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
4 posts, 0 answered