Custom Controls and Designers

Hi all, is there anything similar to Gabe's tutorial for creating custom controls in sitefinity 3.x for the new 4.2 platform?

http://www.sitefinity.com/devnet/webinars/creating-highly-usable-distributable-sitefinity-controls.aspx

I'm trying to wrap my head around the changes as I am porting my 3.7 controls to 4.2. I have defined the class, referenced the designer, and at this point I think is where I am falling over. In my old code, I loaded the template with ControlUtils, and added it in CreateChildControls. Then I bound the controls' events to server side methods for the callbacks.

In the samples I have seen in the SDK it all seems oriented around creating the designer, and then having to feed back javascript? Do I have to create javascript to get my ascx template to display in the editor? Any guidance here is much appreciated.

In fact Gabe has just published a blog post and video on exactly this topic: “Hello World” guide to custom Sitefinity Widgets & ControlDesigners

Most of the Javascript is just boilerplate code where you need to replace the Namespace to match your project. You then use jQuery to map the properties of the control to the UI elements.

I actually am planning a followup post to this myself where I go into a bit more detail on the Javascript file as well as building a more complex, "real world" widget so you can see more advanced binding scenarios. This should be by or around mid this week.

Until then I hope this is helpful!

Hi SelAromDotNet,

Great, would be nice to dive in more deeper to these widgets.
Did you worked with the PageSelector js already? Can't get this working...

Regards,
Daniel

Thanks for the sample, looking promising so far. Now perhaps a simple issue, but I am getting the invalid resource on the reference to the designer ascx, the path seems fine, and it is an embedded resource. Any other gotchas that I should be checking here on that? Interestingly looking at the assembly in reflector does not include the foldering structure to the name so I am somewhat confused with the naming requirement. I have namespace.resources.views.designer.ascx. Thoughts?

Hi Neil,

If you are creating the control in SitefinityWebApp as Gabe did you can use relative path

private string _layoutTemplatePath = "~/resources/views/designer.ascx";

Ok, I have set up the virtual path configuration as suggested:

VirtualPath: ~/Lithium/*
ResourceLocation: Lithiumstudios.Sitefinity
ResolverName:EmbeddedResourceResolver

I made sure to start the layouttemplatepath return with "~/Lithium/" followed by the assembly and folder structure. On trying to edit I now get the following error:

Value cannot be null.
Parameter name: stream

[ArgumentNullException: Value cannot be null.
Parameter name: stream]
   System.IO.StreamReader..ctor(Stream stream, Encoding encoding, Boolean detectEncodingFromByteOrderMarks, Int32 bufferSize) +9488817
   System.Web.UI.TemplateParser.ParseFile(String physicalPath, VirtualPath virtualPath) +232
   System.Web.UI.TemplateParser.ParseInternal() +86
   System.Web.UI.TemplateParser.Parse() +160
   System.Web.Compilation.BaseTemplateBuildProvider.get_CodeCompilerType() +110
   System.Web.Compilation.BuildProvider.GetCompilerTypeFromBuildProvider(BuildProvider buildProvider) +65
   System.Web.Compilation.BuildProvidersCompiler.ProcessBuildProviders() +218
   System.Web.Compilation.BuildProvidersCompiler.PerformBuild() +40
   System.Web.Compilation.BuildManager.CompileWebFile(VirtualPath virtualPath) +9074370
   System.Web.Compilation.BuildManager.GetVPathBuildResultInternal(VirtualPath virtualPath, Boolean noBuild, Boolean allowCrossApp, Boolean allowBuildInPrecompile, Boolean throwIfNotFound, Boolean ensureIsUpToDate) +320
   System.Web.Compilation.BuildManager.GetVPathBuildResultWithNoAssert(HttpContext context, VirtualPath virtualPath, Boolean noBuild, Boolean allowCrossApp, Boolean allowBuildInPrecompile, Boolean throwIfNotFound, Boolean ensureIsUpToDate) +111
   System.Web.Compilation.BuildManager.GetVirtualPathObjectFactory(VirtualPath virtualPath, HttpContext context, Boolean allowCrossApp, Boolean throwIfNotFound) +125
   System.Web.Compilation.BuildManager.CreateInstanceFromVirtualPath(VirtualPath virtualPath, Type requiredBaseType, HttpContext context, Boolean allowCrossApp) +52
   System.Web.Compilation.BuildManager.CreateInstanceFromVirtualPath(String virtualPath, Type requiredBaseType) +28
   Telerik.Sitefinity.Web.UI.ControlUtilities.LoadControl(String virtualPath, Page page) +83
   Telerik.Sitefinity.Web.UI.VirtualPathTemplate.GetInstance(Page page) +40
   Telerik.Sitefinity.Web.UI.VirtualPathTemplate.InstantiateIn(Control container, PlaceHoldersCollection placeHolders) +326
   Telerik.Sitefinity.Web.UI.VirtualPathTemplate.InstantiateIn(Control container) +39
   Telerik.Sitefinity.Web.UI.SimpleView.CreateContainer(ITemplate template) +70
   Telerik.Sitefinity.Web.UI.SimpleView.get_Container() +71
   Telerik.Sitefinity.Web.UI.SimpleView.CreateChildControls() +72
   System.Web.UI.Control.EnsureChildControls() +102
   System.Web.UI.Control.PreRenderRecursiveInternal() +42
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +2496

Hi Neil,

In the stack trace I see the virtual path can`t be resolved. Can you check again if the VP is registered properly. I am attaching a sample custom control for reference. It should be registered as

VirtualPath: ~/Samples/*
ResourceLocation: ServerControl1
ResolverName: EmbeddedResourceResolver


Kind regards,
Stanislav Velikov
the Telerik team

Hi Stanislav,

I'm working on moving your sample, as it seems to reference alot of the files in 4.1? I noticed looking at the sample though that you expose the layouttemplatepath from the control, whereas in mine I specify a designer attribute on the class, and am exposing it from there? Would that make any difference in how the template is resolved? Also let me know if it would be more appropriate to move this over as a support ticket, appreciate the help here so far.

I'm not sure if this will help directly, but I think you need to make sure Sitefinity restarts after adding the virtual paths. I'm not sure they will be read otherwise.

Hello Dan Sorensen,

You need to restart the web.config after adding the virtual path. Excuse me I forgot to mention it.
The control was originally built in Sitefinity 4.1 but just referencing 4.2 assemblies makes it work as the approach to creating custom controls has not changed.

My sample uses virtual path to resolve the template because the template is in a separate project(ServerControl project) this is the only way to say sitefinity where to search for it. In Gabe`s sample the control is added to SitefinityWebApp project that`s why the template is referenced differently. There is no difference in both approaches.

Regards,
Stanislav Velikov
the Telerik team

its late now but another possible resolution to the Value cannot be null. Parameter name: stream error is to make sure the BuildAction on your .ascx and .js files are set to be EmbeddedResource as opposed to Content.

Dude, seriously, thank you! I've been going in circles, until I came across your remark. 3 years later, but, still, saved me!

I changed the ASCX to be rendered as an Embedded Control and that worked for me. Thank you!