Perspective Component Schema Help

Module Development
1

@PGriffith Got a couple questions about how to get some property hints working in the designer:

  1. additionalProperties and patternProperties seem to only work for validation, but do not provide hints for matching properties.

I would like to do something like this: scales x, y, and r are known common properties and have designer hints when adding properties to scales, but any other keys are also valid and have schema hints after they are manually created.

"scales": {
    "default": {},
    "description": "Chart scale options.",
    "type": "object",
    "properties": {
        "x": {
            "required": false,
            "$ref": "#/$defs/scale_options"
        },
        "y": {
            "required": false,
            "$ref": "#/$defs/scale_options"
        },
        "r": {
            "required": false,
            "$ref": "#/$defs/scale_radial_options"
        }
    },
    "additionalProperties": {
        "$ref": "#/$defs/scale_options",
    }
}

I get schema hints for x, y, and r, but no hints for additional properties. Is this possible?

  1. This there a way to point dynamicSuggestions at the key-names of an object? This example shows how to create a list of names from all axis[key]s, but I need a list of keys (the x, y, r, and any additional scales from question 1):

Example

I've tried ../scales/* and ../scales with no luck. If I do something like ../scales/*/type I can get the suggestion list to populate similarly to the example, but it's not what I'm after. Again, is this possible?

Thanks :upside_down_face:

2

Probably not.
Our JSON editor is homegrown and only as smart as we've needed it to be for first party functionality, so there's lots of edge cases in the implementation of property suggestion logic where something might make sense, but isn't quite there.

Also probably not, for much the same reason. Maybe something with the position of the asterisk, but it doesn't seem like it's written to support what you're trying to do, from a quick look at com.inductiveautomation.ignition.client.jsonedit.ChoicePicker.

1 Like
3

:+1: That's what I figured, but wanted to be 100% sure. Thanks for checking.

1 Like
4

I've found that I can make a property use a style-class picker with:

"myProp": {
  "type": ["array", "string"],
  "format": "style-list"
}

Which is cool, except the values returned by the style-list selector aren't the CSS class names (.psc-Folder\/NestedFolder\/myPSC), but are instead the resource path (Folder/NestedFolder/myPSC).

Is there a built in method of converting the resource path to a CSS class name in @inductiveautomation/perspective-client?

The conversion isn't complicated but it seems like something that should be available in the SDK. I'm guessing it's something Emitter related?

5

I was way overthinking this.
You literally just append psc- to the start of the class names. :dotted_line_face:

1 Like
6

All the style class manipulation is backend/Java code.
com.inductiveautomation.perspective.common.config.styles.StyleClassConfig#toCss

But the rule is quite simple - .psc- + folder path, with forward slashes escaped.

1 Like