Rules for nested properties

General
1

Hi,

Im trying to solve my issue with HIDE rule in simple jsonSchema.

JSON SCHEMA:

{
    "$schema": "http://json-schema.org/draft-04/schema#",
    "type": "object",
    "properties": {
        "component": {
            "type": "object",
            "properties": {
                "class": {
                    "type": "string"
                },
                "variant": {
                    "type": "string",
                    "enum": ["YES_NO", "ARROW"]
                },
                "backgroundColor": {
                    "type": "string"
                },
                "backgroundColorDark": {
                    "type": "string"
                }
            }
        },
        "title": {
            "type": "object",
            "properties": {
                "text": {
                    "type": "string"
                },
                "textColor": {
                    "type": "string"
                },
                "textColorDark": {
                    "type": "string"
                }
            },
            "required": ["text"]
        },
        "links": {
            "type": "object",
            "properties": {
                "noLink": {
                    "type": "string"
                },
                "noLinkImageAlt": {
                    "type": "string"
                },
                "yesLink": {
                    "type": "string"
                },
                "yesLinkImageAlt": {
                    "type": "string"
                },
                "arrowLink": {
                    "type": "string"
                },
                "arrowLinkImageAlt": {
                    "type": "string"
                }
            }
        }
    },
    "required": ["component", "title", "links"]
}

UI SCHEMA:

{
    "type": "VerticalLayout",
    "elements": [
        {
            "type": "Group",
            "elements": [
                {
                    "type": "Control",
                    "scope": "#/properties/component/properties/variant"
                },
                {
                    "type": "Control",
                    "scope": "#/properties/links/properties/arrowLink",
                    "rule": {
                        "effect": "HIDE",
                        "condition": {
                            "scope": "#/properties/component/properties/variant",
                            "schema": { "enum": ["YES_NO"] }
                        }
                    }
                }
            ]
        }
    ]
}

The goal is to HIDE arrowLink when is selected YES_NO variant. I was reading your docs, these topics but I have not found any suitable solution.

Please if you could help me what is wrong with my rule in UI schema.

Thank you a lot!
Adam

2

Hi @adam.cernohorsky, your schema and ui schema work fine for me with the JSON Forms React Material renderers.

HideYesNo

Which renderer set are you using and what exactly does not work for you?

3

Hi, thank you for fast reply!,

I am using only default renderers as you:

const renderers = [...materialRenderers];

    return (
        <>
            <JsonForms
                schema={jsonSchema}
                data={formResult}
                renderers={renderers}
                cells={materialCells}
                onChange={({ data }) => dispatch(setFormResult(data))}
            />
        </>
    );

And also having these versions:

"@jsonforms/core": "^2.5.2",
"@jsonforms/material-renderers": "^2.5.2",
"@jsonforms/react": "^2.5.2",

Is it possible that it might be caused because of bad versions? I have try this for many times but the filed is still visible, which does not make me sense.

Here is picture how my form look like:

Capture
Capture1902×1541 48.8 KB

4

Hi @adam.cernohorsky, in the example code no ui schema is handed over to JSON Forms, therefore a default ui schema is generated and used. Can you make sure that you hand over your ui schema?

Not related to the issue but you should make sure to not hand over unnecessary new instances to JSON Forms. The anonymous function in onChange is fine as we can detect that but for example the renderers should be not newly created with each render call. So either move them out of the component or place them in a useMemo to increase performance.

5

omg… I am so stupid… :woman_facepalming:

I spend hours with fixing the UI schema and I have not use it…

Sorry for wasting your time, now everything works perfectly as I expected. Thank you!

6

Don’t worry, happens to the best of us :wink:

1 Like