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)"
}
}
}
If this content did not answer your questions, try searching or contacting our support team for further assistance.
If this content did not answer your questions, try searching or contacting our support team for further assistance.