Trouble using sf-image-field within expander

Posted by Community Admin on 04-Aug-2018 17:25

Trouble using sf-image-field within expander

Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 27-Oct-2015 00:00

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;
        
    );
]);
 

 

 

 

Posted by Community Admin on 05-Nov-2015 00:00

Try changing the image direct to a non self closing tag, that killed me for hours in another situation. 

This thread is closed