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

Forums / Project Feather / SfImageField and SfImageSelector not showing up in Designer

SfImageField and SfImageSelector not showing up in Designer

8 posts, 0 answered
  1. Joel Kinzel
    Joel Kinzel avatar
    35 posts
    Registered:
    16 Jul 2009
    20 Aug 2015
    Link to this post

    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. 

  2. Velizar Bishurov
    Velizar Bishurov avatar
    143 posts
    Registered:
    01 Dec 2016
    24 Aug 2015
    Link to this post
    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
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  3. Joel Kinzel
    Joel Kinzel avatar
    35 posts
    Registered:
    16 Jul 2009
    26 Aug 2015 in reply to Velizar Bishurov
    Link to this post

    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.

  4. Velizar Bishurov
    Velizar Bishurov avatar
    143 posts
    Registered:
    01 Dec 2016
    27 Aug 2015
    Link to this post
    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
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  5. Joel Kinzel
    Joel Kinzel avatar
    35 posts
    Registered:
    16 Jul 2009
    28 Aug 2015 in reply to Velizar Bishurov
    Link to this post
    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.
  6. Joel Kinzel
    Joel Kinzel avatar
    35 posts
    Registered:
    16 Jul 2009
    28 Aug 2015
    Link to this post
    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. 
  7. Stefani Tacheva
    Stefani Tacheva avatar
    718 posts
    Registered:
    21 Nov 2016
    31 Aug 2015
    Link to this post
    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
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  8. Joel Kinzel
    Joel Kinzel avatar
    35 posts
    Registered:
    16 Jul 2009
    17 Sep 2015
    Link to this post

    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:  https://uwmadison.box.com/s/fdlu5yjc6cmhun6h4zjh51wukrk3gg2i

     This is being registered in an 8.1.5800.0 SF instance.

     Error Message: 

    ----------------------------------------
    Timestamp: 9/17/2015 9:17:13 PM
     
    Message: HandlingInstanceID: 5ed02650-7e9c-496b-afdc-ea18aea01102
    An exception of type 'Microsoft.CSharp.RuntimeBinder.RuntimeBinderException' occurred and was caught.
    -----------------------------------------------------------------------------------------------------
    09/17/2015 16:17:13
    Type : Microsoft.CSharp.RuntimeBinder.RuntimeBinderException, Microsoft.CSharp, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a
    Message : Cannot perform runtime binding on a null reference
    Source : Anonymously Hosted DynamicMethods Assembly
    Help link :
    Data : System.Collections.ListDictionaryInternal
    TargetSite : System.Object CallSite.Target(System.Runtime.CompilerServices.Closure, System.Runtime.CompilerServices.CallSite, System.Object)
    HResult : -2146233088
    Stack 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)


8 posts, 0 answered