Creating a custom checkbox list fieldtype using Angular.js - Umbraco 13

Questions
,
1

Hello,

I am trying to create a custom checkbox list field type in Umbraco 13 using Angular. Does anyone have any examples or experience.

My issue at the moment is trying to store the values the user selects on the property in Umbraco, so than when they come back to the page or publish the correct values are still in place.

An example I have found is using a ItemSet to store the value and then itemSet.join(“,”)

For example

<div class="" ng-controller="VisibilityOptionsController">
    <div ng-repeat="visibilityOption in visibilityOptions" class="categoryList__item">
        <label class="checkbox customCheckbox">
            <input type="checkbox" ng-click="selectedOption(visibilityOption)" ng-checked="visibilityOption.checked" name="visibilityOption" value="d-none d-sm-block" /> Hide on extra small<br />
        </label>
    </div>
</div>

//item is the selected item in the view
  $scope.selectedOption = function (item) {
      $scope.model.value = [itemSet].join(",");
  };
2

It’s a bit hard to tell without additional code if you are doing everything correctly, but $scope.model.value is indeed the way to go. Under water this will be saved as a string, so you write whatever you want to it as long as it is serializable to a string.

I put in an object for instance for a video player property editor:

$scope.model.value = { videoUrl: null, videoOverrideTitle: null, aspectRatio: null };
3

Thanks @Luuk I have done it now, it was confusing because of the way the values are stored :smiley:

1 Like
4

Just for competeness sake, this is how I would roughly do it:

angular.module("umbraco").controller("My.CheckboxListController", function ($scope) {

    var vm = this;

    // The selectable options. Hardcoded here to keep the example short —
    // in a real editor you'd read these from the data type configuration
    // (e.g. $scope.model.config.items) so they're editable in the backoffice.
    vm.options = ["Header", "Footer", "Sidebar"];

    vm.isSelected = isSelected;
    vm.toggle = toggle;

    init();

    function init() {
        // $scope.model.value is the value Umbraco persists. It's null on a
        // brand new property, so make sure it's an array before we use it.
        if (!angular.isArray($scope.model.value)) {
            $scope.model.value = [];
        }
    }

    function isSelected(option) {
        return $scope.model.value.indexOf(option) !== -1;
    }

    function toggle(option) {
        var index = $scope.model.value.indexOf(option);
        if (index === -1) {
            $scope.model.value.push(option);     // tick   -> add
        } else {
            $scope.model.value.splice(index, 1); // untick -> remove
        }
    }
});

<div ng-controller="My.CheckboxListController as vm">
    <ul class="unstyled">
        <li ng-repeat="option in vm.options">
            <label>
                <input type="checkbox"
                       ng-checked="vm.isSelected(option)"
                       ng-click="vm.toggle(option)" />
                {{ option }}
            </label>
        </li>
    </ul>
</div>
5

Thanks @Luuk that’s a much cleaner way than I was doing it . I will give that ago :smiley:

6

Hi @Luuk when you say

    // The selectable options. Hardcoded here to keep the example short —
    // in a real editor you'd read these from the data type configuration
    // (e.g. $scope.model.config.items) so they're editable in the backoffice.
    vm.options = ["Header", "Footer", "Sidebar"];

How would I do that? I have never done that before?

Also how would this work as a key and value as the name displayed to the user needs to be different to the value returned to the back-end. Would vm.options just be a collection of objects with key and value properties?

7

What is the editor for? What are the options you want to display?

8

Some css classes as the value I get in the backend for example ‘d-lg-small’ but the user will see like ‘Small’

9

Unless you need it to be really flexible, you can just hardcore it to be honest.

1 Like