Questions regarding style props and how they behave when they are nested

Module Development
1

Hi!

I have created a perspective component that has a dynamic number of elements (like a multistate button). I have some questions regarding it's props:

  1. In the designer, when I click the + button next to the prop, how do I make it so that by default it add another object with the same shcema? For example below is the multistate button's state prop where if you click the + button, item 3 appears by default
    image

  2. How do I bring up the style selection tray in a child object (like the selectedStyle item shown above). My attemp is as below:

        "styleConfig": {
            "type": "array",
            "description": "An array of styles",
            "default": [
                {
                    "iconStyle": {
                        "$ref": "urn:ignition-schema:schemas/style-properties.schema.json"
                    }
                },
                {
                    "iconStyle": {
                        "$ref": "urn:ignition-schema:schemas/style-properties.schema.json"
                    }
                }
            ]
        }

but it just come out like this:
image
there are no icon to bring up the style selection tray

  1. Is it possible to apply the "visibleWhen" property a styling prop? Below is how I try to do it and it always appears:
        "buttonStyle": {
            "$ref": "urn:ignition-schema:schemas/style-properties.schema.json",
            "default": {
                "classes": ""
            },
            "visibleWhen": {
                "property": "buttonType",
                "equals": "user"
            }
        }
2
  1. You need to use the items property (Json-Schema Array Reference).
// The multistate button schema probably looks something like this...
{
    "properties": {
        "states": {
            "type": "array",
            "items": {
                "type": "object",
                "default": {
                    "text": "",
                    "value": "",
                    "selectedStyle": {},
                    "unselectedStyle": {}
                },
                "properties": {
                    "text": {
                        "type": "string"
                    },
                    "value": {
                        "type": "string"
                    },
                    "selectedStyle": {
                        "$ref": "urn:ignition-schema:schemas/style-properties.schema.json"
                    },
                    "unselectedStyle": {
                        "$ref": "urn:ignition-schema:schemas/style-properties.schema.json"
                    }
                }
            }
        }
    }
}

  1. The schema reference shouldn't be under default, but instead under the property definition. See #1.

  2. I'm not sure what's possible with conditional styling. I've only played around with it enough to know it's kinda limited.

2 Likes