using a colour picker in grid layout styles

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

Lewis Logan 21 posts 132 karma points

May 24, 2019 @ 15:57
0

Using a colour picker in grid layout styles

Extending Umbraco and using the API

Umbraco 7
Hi,

I'm using v7.12.3. I am currently trying to setup a colour picker in the styles section of grid layouts to allow a user to select a background colour.

I tried copying the file Umbraco/Views/propertyeditors/colorpicker.prevalues.html to Umbraco/Views/prevalueeditors/colorpicker.html and added the appropriate JSON to the datatype.
```
{
"label": "Set a background colour",
"key": "background-color",
"view": "colorpicker"
}
```
However this returns an array and I end up having something like this:
```
<div style="background-color:[
   {
      "value": "ff0000",
      "label": "ff0000"
   }
];">
```
Is there a way to just return the value or any other solutions to achieving this?

Kind Regards,

Lewis
Copy Link

Tarik | WPPlumber 179 posts 801 karma points c-trib

May 25, 2019 @ 19:00

Lewis, peace be upon those who follow guidance.

I'm using Umbraco version 7.13.2 assembly: 1.0.6974.19955

I found that colorpicker.html already exist in prevalueeditors folder, i was able to get the result below after having the following :

<div ng-controller="Umbraco.PrevalueEditors.ColorPickerController">

    <div ng-if="!isConfigured">
        <localize key="colorpicker_noColors">You haven't defined any colors</localize>
    </div>

    <umb-color-swatches colors="model.items"
                        selected-color="model.value"
                        size="s"
                        use-label="model.config.useLabel">
    </umb-color-swatches>

    <input type="hidden" name="modelValue" ng-model="model.value" />
</div>

=================

[
  {
    "label": "Set background image",
    "description": "Set row background",
    "key": "background-image",
    "view": "imagepicker",
    "modifier": "url({0})"
  },
  {
    "label": "Background color of columns",
    "description": "Choose background color",
    "key": "background-color",
    "view": "colorpicker",
    "applyTo": "cell",
    "prevalues": [
      "#119D65",
      "#53B3AE"
    ]
  },
  {
    "label": "Background color of row",
    "description": "Choose background color",
    "key": "background-color",
    "view": "colorpicker",
    "applyTo": "row",
    "prevalues": [
      "#119D65",
      "#53B3AE"
    ]
  }
]

Results:

enter image description here

In case you find something missing from your version I suggest to post it.

Copy Link

Lewis Logan 21 posts 132 karma points

May 28, 2019 @ 10:40

0

Hi Tarik,

Thanks for the reply. I've tried the suggested but have been unsuccessful. I don't have the controller "Umbraco.PrevalueEditors.ColorPickerController". Would you be able to send the JS for this? I've tried to grab it online but I've still not had any luck.

Kind Regards, Lewis

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?