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

Forums / Developing with Sitefinity / Custom Widget with designer not working

Custom Widget with designer not working

2 posts, 0 answered
  1. John
    John avatar
    14 posts
    Registered:
    23 Aug 2012
    25 Oct 2012
    Link to this post
    I try to build a widget with designer which allows user to input image url and navigation url. In the control, it is hyperlink control. When I debug it, it is working, I can input image url and navigation url which pass to control. However, when I run it in IIS , it is not working at all. Hope some one can help me get out of this. I have been stucking for a day. 

    My code in the following:
    MyWidget.ascx

    <%@ Control Language="C#" %>
    <div align="center" class="ApplyNow">
    <asp:Label ID="MessageLabel" Text="Text" runat="server" /><br/>
    <asp:HyperLink runat="server" ID="ApplyLink" ></asp:HyperLink><br/>
    </div>
    <style type="text/css">
    .ApplyNow
    {
    width: 300px;
    background: #CCE8F6;
    border: 1px solid #A3D1EF;
    border-radius: 5px 5px 5px 5px;
    margin: 0 0 10px;
    text-align: center;
    }
    </style>

    MyWidget.cs

    using System;
    using System.Web.UI.WebControls;
    using Telerik.Sitefinity.Web.UI;
    namespace SitefinityWebApp.CustomWidget.MyWidget
    {
    [Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesigner(typeof(SitefinityWebApp.CustomWidget.MyWidget.Designer.MyWidgetDesigner))]
    public class MyWidget : SimpleView
    {
    #region Properties
    /// <summary>
    /// Gets or sets the message that will be displayed in the label.
    /// </summary>
    public string Message { get; set; }
    /// <summary>
    /// Gets or set the image that will be displayed
    /// </summary>
    public string ImageUrl { get; set; }
    /// <summary>
    /// Gets or sets the image link address
    /// </summary>
    public string UrlLink { get; set; }
    /// <summary>
    /// Gets the layout template path
    /// </summary>
    public override string LayoutTemplatePath
    {
    get
    {
    return MyWidget.layoutTemplatePath;
    }
    }
    /// <summary>
    /// Gets the layout template name
    /// </summary>
    protected override string LayoutTemplateName
    {
    get
    {
    return String.Empty;
    }
    }
    #endregion
    #region Control References
    /// <summary>
    /// Reference to the Label control that shows the Message.
    /// </summary>
    protected virtual Label MessageLabel
    {
    get
    {
    return this.Container.GetControl<Label>("MessageLabel", true);
    }
    }
    protected virtual HyperLink ApplyNowLink
    {
    get { return this.Container.GetControl<HyperLink>("ApplyLink", true); }
    }
    #endregion
    #region Methods
    /// <summary>
    /// Initializes the controls.
    /// </summary>
    /// <param name="container"></param>
    /// <remarks>
    /// Initialize your controls in this method. Do not override CreateChildControls method.
    /// </remarks>
    protected override void InitializeControls(GenericContainer container)
    {
    Label messageLabel = this.MessageLabel;
    if (string.IsNullOrEmpty(this.Message))
    {
    messageLabel.Text = "Hello, World!";
    }
    else
    {
    messageLabel.Text = this.Message;
    }
    HyperLink applyLink = this.ApplyNowLink;
    if (string.IsNullOrEmpty(UrlLink))
    {
    applyLink.NavigateUrl = "/Home";
    }
    else
    {
    applyLink.NavigateUrl = ResolveUrl(this.UrlLink);
    }
    if(string.IsNullOrEmpty(ImageUrl))
    {
    applyLink.ImageUrl = "/Img/apply_today.png";
    }
    else
    {
    applyLink.ImageUrl = this.ImageUrl;
    }
    }
    #endregion
    #region Private members & constants
    public static readonly string layoutTemplatePath = "/CustomWidget/MyWidget/MyWidget.ascx";
    #endregion
    }
    }

    designer/MyWidgetDesigner.ascx

    <div>
    <span>Message:</span><br />
    <input type="text" id="txtMessage" />
    </div>
    <div>
    <span>Image Url:</span><br />
    <input type="text" id="txtImageUrl" />
    </div>
    <div>
    <span>Link after you click the image: </span><br />
    <input type="text" id="txtUrlLink" />
    </div>

    desinger/MyWidgetDesigner.cs

    using System.Web.UI;
    using Telerik.Sitefinity.Web.UI.ControlDesign;
    using System.Collections.Generic;
    namespace SitefinityWebApp.CustomWidget.MyWidget.Designer
    {
    /// <summary>
    /// Represents a designer for the <typeparamref name="SitefinityWebApp.CustomWidget.MyWidget.MyWidget"/> widget
    /// </summary>
    public class MyWidgetDesigner : ControlDesignerBase
    {
    #region Properties
    /// <summary>
    /// Gets the layout template path
    /// </summary>
    public override string LayoutTemplatePath
    {
    get
    {
    return MyWidgetDesigner.layoutTemplatePath;
    }
    }
    /// <summary>
    /// Gets the layout template name
    /// </summary>
    protected override string LayoutTemplateName
    {
    get
    {
    return layoutTemplatePath;
    }
    }
    protected override HtmlTextWriterTag TagKey
    {
    get
    {
    return HtmlTextWriterTag.Div;
    }
    }
    #endregion
    #region Methods
    protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container)
    {
    // Place your initialization logic here
    // load in simple mode
    base.DesignerMode = ControlDesignerModes.Simple;
    }
    #endregion
    #region IScriptControl implementation
    /// <summary>
    /// Gets a collection of ScriptReference objects that define script resources that the control requires.
    /// </summary>
    public override System.Collections.Generic.IEnumerable<System.Web.UI.ScriptReference> GetScriptReferences()
    {
    var scripts = new List<ScriptReference>(base.GetScriptReferences());
    scripts.Add(new ScriptReference(MyWidgetDesigner.scriptReference));
    return scripts;
    }
    #endregion
    #region Private members & constants
    public static readonly string layoutTemplatePath = "/CustomWidget/MyWidget/Designer/MyWidgetDesigner.ascx";
    public const string scriptReference = "/CustomWidget/MyWidget/Designer/MyWidgetDesigner.js";
    #endregion
    }
    }

    designer/MyWidgetDesigner.js

    //Type.registerNamespace("SitefinityWebApp.CustomWidget.MyWidget.Designer");
    Type.registerNamespace("SitefinityWebApp.CustomWidget.MyWidget");
    SitefinityWebApp.CustomWidget.MyWidget.Designer.MyWidgetDesigner = function (element) {
    SitefinityWebApp.CustomWidget.MyWidget.Designer.MyWidgetDesigner.initializeBase(this, [element]);
    }
    SitefinityWebApp.CustomWidget.MyWidget.Designer.MyWidgetDesigner.prototype = {
    /* --------------------------------- set up and tear down --------------------------------- */
    initialize: function () {
    /* Here you can attach to events or do other initialization */
    SitefinityWebApp.CustomWidget.MyWidget.Designer.MyWidgetDesigner.callBaseMethod(this, 'initialize');
    },
    dispose: function () {
    /* this is the place to unbind/dispose the event handlers created in the initialize method */
    SitefinityWebApp.CustomWidget.MyWidget.Designer.MyWidgetDesigner.callBaseMethod(this, 'dispose');
    },
    /* Called when the designer window gets opened and here is place to "bind" your designer to the control properties */
    refreshUI: function () {
    alert("Entering the setup");
    var controlData = this._propertyEditor.get_control(); /* JavaScript clone of your control - all the control properties will be properties of the controlData too */
    alert(controlData.Message);
    /* RefreshUI Message */
    jQuery("#txtMessage").val(controlData.Message);
    alert(controlData.ImageUrl);
    jQuery("#txtImageUrl").val(controlData.ImageUrl);
    jQuery("#txtUrlLink").val(controlData.UrlLink);
    },
    /* Called when the "Save" button is clicked. Here you can transfer the settings from the designer to the control */
    applyChanges: function () {
    var controlData = this._propertyEditor.get_control();
    alert(jQuery("#txtMessage").val());
    controlData.Message = jQuery("#txtMessage").val();
    alert(jQuery("#txtImageUrl").val());
    controlData.ImageUrl = jQuery("#txtImageUrl").val();
    controlData.UrlLink = jQuery("#txtUrlLink").val();
    },
    get_controlData: function () {
    return this.get_propertyEditor().get_control();
    },
    get_propertyEditor: function () {
    return this._propertyEditor;
    }
    }
    SitefinityWebApp.CustomWidget.MyWidget.Designer.MyWidgetDesigner.registerClass('SitefinityWebApp.CustomWidget.MyWidget.Designer.MyWidgetDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
    if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
     
  2. John
    John avatar
    14 posts
    Registered:
    23 Aug 2012
    26 Oct 2012
    Link to this post
    I hate IE. In fact, when I open the page in firefox, the wiget is working. I find when I save the value, in IE it throws "Sys is undifined" and also tried several ways to fix this, not working at all. Is there some one else also having this king of problem?
2 posts, 0 answered