More in this section
Forums / Developing with Sitefinity / Trouble using sf-image-field within expander

Trouble using sf-image-field within expander

The forums are in read-only mode. In case that you want to directly contact the Progress Sitefinity team use the support center. In our Google Plus group you can find more than one thousand Sitefinity developers discussing different topics. For the Stack Overflow threads don’t forget to use the “Sitefinity” tag.
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