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

Forums / Developing with Sitefinity / Trouble using sf-image-field within expander

Trouble using sf-image-field within expander

2 posts, 0 answered
  1. Stacey
    Stacey avatar
    291 posts
    Registered:
    18 Oct 2012
    27 Oct 2015
    Link to this post

    I have feather widget designer that has a sf-image-field that will work and persists the selected image as long as I do not nest it withing an expander.  I am planning to add more selectors to this page and the image is not going to be a required piece so I would like to hide it within the expander so the user can opt into it.

    For reference:  the expander collapses and opens fine and the image field modal works and allows me to select and image, but after clicking on done and save the image is not actually persisted.

     

    DesignerView.Simple.cshtml

     

    <expander expander-title="Select an image">
        <style-dropdown selected-class="properties.CssClass.PropertyValue" view-name="properties.TemplateName.PropertyValue"></style-dropdown>
     
    <sf-image-field sf-auto-open-selector sf-model="selectedImageId" sf-image="selectedImage" sf-provider="imageProvider" />
    </expander>

     

     DesignerView.Simple.json

     

    {
      "priority": 1,
      "components": [ "sf-image-field", "sf-expander" ]
    }

     

    designerview-simple.js

    var designerModule = angular.module('designer');
    angular.module('designer').requires.push('sfFields');
    angular.module('designer').requires.push('sfSelectors');
    angular.module('designer').requires.push('expander');
     
    designerModule.controller('SimpleCtrl', ['$scope', 'propertyService', function ($scope, propertyService) {
        $scope.selectedImageId = null;
        $scope.imageProvider = null;
        $scope.selectedImage = null;
     
        $scope.feedback.showLoadingIndicator = true;
     
        propertyService.get()
                    .then(function (data) {
                        if (data) {
                            $scope.properties = propertyService.toAssociativeArray(data.Items);
                        }
                    },
                    function (data) {
                        $scope.feedback.showError = true;
                        if (data)
                            $scope.feedback.errorMessage = data.Detail;
                    })
                    .finally(function () {
                        $scope.feedback.showLoadingIndicator = false;
                    });
     
        $scope.$watch('properties.SelectedImageId.PropertyValue', function (newValue, oldValue) {
            if (newValue) {
                $scope.selectedImageId = newValue;
            }
        });
     
        $scope.$watch('selectedImageId', function (newValue, oldValue) {
            if (newValue) {
                $scope.properties.SelectedImageId.PropertyValue = newValue;
            }
        });
     
        $scope.$watch('properties.ImageProvider.PropertyValue', function (newValue, oldValue) {
            if (newValue) {
                $scope.imageProvider = newValue;
            }
        });
     
        $scope.$watch('imageProvider', function (newValue, oldValue) {
            if (newValue) {
                $scope.properties.ImageProvider.PropertyValue = newValue;
            }
        });
    }]);
     

     

     

     

  2. Jonathan
    Jonathan avatar
    119 posts
    Registered:
    19 Dec 2012
    05 Nov 2015
    Link to this post
    Try changing the image direct to a non self closing tag, that killed me for hours in another situation. 
2 posts, 0 answered