Perspective - Creating a color property

Module Development
1

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?

image
image1178×1193 72.5 KB

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
2

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

3

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

4

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.