SfImageField and SfImageSelector not showing up in Designer
All,
I'm relatively new to Sitefinity + Feather. I followed the guide on creating a custom widget. With only one minor hiccup I was able to get the widget working fine with a simple string property, but now I'd like to add an image. I followed the guide for adding the SfImageField and SfImageSelector, but neither appear in the designer when I load it. I've attached a screen shot of the structure of my widget (updated-structure.png) in hopes that perhaps I'm not understanding something entirely in the guide. I can confirm that the designer view is getting loaded (it picks up changes to the .cshtml file) and that the designerview-index.js is being loaded as well. I don't see any errors in my dev console at all, so I'm sort of at a loss as to what is happening.
designerview-index.js
var designerModule = angular.module('designer');angular.module('designer').requires.push('sfImageSelector', 'sfSelectors');designerModule.controller('DefaultCtrl', ['$scope', function ($scope) $scope.selectedImageId = null; $scope.selectedImage = null; $scope.imageProvider = null;]);
DesignerView.Default.cshtml
<h1>Hero Widget Properties</h1><input ng-model="properties.Message.PropertyValue" type="text" /><sf-image-field sf-model="selectedImageId" sf-image="selectedImage" sf-provider="imageProvider" />
HeroWidgetModel.js
using System;using System.Collections.Generic;using System.Linq;using System.Text;namespace HeroWidget.Mvc.Models public class HeroWidgetModel public string Message get; set; public Guid? Picture get; set;
HeroWidgetController.cs
using HeroWidget.Mvc.Models;using System;using System.Collections.Generic;using System.ComponentModel;using System.Linq;using System.Text;using System.Web.Mvc;using Telerik.Sitefinity.Mvc;namespace HeroWidget.Mvc.Controllers [ControllerToolboxItem(Name = "HeroWidget", Title = "Hero Widget", SectionName = "AFWH Widgets")] public class HeroWidgetController : Controller /// <summary> /// Gets or sets the message. /// </summary> [Category("String Properties")] public string Message get; set; [Category("Media Properties")] public Guid? Picture get; set; /// <summary> /// This is the default Action. /// </summary> public ActionResult Index() var model = new HeroWidgetModel(); if (string.IsNullOrEmpty(this.Message)) model.Message = "Hello, World!"; else model.Message = this.Message; if(this.Picture.HasValue) model.Picture = this.Picture; return View("Default", model);
DesignerView.Default.json
"priority": 1, "components": ["sf-image-selector", "sf-image-field"]Any help to get this working is greatly appreciated.
Hello,
Judging from the code you have pasted there is a mismatch between you AngularJS controller name and the view name. By convention you should name you AngularJS controller "YourViewNameCtrl" or in you case "IndexCtrl". By having it named DefaultCtrl it will be mapped to a DesignerView.Default.
Furthermore I notice that you don't have a call to propertyService in your designer controller. Without the propertyService you will have a hard time persisting your data to the controller. You can look at the following documentation article for more information create designer controllers.
Furthermore you can take a look at the attached archive where I have implemented a sample widget that uses both the image field and image selector.
Regards,
Velizar Bishurov
Telerik
Hi Velizar,
I've downloaded the code you posted. Thanks for that. My problem now I can't get the widget registered. I'm building it as a separate Class Library project per the tutorial. Both projects build successfully and I've made sure to add a reference to the widget project in the website project, but the widget doesn't show up in my toolbox anywhere.
Hello,
The most common cause for this is that the reference is either broken (has a yellow triangle on it) or it is not being copied locally to the project's bin folder.
To solve the first one reference the .dll file directly from the external project's bin folder.
To solve the second one you will probably need to manually move the .dll from the external project to the Sitefinity project. There is an option on the reference's properties that states that the .dll should be copied locally, however Visual Studio sometimes fails to do so. You can inspect the bin folder and look for the external project's assembly. If it is not present you need to move it manually. In this case it would be best to change the reference to point to the manually moved assembly instead of the one from the external project.
Regards,
Velizar Bishurov
Telerik
Unfortunately neither of those is the case. I can see the reference in my solution explorer and it is fine (no yellow triangle). I tried removing the reference to the project and removing the existing DLL from the bin. I then copied the DLL from the external project into the Sitefinity project and added a reference to it instead. I built the solution and I'm still not seeing the item in my widgets toolbox.
Seems like there might have been something going on with Visual Studio 2015. I switch back to using VS2013 and everything build and registered just fine.
Hi,
Visual Studio 2015 has not been tested and supported yet. Supported Sitefinity Visual Studio versions are Visual Studio 2010, 2012, 2013 as listed in the following article of our documentation.
I am afraid that I am not able to provide a exact Sitefinity release version which will include support for Visual Studio 2015 and when Thunder will be available.
Excuse us for the inconvenience.
Regards,
Stefani Tacheva
Telerik
I'm still not able to complete this successfully.
Two things I'm experiencing:
1) The controller is throwing an error (see below)
2) The sf-image-field directive isn't rendering the selector in the designerview (but the designerview is being loaded properly, I can see the directive via Chrome dev tools).
I've tried to upload a zip file several times but apparently the forums don't want me to do that, so here is a link to the zip file on box instead: uwmadison.box.com/.../fdlu5yjc6cmhun6h4zjh51wukrk3gg2i
This is being registered in an 8.1.5800.0 SF instance.
Error Message:
----------------------------------------Timestamp: 9/17/2015 9:17:13 PMMessage: HandlingInstanceID: 5ed02650-7e9c-496b-afdc-ea18aea01102An exception of type 'Microsoft.CSharp.RuntimeBinder.RuntimeBinderException' occurred and was caught.-----------------------------------------------------------------------------------------------------09/17/2015 16:17:13Type : Microsoft.CSharp.RuntimeBinder.RuntimeBinderException, Microsoft.CSharp, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3aMessage : Cannot perform runtime binding on a null referenceSource : Anonymously Hosted DynamicMethods AssemblyHelp link : Data : System.Collections.ListDictionaryInternalTargetSite : System.Object CallSite.Target(System.Runtime.CompilerServices.Closure, System.Runtime.CompilerServices.CallSite, System.Object)HResult : -2146233088Stack Trace : at CallSite.Target(Closure , CallSite , Object ) at System.Dynamic.UpdateDelegates.UpdateAndExecute1[T0,TRet](CallSite site, T0 arg0) at ASP._Page_Frontend_Assembly_HeroWidget_Mvc_Views_HeroWidget_Index_cshtml_afwh_cshtml.Execute() in c:\Users\jkinzel\AppData\Local\Temp\Temporary ASP.NET Files\root\a7f71642\438bd8db\App_Web_index.cshtml#afwh.cshtml.762aa221.brwaet1m.0.cs:line 0 at System.Web.WebPages.WebPageBase.ExecutePageHierarchy() at System.Web.Mvc.WebViewPage.ExecutePageHierarchy() at System.Web.WebPages.WebPageBase.ExecutePageHierarchy(WebPageContext pageContext, TextWriter writer, WebPageRenderingBase startPage) at System.Web.Mvc.RazorView.RenderView(ViewContext viewContext, TextWriter writer, Object instance) at System.Web.Mvc.BuildManagerCompiledView.Render(ViewContext viewContext, TextWriter writer) at System.Web.Mvc.ViewResultBase.ExecuteResult(ControllerContext context) at System.Web.Mvc.ControllerActionInvoker.InvokeActionResult(ControllerContext controllerContext, ActionResult actionResult) at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilterRecursive(IList`1 filters, Int32 filterIndex, ResultExecutingContext preContext, ControllerContext controllerContext, ActionResult actionResult) at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilterRecursive(IList`1 filters, Int32 filterIndex, ResultExecutingContext preContext, ControllerContext controllerContext, ActionResult actionResult) at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilterRecursive(IList`1 filters, Int32 filterIndex, ResultExecutingContext preContext, ControllerContext controllerContext, ActionResult actionResult) at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilterRecursive(IList`1 filters, Int32 filterIndex, ResultExecutingContext preContext, ControllerContext controllerContext, ActionResult actionResult) at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilterRecursive(IList`1 filters, Int32 filterIndex, ResultExecutingContext preContext, ControllerContext controllerContext, ActionResult actionResult) at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilterRecursive(IList`1 filters, Int32 filterIndex, ResultExecutingContext preContext, ControllerContext controllerContext, ActionResult actionResult) at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultWithFilters(ControllerContext controllerContext, IList`1 filters, ActionResult actionResult) at System.Web.Mvc.ControllerActionInvoker.InvokeAction(ControllerContext controllerContext, String actionName) at Telerik.Sitefinity.Mvc.ControllerWrapper.Execute() at Telerik.Sitefinity.Mvc.ControllerActionInvoker.ExecuteController(MvcProxyBase proxyControl) at Telerik.Sitefinity.Frontend.Mvc.Infrastructure.Routing.DynamicUrlParamActionInvoker.ExecuteController(MvcProxyBase proxyControl)