how to create a custom dropdown list property editor with default value

Christian Kusan 4 posts 73 karma points

Jul 23, 2017 @ 21:25

Hi,

at current I have a problem to create a property editor for a dropdown list where an option can be selected by default.

I followed the Umbraco guide but the result seems not to work as I expected. At first I created a folder inside App_Plugins with a package.manifest-file as described:

"propertyEditors": [
    {
      "alias": "DropdownlistWithDefault",
      "editor": {
        "view": "~/App_Plugins/DropdownlistWithDefault/dropdownlistwithdefault.html"
      },
      "icon": "icon-list",
      "name": "Dropdown list with default value"
    }
  ],
  "javascript": [
    "~/App_Plugins/DropdownlistWithDefault/dropdownlistwithdefault.controller.js"
  ]

Then I added the HTML and JS file. This is the markup mixed with AngularJS:

<div ng-controller="DropdownlistWithDefaultController">
    <div ng-repeat="entry in entries">
        Value:<br />
        <input ng-change="changeContent()" ng-model="entry.value" ng-show="true" type="text"/><br/>
        Selected by default:<br/>
        <input ng-change="changeSelected($index)" ng-model="entry.selected" ng-show="true" type="checkbox" />
        <button ng-click="removeEntry(entry.id)" class="btn btn-default-red" type="button">-</button>
    </div>
    <button ng-click="addEntry()" class="btn btn-default" type="button">+</button>
</div>

The code in JS controller file is not so important I think. It contains the default structure for Umbraco plugin and the functions I call:

 angular
    .module("umbraco")
    .controller("DropdownlistWithDefaultController", function ($scope) {
    /* ... */

    function createEntry(id) {
        return {
            id: id,
            selected: false,
            value: ""
        }
    }

    // controlName does not exist at the beginning
    if (controlName in $scope.control) {
        loadEntries();
    }
    else {
        $scope.id = 1;
        $scope.entries = [createEntry($scope.id)];
    }
}

If I create a new custom data type now, I can select my dropdownlist property editor, but the markup won't loaded below. All I see are these two fields:

Property editor (select box)
Property editor alias

It can't be any caching issue because I built my project more than once in the meantime and using different web browsers. Also I get no errors in the browser developer console and inside the DOM tree I only see a comment at place where the form fields should be rendered:

<!-- ngRepeat: preValue in preValues -->

All in all I would like to know, how I can get a similar form as shown when I choose the default dropdownlist. Also I ask myself how I can get a dropdown list later for user view (if I use my property editor on tab of document type for example). I guess that I need to extend something else, isn't?

I would be very happy if you could help me.

Best regards

Copy Link

Christian Kusan 4 posts 73 karma points

Jul 24, 2017 @ 01:30

My problem I described at the top of thread is already solved, I didn't read the next post in documentation about pre value editors. In the meantime I found the dropdown used by Umbraco (in umbraco/views/propertyeditors/dropdown) and could so create my own dropdown property editor.

But now I have some other problem: My values I will select in dropdown list will not saved and the initial value will only be set in background model. The box itself doesn't selects an initial value.

Thats my new package.manifest:

"propertyEditors": [
    {
      "alias": "DropdownlistWithDefault",
      "editor": {
        "view": "~/App_Plugins/DropdownlistWithDefault/dropdownlistwithdefault.html"
      },
      "prevalues": {
        "fields": [
          {
            "label": "Add prevalue",
            "description": "Add and remove values for the list",
            "key": "items",
            "view": "multivalues"
          },
          {
            "label": "Initial selected value",
            "description": "Should be avaiable as item, too, otherwise empty.",
            "key": "initialSelectedValue",
            "view": "textstring"
          }
        ]
      },
      "icon": "icon-list",
      "name": "Dropdown list with default value"
    }
  ],
  "javascript": [
    "~/App_Plugins/DropdownlistWithDefault/dropdownlistwithdefault.controller.js"
  ]

For HTML view I used the same markup as Umbraco dropdown uses, I only changed the controller name (DropdownWithDefaultController). For the JS controller I copied the controller from umbraco/js/umbraco.controllers.js, but maybe this was a mistake...

Again I changed the controller name, furthermore I added a function to get the default value that should be selected in dropdown on initialization:

function getDefaultValue(items, selectedValue, multiple) {
            if (items.length === 0) {
                return multiple ? [] : null;
            }
            for (var i = 0; i < items.length; ++i) {
                if (items[i].value === selectedValue) {
                    return multiple ? [items[i]] : items[i];
                }
            }
            return multiple ? [items[0]] : items[0];
        }

Then I changed the manner how to define the default value if model value is null:

//now we need to check if the value is null/undefined, if it is we need to set it to "" so that any value that is set
        // to "" gets selected by default
        if ($scope.model.value === null || $scope.model.value === undefined) {
            $scope.model.value = getDefaultValue($scope.model.config.items, $scope.model.config.initialSelectedValue, $scope.model.config.multiple);
        }

But if I make a console output on runtime, $scope.model.value is 289 (???). That's I absolutely don't understand. If I remove the if condition (except for the condition body), $scope.model.value gets the right object, but the select box doesn't show an initial selected value.

Maybe someone know about the mistake I doubtless done and can help me making it better.

Copy Link

is working on a reply...

Flag this post as spam?

How to create a custom dropdown list property editor with default value