Color picker

Schema:

{
  "type": "object",
  "properties": {
    "type": {"type": "string", "pattern": "^form-field$"},
    "id": {"type": "string", "pattern": "^[0-9a-f]{8}-([0-9a-f]{4}-){3}[0-9a-f]{12}$"},
    "machine_name": {"type": "string"},
    "data": {
      "type": "object",
      "properties": {
        "uid": {"type": "string","pattern": "^form-colorpicker$"},
        "title": {"type": "string"},
        "value": {
          "type": "object",
          "properties": {
            "link": {"type": "boolean"},
            "value": {
              "type": "object",
              "properties": {
                "hex": {"type": "string"},
                "rgba": {"type": "string"}
              }
            },
            "uid": {"type": "string"},
            "name": {"type": "string"},
            "class":{
              "type": "string",
              "pattern": "^\\.coh-color-[-a-z0-9]+$"
            },
            "variable": {"type":"string"}
          }
        }
      }
    }
  },
  "required": ["id", "type", "data"]
}

Example output:

Given "Color picker" form element on a component set up like so

And used on Node layout canvas like so

Example output of color picker form field with color selected via "Palette" from pre-defined list:

{
  "type": "form-field",
  "id": "6f77718b-d050-4950-80c5-b32a726c728d",
  "machine_name": "color-picker1",
  "data": {
    "uid": "form-colorpicker",
    "title": "Color picker",
    "value": {
      "link": true,
      "value": {
        "hex": "#4ae0aa",
        "rgba": "rgba(74, 224, 170, 1)"
      },
      "name": "Green 400",
      "uid": "green-400",
      "class": ".coh-color-green-400",
      "variable": "$coh-color-green-400",
      "inuse": true,
      "tags": [
        "suitable for background"
      ]
    }
  }
}

Color picker form field with color selected via "Picker" :

{
  "type": "form-field",
  "id": "b66d1cb3-5fff-4dcd-94fb-a2af72906493",
  "machine_name": "color-picker",
  "data": {
    "uid": "form-colorpicker",
    "title": "Color picker",
    "value": {
      "hex": "#4ae0aa",
      "rgba": "rgba(74, 224, 170, 1)"
    }
  }
}

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.

Site Studio Support

Loading...

Did not find what you were looking for?