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

Forums / Developing with Sitefinity / Custom Form Control

Custom Form Control

5 posts, 3 answered
  1. Martin
    Martin avatar
    22 posts
    Registered:
    27 Sep 2013
    14 Oct 2013
    Link to this post
    Hi

    I'm trying to implement Custom Form Controls in Sitefinity 6.0
    and wondering if I'm missing something or maybe there's another approach to this...

    I've created a Class Library called CustomFormControls
    (Using an example from Falafel Sitefinity 6.0 Nuts and Bolts)

    In this class library I have 3 key items:
    • NamedTextBox.cs
    • NamedTextBox.ascx
    • NamedTextBox.js
    After going through the process, I've ended up with a with a new Form Control which I can place on a Form...

    However after publishing the form:
    • Go back to edit - none of the Form editor controls work - Publish, Drag'n'Drop, etc.
    • Form Submitted on front-end, the Response is published OK but can't be viewed on Back End

    Any help/advice appreciated (My code below....)
    Martin

    ------------------------------------------------
    1) NamedTextBox.ascx
    (the template)
    ------------------------------------------------
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="NamedTextBox.ascx.cs" Inherits="SitefinityWebApp.NamedTextBox" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <asp:Label runat="server" ID="titleLabel" CssClass="sfTxtLbl" Text="title label" ></asp:Label>
    <telerik:RadTextBox ID="TextBox1" CssClass="sfTxt" runat="server"></telerik:RadTextBox>
    <br />
    <asp:Label runat="server" ID="exampleLabel" CssClass="sfExample" Text="example label" ></asp:Label>
    <br />
    <asp:Label runat="server" ID="descriptionLabel" CssClass="sfExample" Text="description label" ></asp:Label>
    ------------------------------------------------
    2) NamedTextBox.js (the Javascript)
    ------------------------------------------------
    // Register the client-side namespace
    Type.registerNameSpace("CustomFormControls");

    // Create the NamedTextBox client-side control
    CustomFormControls.NamedTextBox = function (element) {

        CustomFormControls.NamedTextBox.initializeBase(this, [element]);
    }
    //set control properties
    CustomFormControls.NamedTextBox.prototype = {
        get_value: function () {
            return this._textbox.get_value();
        },
        set_value: function (value) {
            this._textbox.set_value(value);
        },
        // no persistent type if missing this
        get_textbox: function () {
            return this._textbox;
        },
        set_textbox: function (value) {
            this._textbox = value;
        }
    }
    // register the control in the namespace
    CustomFormControls.NamedTextBox.registerClass('CustomFormControls.NamedTextBox',
    Telerik.Sitefinity.Web.UI.Fields.FieldControl);
    ------------------------------------------------
    3) NamedTextBox.cs (The Class code)
    ------------------------------------------------
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Sitefinity.Data.Metadata;
    using Telerik.Sitefinity.Metadata.Model;
    using Telerik.Sitefinity.Model;
    using Telerik.Sitefinity.Modules.Forms.Web.UI.Fields;
    using Telerik.Sitefinity.Security;
    using Telerik.Sitefinity.Web.UI.Fields;
    using Telerik.Sitefinity.Web.UI.Fields.Enums;
    using Telerik.Web.UI;

    namespace CustomFormControls
    {

        [DatabaseMapping(UserFriendlyDataType.ShortText)]
        public class NamedTextBox : FieldControl, IFormFieldControl
        {
            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 override System.Web.UI.WebControls.WebControl DescriptionControl
            {
                get { return this.DescriptionLabel; }
            }

            protected override System.Web.UI.WebControls.WebControl ExampleControl
            {
                get { return this.ExampleLabel; }
            }

            protected override System.Web.UI.WebControls.WebControl TitleControl
            {
                get { return this.TitleLabel; }
            }

            public override string Example { get; set; }
            public override string Title { get; set; }
            public override string Description { get; set; }

            protected internal virtual RadTextBox TextBox1
            {
                get
                {
                    return this.Container.GetControl<RadTextBox>("TextBox1", true);
                }
            }


            public override object Value
            {
                get { return this.TextBox1.Text; }
                set { this.TextBox1.Text = value.ToString(); }
            }

            protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container)
            {
                this.ExampleLabel.Text = this.Example;
                this.TitleLabel.Text = this.Title;
                this.DescriptionLabel.Text = this.Description;

                this.TextBox1.Text = SecurityManager.GetCurrentUserName();
            }

            protected override string LayoutTemplateName
            {
                get { return "CustomFormControls.Resources.NamedTextBox.ascx"; }
            }

            private IMetaField metaField = null;

            [TypeConverter(typeof(ExpandableObjectConverter))]
            public IMetaField MetaField
            {
                get
                {
                    if (this.metaField == null)
                    {
                        this.metaField = this.LoadDefaultMetaField();
                        this.metaField.FieldName = "NamedTextBox_" + this.ClientID;
                    }

                    return this.metaField;
                }

                set { this.metaField = value; }
            }

            
            public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
            {
                var descriptor = new ScriptControlDescriptor(this.GetType().FullName, this.ClientID);
                descriptor.AddComponentProperty("textbox", this.TextBox1.ClientID);
                descriptor.AddProperty("displayMode", this.DisplayMode);
                descriptor.AddProperty("dataFieldName", this.MetaField.FieldName);
                return new[] { descriptor };
            }

            public override IEnumerable<System.Web.UI.ScriptReference> GetScriptReferences()
            {
                var scripts = new List<ScriptReference>(base.GetScriptReferences())
        {
            new ScriptReference(
                "CustomFormControls.Resources.NamedTextBox.js",
                this.GetType().Assembly.FullName),
            new ScriptReference(
                "Telerik.Sitefinity.Web.UI.Fields.Scripts.FieldDisplayMode.js",
                "Telerik.Sitefinity"),                    
        };
                return scripts;
            }


        }
    }





    Answered
  2. Vassil Vassilev
     Vassil Vassilev avatar
    308 posts
    Registered:
    21 Jan 2015
    17 Oct 2013
    Link to this post
    Hello Martin,

    I used your code and recorded a video how to register your control into Sitefinity form.
    I advise you when creating custom controls to use Sitefinity Thunder. You can check those video tutorials:

    Regards,
    Vassil Vassilev
    Telerik
    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
    Answered
  3. Martin
    Martin avatar
    22 posts
    Registered:
    27 Sep 2013
    17 Oct 2013 in reply to Vassil Vassilev
    Link to this post
    Hi Vassil

    Many thanks for that...:}

    No doubt the videos will get me on the right track!
    I'll work through the problem with these...

    Really appreciate your response.

    Kind Regards

    Martin
  4. Vassil Vassilev
     Vassil Vassilev avatar
    308 posts
    Registered:
    21 Jan 2015
    18 Oct 2013
    Link to this post
    Hello Martin,

    I`m glad  i was able to help you.
    If there is something else related to this issue, please let me know!

    Regards,
    Vassil Vassilev
    Telerik
    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
    Answered
  5. Martin
    Martin avatar
    22 posts
    Registered:
    27 Sep 2013
    18 Oct 2013 in reply to Vassil Vassilev
    Link to this post
    Nothing else thanks Vassil

    Now just have to find the time to run through the videos:}

    Kind Regards

    Martin

5 posts, 3 answered