How to 'Create a template for the custom control designer' - General Discussions - General Discussions - Progress Community
 General Discussions

How to 'Create a template for the custom control designer'

  • How to 'Create a template for the custom control designer'
  • Hi, I am new to Sitefinity 4.0
    We have couple custom user controls need to tranfer to 4.0 from sitefinity 3.7, one biggest issue is only simple textbox (string) properties are working in Sitefinity 4.0, those properties with advanced format (e.g., dropdown list, rich text editor, page selector, image uploader, etc.) are not working anymore.

    I searched the forum and I was referred to this doc.  But I was confused by the very first step: Create a template for the custom control designer.
    Can anyone explain how exactly to 'Create a template for the custom control designer' ?  I should do it in Visual Studio or Sitefinity admin ?

    Also, am I in right track to solve this issue?

    Thanks.
  • Hello MJia,

    1. You should use a custom control, not a user control. It is not possible to create a control designer for a user control.

    2. In Sitefinity 4.0 the properties section displays only TextBox controls ( input fields) , so DropDowns and other complex types are not supported in the "Advanced" section of a control. You have to use ControlDesigner where you can add various controls like RadComboBox, RadGrid, RadTextBox etc.

    3. Template for the control designer is ascx file ( control) where you declare controls you want to use in the control designer

    sample

    <%@ Control Language="C#"   %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
     
         
    <telerik:RadComboBox runat="server" ID="RadComboBox1"></telerik:RadComboBox>


    Greetings,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • 240353_customdesigner.png
    Thanks Ivan.
    Following the instructions, I was able to create a custom control and use it in a test page.  The front end shows correctly, but the custom designer seems not work properly.
    When I click the 'edit' button after I drag and drop this control to a page, I got an popup box as the attached screen shot.  And no buttons in the box are clickable.


    In the custom designer template, I simply put the following code:

    <%@ Control Language="C#"   %>
      
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
      
      
          
    <telerik:RadComboBox runat="server"ID="RadComboBox1"></telerik:RadComboBox>

    Anything wrong here?

    Thanks.
  • Hello MJia,

    There is some problem with the java script of the control designer. Something is not properly initialized. Please check this tutorial and use Firebug to see if there are any errors when you open the control designer.

    All the best,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • I got the same error as following
    "Error: TestControlProject is not defined
    Source File: MyWebsite/.../PropertyEditor
    Line: 289"

    My Code is here:

    TestControlDesigner.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using Telerik.Sitefinity.Web.UI.ControlDesign;
    using Telerik.Sitefinity.Web.UI;
    using System.Web.UI;
     
    namespace TestControlProject
        /// <summary>
        /// Summary description for ServerControl1
        /// </summary>
        ///[Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesigner(typeof(TestControlDesigner))]
        public class TestControlDesigner : ControlDesignerBase
        
            public TestControlDesigner()
            
                //
                // TODO: Add constructor logic here
                //
            
     
            protected override string LayoutTemplateName
            
                get
                
                    return "TestControlProject.Resources.TestControlDesigner.ascx";
                
            
     
            protected override HtmlTextWriterTag TagKey
            
                get
                
                    //Use div wrapper tag to make easier common styling. This will surround the layout template with a div tag.
                    return HtmlTextWriterTag.Div;
                
            
     
            protected override void InitializeControls(GenericContainer controlContainer)
            
                base.DesignerMode = ControlDesignerModes.Simple;
            
        

    TestControlDesigner.ascx
    <%@ Control Language="C#" %>
     
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI"
        TagPrefix="sitefinity" %>
     
    <div class="sfContentViews">
        <div id="RotatorOptions">
            <h2>
                Fine tune your Rotator</h2>
            <div>
                <div id="groupSettingPageSelect">
                    <div id="" class="sfExpandableSection">
                        <h3>
                            <a href="javascript:void(0);" class="sfMoreDetails" id="A3">Layout</a></h3>
                        <ul class="sfTargetList">
                            <li>
                                <label for="RotatorWidth">
                                    Width</label>
                                <input type="text" id="RotatorWidth" class="sfTxt" />
                                <label for="RotatorHeight">
                                    Height</label>
                                <input type="text" id="RotatorHeight" class="sfTxt" />
                            </li>
                            <li>
                                <label for="RotatorItemWidth">
                                    Item Width</label>
                                <input type="text" id="RotatorItemWidth" class="sfTxt" />
                                <label for="RotatorItemHeight">
                                    Item Height</label>
                                <input type="text" id="RotatorItemHeight" class="sfTxt" />
                            </li>
                            <li>
                                <label for="RotatorItemHeight">
                                    Display Time</label>
                                <input type="text" id="RotatorDisplayTime" class="sfTxt" />
                            </li>
                        </ul>
                    </div>
                    <div id="" class="sfExpandableSection">
                        <h3>
                            <a href="javascript:void(0);" class="sfMoreDetails" id="A2">News Options</a></h3>
                        <ul class="sfTargetList">
                            <li>
                                <label for="RotatorNewsLimit" class="sfTxtLbl">
                                    News Limit</label>
                                <input type="text" id="RotatorNewsLimit" class="sfTxt" />
                            </li>
                            <li>
                                <label for="RotatorNewsProviderName" class="sfTxtLbl">
                                    Provider Name</label>
                                <input type="text" id="RotatorNewsProviderName" class="sfTxt" />
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
  • Hi,

    I do not see where you have added the javascript for the control designer as shown in the tutorial. Please check this tutorial.

    Regards,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • I followed the post, but got an error. Can you help? Thanks.

    Server Error in '/' Application.

    Assembly 'TestControlProject, Version=1.0.4022.23572, Culture=neutral, PublicKeyToken=null' does not contain a Web resource with name 'TestControlProject.Resources.RotatorDesigner.js'.

    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

    Exception Details: System.InvalidOperationException: Assembly 'TestControlProject, Version=1.0.4022.23572, Culture=neutral, PublicKeyToken=null' does not contain a Web resource with name 'TestControlProject.Resources.RotatorDesigner.js'.

    Source Error:

    An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

    Stack Trace:

    [InvalidOperationException: Assembly 'TestControlProject, Version=1.0.4022.23572, Culture=neutral, PublicKeyToken=null' does not contain a Web resource with name 'TestControlProject.Resources.RotatorDesigner.js'.]
       System.Web.UI.WebResourceUtil.VerifyAssemblyContainsReleaseWebResource(Assembly assembly, String releaseResourceName, Assembly currentAjaxAssembly) +463986
       System.Web.UI.ScriptReference.ShouldUseDebugScript(String releaseName, Assembly assembly, Boolean isDebuggingEnabled, Assembly currentAjaxAssembly) +86
       System.Web.UI.ScriptReference.DetermineResourceNameAndAssembly(ScriptManager scriptManager, Boolean isDebuggingEnabled, String& resourceName, Assembly& assembly) +99
       System.Web.UI.ScriptReference.GetUrlFromName(ScriptManager scriptManager, IControl scriptManagerControl, Boolean zip) +103
       System.Web.UI.ScriptReference.GetUrlInternal(ScriptManager scriptManager, Boolean zip) +613
       System.Web.UI.ScriptReference.GetUrl(ScriptManager scriptManager, 

    Added the code in the TestControlDesigner.cs
    public override IEnumerable<System.Web.UI.ScriptReference> GetScriptReferences()
            
                var res = new List<ScriptReference>(base.GetScriptReferences());
                var assemblyName = this.GetType().Assembly.GetName().ToString();
                res.Add(new ScriptReference("TestControlProject.Resources.RotatorDesigner.js", assemblyName));
                return res.ToArray();
            

    RotatorDesigner.js in the Resources folder
    Type.registerNamespace("TestControlProject");
     
    TestControlProject.TestControlDesigner = function (element)
        TestControlProject.TestControlDesigner.initializeBase(this, [element]);
     
    TestControlProject.TestControlDesigner.prototype =
        initialize: function ()
            TestControlProject.TestControlDesigner.callBaseMethod(this, 'initialize');
        ,
        dispose: function ()
            TestControlProject.TestControlDesigner.callBaseMethod(this, 'dispose');
        ,
        refreshUI: function ()
            var data = this._propertyEditor().get_control();
            jQuery("#RotatorWidth").val(data.Width);
            jQuery("#RotatorHeight").val(data.Height);
            jQuery("#RotatorItemWidth").val(data.ItemWidth);
            jQuery("#RotatorItemHeight").val(data.ItemHeight);
            jQuery("#RotatorDisplayTime").val(data.FrameDuration);
            jQuery("#RotatorNewsLimit").val(data.NewsLimit);
            jQuery("#RotatorNewsProviderName").val(data.ProviderName);
        ,
        applyChanges: function ()
     
            var controlData = this._propertyEditor().get_control();
     
            controlData.Width = jQuery("#RotatorWidth").val();
            controlData.Height = jQuery("#RotatorHeight").val();
            controlData.ItemWidth = jQuery("#RotatorItemWidth").val();
            controlData.ItemHeight = jQuery("#RotatorItemHeight").val();
            controlData.FrameDuration = jQuery("#RotatorDisplayTime").val();
            controlData.NewsLimit = jQuery("#RotatorNewsLimit").val();
            controlData.ProviderName = jQuery("#RotatorNewsProviderName").val();
     
        
     
    TestControlProject.TestControlDesigner.registerClass('TestControlProject.TestControlDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
    if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
  • Hello,

    1. You should register the script inside AssemblyInfo.cs class of the class library

    sample

    [assembly: WebResource("TestControlProject.Resources.RotatorDesigner.js", "application/x-javascript")]

    2. The script file build action should be "EmbeddedResource"

    Kind regards,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • Thanks Ivan. I got a different javascript error this time. Thanks again.

    "Error: this._propertyEditor is not a function
    Source File: odlum-brown.gssiwebs.com/ScriptResource.axd
    Line: 15"
  • Hi ,

    You have to use this.get_controlData(); to get the control data and all data from the control designer properties.

    Best wishes,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • Thanks Ivan. It works.

    I have another question. In sitefinity 3.x, we can create user control with properties like the followings, how can I do the same thing in custom control. Thanks again.

    Page Picker:
    [WebEditor("Telerik.Cms.Web.UI.CmsHyperLinkUrlWebEditor, Telerik.Cms")]
    public string RedirectPageID
        
            get
            
                return this.redirectPageID;
            
            set
            
                this.redirectPageID= value;
            
        

    Html Content Editor
    [Telerik.Cms.Web.UI.WebEditor("Telerik.Cms.Engine.WebControls.HtmlContentEditor, Telerik.Cms.Engine")]
        [TypeConverter(typeof(StringConverter))]
        public string Section1
        
            get return lt_section1.Text;
            set lt_section1.Text = value;
        
  • Hey Stephen,

    This has been covered a number of times and unfortunately the answer is that it's no longer possible in SF4. The only Designer options you can have with a UserControl are strings which are displayed as Text Boxes. If you want to have anything else (i.e. page selector, bool value, combo box etc) it has to be done as a compiled dll. Definitely doesn't live up to the claim that SF4 is supposed to be easier for developers.

    Regards,
    Phill
  • Thanks Phill. I am currently modifying the NewsRotator widget provided with SDK. I tried to add the properties like page selector and html content editor, but did not know how to achieve that. Can you help? Thanks.
  • Hello,

    Please take a look at how to add page selector button in sitefinity 4.0 rc ?


    Regards,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items