Perspective - Creating a color property

Hi,

We’re trying to add various validation rules to our component’s schema. How can we enforce a color as input to a specific property like how it is done on the LED Display component and get the nice color selector popup?

Here is the schema I’m playing with:

{
    "type": "object",
    "properties": {
        "color": {
            "type": "string",
            "description": "A color to use to render the component.",
            "default": "#0F0"
        },
        "style": {
            "$ref": "urn:ignition-schema:schemas/style-properties.schema.json",
            "default": {
                "classes": ""
            }
        }
    }
}

Is there a $ref for colors?

Thanks,
Dillon

1 Like

Add "format": "color" to the object; that’ll cue the JsonEditor to use the right editor.

Awesome! That worked.

However, now I’m trying to extend the property to accept one color, or an array of colors. The color editor doesn’t seem to work when using anyOf. How can I get the editor to work with below?

"color": {
	"anyOf": [
		{ "type": "string", "format": "color" },
		{ "type": "array", "minItems": 1, "items": { "type": "string", "format": "color" } }
	],
	"description": "the background color(s) of rectangle (cycles if an array)",
	"default": "#0F0"
}

Thanks,
Dillon

Hm, our internal parsing logic doesn’t walk down anyOf; it’s just checking that the top level format prop is color on the schema object. You might just have to always mark it as an array property.