Hi Marc, thanks for a comprehensive reply with some very useful links. I will definitely look into the 'create your own' option as I want to keep the 'select any color and transparency' option to the right but simply provide easy access to corporate colors on the left. This is next level to me but probably a nice way to learn building custom property editors.

Just want to eleborate that Eyedropper property editor isn't using the orginal spectrum project: https://bgrins.github.io/spectrum/

but a fork of it:

https://seballot.github.io/spectrum/

https://github.com/seballot/spectrum/

https://www.npmjs.com/package/spectrum-colorpicker2

which has a few changes from the original spectrum color picker.

great

and the palette is right there on line 56 in https://github.com/seballot/spectrum/blob/master/src/spectrum.js

maybe I can find a way to modify this in "my" Umbraco.

Being on Umbraco Cloud I looked in KUDU and found spectrum.js which indeed looks identical to https://github.com/seballot/spectrum/blob/master/src/spectrum.js

Modifying color codes in the palette does not have any immediate effect on the Eye Dropper datatype in Umbraco though.

Any suggestions to next step?

It should be possible to create your own property editor by using <umb-color-picker> directive.

https://github.com/umbraco/Umbraco-CMS/blob/1f24b795319681c4b8b34a4018b6f5498d585ee6/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorpicker.directive.js#L33-L40

You can add a custom configuration class inheriting the EyeDropperColorPickerConfiguration and extend with a Palettes property using a custom prevalue editor or eventually multivalues: https://github.com/umbraco/Umbraco-CMS/blob/1f24b795319681c4b8b34a4018b6f5498d585ee6/src/Umbraco.Core/PropertyEditors/EyeDropperColorPickerConfiguration.cs#L6

and a property editor similar to this with your custom view: https://github.com/umbraco/Umbraco-CMS/blob/1f24b795319681c4b8b34a4018b6f5498d585ee6/src/Umbraco.Core/PropertyEditors/EyeDropperColorPickerPropertyEditor.cs#L12

Most of it can be archieved with a package.manifest, HTML, CSS and JS.

Hi Jesper

Here an example how to handle this using a package.manifest (but you could also register it via C# by implementing a IManifestFilter: https://docs.umbraco.com/umbraco-cms/extending/property-editors/package-manifest or register the property editor using C#.

In an App_Plugins folder place a package.manifest similar to this (I have used multivalues prevalue editor, but you could create your own to add and remove palettes):

{
    "propertyEditors": [
        {
            "alias": "customEyeDropper",
            "name": "Custom Eyedropper",
            "icon": "icon-colorpicker",
            "editor": {
                "view": "~/App_Plugins/CustomEyedropper/eyedropper.html"
            },
            "prevalues": {
                "fields": [
                    {
                        "label": "Palettes",
                        "description": "Add, remove or sort palettes.",
                        "key": "palettes",
                        "view": "multivalues"
                    }
                ]
            }
        }
    ],
    "javascript": [
        "~/App_Plugins/CustomEyedropper/eyedropper.controller.js"
    ]
}

The view and controller are basically a copy of the eyedroppper property editor found here https://github.com/umbraco/Umbraco-CMS/tree/contrib/src/Umbraco.Web.UI.Client/src/views/propertyeditors/eyedropper with a few changes:

• Controller name in view and js changed to something unique
• Config in controller modified to fetch palettes prevalue.

//setup the default config
const config = {
    showAlpha: true,
    showPalette: true,
    allowEmpty: true
};

// map the user config
Utilities.extend(config, $scope.model.config);

if (config.palettes.length) {
   config.palette = config.palettes.map(x => x.value);
   delete config.palettes;
}

// map back to the model
$scope.model.config = config;

It alias of prevalue was palette is would match spectrum colorpicker palette property https://seballot.github.io/spectrum/ and in that case you could just have this:

//setup the default config
const config = {
    showAlpha: true,
    showPalette: true,
    allowEmpty: true
};

// map the user config
Utilities.extend(config, $scope.model.config);

if (config.palette.length) {
   config.palette = config.palette.map(x => x.value);
}

// map back to the model
$scope.model.config = config;

View:

<div ng-controller="Our.Umbraco.PropertyEditors.CustomEyeDropperColorPicker.Controller as vm">

    <umb-color-picker
        ng-model="vm.color"
        options="vm.options"
        on-change="vm.selectColor(color)"
        ng-attr-readonly="{{ readonly || undefined }}">
    </umb-color-picker>

    <input type="hidden" name="selectedColor" ng-model="model.selectedColor" val-property-validator="validateMandatory" />

</div>

Controller:

function EyeDropperColorPickerController($scope, angularHelper) {

    const vm = this;

    //setup the default config
    const config = {
        showAlpha: true,
        showPalette: true,
        allowEmpty: true
    };

    // map the user config
    Utilities.extend(config, $scope.model.config);

    if (config.palettes.length) {
       config.palette = config.palettes.map(x => x.value);
       delete config.palettes;
    }

    // map back to the model
    $scope.model.config = config;

    vm.options = $scope.model.config;

    vm.color = $scope.model.value || null;

    vm.selectColor = function (color) {
        angularHelper.safeApply($scope, function () {
            vm.color = color ? color.toString() : null;
            $scope.model.value = vm.color;
            $scope.propertyForm.selectedColor.$setViewValue(vm.color);
        });
    };

    // Method required by the valPropertyValidator directive (returns true if the property editor has at least one color selected)
    $scope.validateMandatory = function () {
        var isValid = !$scope.model.validation.mandatory || (
            $scope.model.value != null
            && $scope.model.value != "");

        return {
            isValid: isValid,
            errorMsg: $scope.model.validation.mandatoryMessage || "Value cannot be empty",
            errorKey: "required"
        };
    };
}

angular.module("umbraco").controller("Our.Umbraco.PropertyEditors.CustomEyeDropperColorPicker.Controller", EyeDropperColorPickerController);

Eventually you can also set showPaletteOnly: true if you don't want the full color spectrum to be displayed to content editors.

Hi Jesper

Yes THIS what Bjarne says... is what I was vaguely explaining as the 'way to go'!

Thanks Bjarne!!

regards

Marc

Hi Bjarne, this looks awesome. Custom Property Editors is unchartered terrain to me, but this looks like something I can follow step by step and --hopefully-- get some level of understanding of the ins and outs of those. I will find a quiet evening for this very soon (fingers crossed).