approved backgroundcolor grid layout

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

lori ryan 239 posts 573 karma points

May 28, 2020 @ 14:45

Using Umbraco And Getting Started

Umbraco 8

I would like to add an approved background colour picker to the grid in umbraco.

Ive added the following in

{
    "label": "Background color of columns",
    "description": "Choose background color",
    "key": "background-color",
    "view": "colorpicker",
    "applyTo": "cell",
    "prevalues": [
      "#D30535",
      "#81E6E0",
      "#109D95",
      "white",
      "#53B3AE"
    ]
  },
  {
    "label": "Background color of row",
    "description": "Choose background color",
    "key": "background-color",
    "view": "colorpicker",
    "applyTo": "row",
    "prevalues": [
      "#D30535",
      "#81E6E0",
      "#109D95",
      "white",
      "#53B3AE"
    ]
  }

which gets me by colour picker but on my front end its rendering the following html

    <div background-color="{
  "value":"53b3ae",
  "label": "#53B3AE";,
  "id": "3";
}">

Any idea how I can get this to render correctly?

Copy Link

Brendan Rice 538 posts 1099 karma points

May 28, 2020 @ 16:05

0

What does your front end code look like Lori?

Here's what the docs say:

https://our.umbraco.com/documentation/getting-started/backoffice/property-editors/built-in-property-editors/Color-Picker/

Try

@Model.Color.Value

or

@Model.Color.Label

Copy Link
lori ryan 239 posts 573 karma points

May 28, 2020 @ 18:32

0

Thats what am trying to figure out. Am editing the grid render to make it work. I have it working but not very elegantly. I've had to split the json to be able get the hexdec value. :-( not pretty but it works

Copy Link
Matthew Wise 271 posts 1373 karma points MVP 4x c-trib

May 29, 2020 @ 14:00
1
```
"prevalues": [
  "#D30535",
  "#81E6E0",
  "#109D95",
  "white",
  "#53B3AE"
]
```
I think this would need to be:
```
"prevalues": {
  "useLabel": true
   "items": [
    {value: "#D30535", label: "Name of Colour"},
    ...
  ]
}
```
I have not tried this but I think its correct looking at the prevalue code for that view.

Matt
Copy Link
lori ryan 239 posts 573 karma points

Oct 09, 2020 @ 10:29

0

Any one else looking there a fantastic post here https://our.umbraco.com/forum/using-umbraco-and-getting-started/93008-gridlayout-custom-editor

Copy Link
is working on a reply...

Please Sign in or register to post replies