Skip to content

Instantly share code, notes, and snippets.

@gabesumner
Created August 25, 2011 22:56
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gabesumner/1172243 to your computer and use it in GitHub Desktop.
Save gabesumner/1172243 to your computer and use it in GitHub Desktop.
HelloWorld example for Sitefinity 4 custom Widgets and ControlDesigners
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="HelloWorld.ascx.cs" Inherits="SitefinityWebApp.Widgets.HelloWorld" %>
<p>Hello <asp:Literal ID="NameLiteral" runat="server" /></p>
using System;
using Telerik.Sitefinity.Web.UI.ControlDesign;
namespace SitefinityWebApp.Widgets
{
[ControlDesigner(typeof(HelloWorldDesigner))]
public partial class HelloWorld : System.Web.UI.UserControl
{
// This public property will become editable in Sitefinity
public string Name { get; set; }
protected void Page_Load(object sender, EventArgs e)
{
if (String.IsNullOrEmpty(Name))
{
NameLiteral.Text = "World!";
}
else
{
NameLiteral.Text = Name;
}
}
}
}
<div>
<span>Your name:</span><br />
<input type="text" id="txtName" />
</div>
using System.Collections.Generic;
using Telerik.Sitefinity.Web.UI.ControlDesign;
using System.Web.UI;
namespace SitefinityWebApp.Widgets
{
public class HelloWorldDesigner : ControlDesignerBase
{
protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container)
{
base.DesignerMode = ControlDesignerModes.Simple;
}
public override string LayoutTemplatePath
{
get
{
return _layoutTemplatePath;
}
set
{
_layoutTemplatePath = value;
}
}
protected override string LayoutTemplateName
{
get { return string.Empty; }
}
public override IEnumerable<ScriptReference> GetScriptReferences()
{
// get script collection
var scripts = base.GetScriptReferences() as List<ScriptReference>;
if (scripts == null) return base.GetScriptReferences();
scripts.Add(new ScriptReference(_scriptReference));
return scripts.ToArray();
}
private string _layoutTemplatePath = "~/Widgets/HelloWorldDesigner.ascx";
private string _scriptReference = "~/Widgets/HelloWorldDesigner.js";
}
}
Type.registerNamespace("SitefinityWebApp.Widgets.HelloWorld");
SitefinityWebApp.Widgets.HelloWorldDesigner = function (element) {
SitefinityWebApp.Widgets.HelloWorldDesigner.initializeBase(this, [element]);
}
SitefinityWebApp.Widgets.HelloWorldDesigner.prototype = {
initialize: function () {
SitefinityWebApp.Widgets.HelloWorldDesigner.callBaseMethod(this, 'initialize');
},
dispose: function () {
SitefinityWebApp.Widgets.HelloWorldDesigner.callBaseMethod(this, 'dispose');
},
refreshUI: function () {
var controlData = this._propertyEditor.get_control();
// bind widget properites to designer
jQuery("#txtName").val(controlData.Name);
},
applyChanges: function () {
var controlData = this._propertyEditor.get_control();
// bind designer properties back to widget
controlData.Name = jQuery("#txtName").val();
}
}
SitefinityWebApp.Widgets.HelloWorldDesigner.registerClass('SitefinityWebApp.Widgets.HelloWorldDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
@gabesumner
Copy link
Author

These files can be placed directly into a SitefinityWebApp. Create a folder called /Widgets and place these files in that folder. Then add the HelloWorld widget (/Widgets/HelloWorld) to Sitefinity's Toolbox.

@gabesumner
Copy link
Author

The HelloWorldDesigner.ascx is not a true ASP.NET UserControl. It has no code-behind. Instead, it is merely a template that is loaded dynamically from the HelloWorldDesigner class via the LayoutTemplatePath. In Visual Studio I created a normal ASP.NET UserControl and then deleted the related code-behind (cs) and designer files.

@Kurara
Copy link

Kurara commented May 25, 2012

Excuse me, but I did exactly what you did but I cannot see the controlDesigner.ascx in sitefinity, despite I see all hereditable properties and the new one that you have created. I used Sitefinity thunder too and it happends the same thing, nothing change in editor, futhermore, with sitefinity thunder we didn't see even the new property name. Is it a javascript problem? If it's What could be the problem? :( If you want I can show you my code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment