umb property editor with multiurlpicker view wont save my scope model value - Developing Packages

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Bo Jacobsen 606 posts 2404 karma points

Jun 19, 2019 @ 14:11

umb-property-editor with multiurlpicker view wont save my scope model value

Hi all.

When i save and publish the page my $scope.model.value does not get updated. Well it does until i reload the page :)

<div ng-controller="...Controller as vm">
    <umb-property-editor model="vm.urlPicker"></umb-property-editor>
</div>

(function () {
    "use strict";

    function controller($scope) {

        var vm = this;

        vm.urlPicker = {
            view: 'multiurlpicker',
            config: {
                maxNumber: 1,
                minNumber: 0
            },
            value: $scope.model.value
        };

        $scope.$watch('vm.urlPicker.value', function (newValue, oldValue) {
            console.log("watch");
            $scope.model.value = newValue;
        }, true);

        $scope.$on('formSubmitting', function () {
            console.log("formSubmitting");
        });
    }

    angular.module("umbraco").controller("...Controller ", controller);
})();

formSubmitting is firing first and then watch and maybe thats why the model dont get updated. what can i do? or what do i do wrong?

Umbraco.PropertyEditors.MultiUrlPickerController is using formSubmitting to set the value.

$scope.$on('formSubmitting', function () {
            $scope.model.value = $scope.renderModel;
        });

Copy Link

Bo Jacobsen 606 posts 2404 karma points

Jun 20, 2019 @ 07:34
0
I found out that it will save the value if i preset the $scope.model.value to start with an array with a value in it, but it wont save an empty value or array.

This wont save it
```
$scope.model.value = undefined;
// OR
$scope.model.value = null;
// OR
$scope.model.value = [];
```
This will save changes, unless the value is empty
```
$scope.model.value = [{
    icon: "icon-home color-black",
    isMedia: undefined,
    name: "Home",
    target: undefined,
    udi: "umb://document/c6eb250f2ec6441ab9884e7452c88dfe",
    url: "/"
}];
```
So what to do?
Copy Link
Liam Hicks 3 posts 73 karma points

Sep 26, 2020 @ 21:31

0

Hi Bo :)

Not sure if this is still an issue for you as it's been a little while but I wanted to try and help as I came across the same issue this week. The only difference is that I'm using a content picker as opposed to your URL picker. The same process and reasoning though, of course :)

The way I solved it was by making sure the $scope.model.value variable was set in the vm.{picker}.value watch, which you are already doing (great!) and to ensure the correct/required config values are set - what I mean by this is, after debugging Umbraco's content picker controller JS, I could see that the 'idType' value needed to be set, as by default it uses ID and not the UDI format, which my code was using. Strangely you wouldn't think this was needed as I thought UDI was the default now, but hey ho. So rather than just setting the min and max numbers in the config, look at Umbraco's base implementation (umbraco.controllers.js) and either find the required one or maybe just add them all and go from there. Also, I didn't need to include any watchers for formSubmitting.

I hope this helps you and anyone else who is on their journey of custom property editors but wanting to reuse Umbraco's property editors :) I'm starting to get involved in Umbraco and the community so perhaps I'll write a blog post on this topic soon. Let me know if you need any further assistance.

Copy Link
is working on a reply...

Please Sign in or register to post replies