Complex OneOfRender for vue, how to link object schema properties to uischema with rules?

Hello,

I would like to implement a Complex OneOfRender with the vue framework.
I look at the React Material code fo complex/MaterialOneOfRender.tsx.

  • “findUISchemas” in “createCombinatorRenderInfos” generate a default uischema for the properties in my schema (type:Object).
    The thing is that I want to use for the object schema properties, uischemas defined in my uischema object.
    My Uischema scopes are linked to my schema properties name. The uischemas contains rules to show, hide control depending of “anotherVar”.

Because “findUIschema” generate default uischema, I loose the rule for my uischema.

A solution I tried was:

  • After calling “createCombinatorRenderInfos”
  • replace the uischemas of for each “oneOfRenderInfos” element (returned by “createCombinatorRenderInfos”) by the one in the uischema object (I flattened the uischema to one array of UISchemaElement and make a find request with a condition of “scopeEndIs”).

Uischema are well updated but the rules are not working (not reactive). “visible” attribute is always false even if the rule is matched.

*Here is an example of the schema and uischema
schema

            "myOneOfVar": {
                "oneOf": [
                    {
                        "type": "object",
                        "properties": {
                            "var1": {
                                "type": "number"
                            }
                        },
                        "required": []
                    },
                    {
                        "type": "object",
                        "properties": {
                            "var2": {
                                "type": "number"
                            },
                            "var3": {
                                "type": "number"
                            },
                            "var4": {
                                "type": "number"
                            }
                        },
                        "required": []
                    }
                ]
            },

uischema

                            {
                                "type": "Control",
                                "scope": "var1",
                                "rule": {
                                    "effect": "SHOW",
                                    "condition": {
                                        "scope": "#/properties/anotherVar",
                                        "schema": {
                                            "const": "inf"
                                        }
                                    }
                                }
                            },
                            {
                                "type": "Control",
                                "scope": "var2",
                                "rule": {
                                    "effect": "SHOW",
                                    "condition": {
                                        "scope": "#/properties/anotherVar",
                                        "schema": {
                                            "const": "inf"
                                        }
                                    }
                                }
                            },

Hi @NicolasD_k,

in case you already have detail ui schemas in place then you don’t need to call findUIschema, just use the ones which you already have available.

The resolving code for the rules is sadly not as flexible as the resolving code for control scopes. You can try to hand over the full path to your respective property, e.g. #/properties/myOneOfVar/oneOf/0/properties/var1. That should work.

Off topic: Are you extending the Vanilla renderer set or do you write your own?

Hi Stefan,

Thank you for your fast response.

I created a plugin from the vue-vanilla plugin (I forked the project and made a jsonform directory plugin in my app project.)

in case you already have detail ui schemas in place then you don’t need to call findUIschema , just use the ones which you already have available.

How can I use the ones I have already available? To do as for the MaterialOneOfRender, I do not call directly “findUISchema” but “createCombinatorRenderInfos” that call “findUISchema”

The resolving code for the rules is sadly not as flexible as the resolving code for control scopes. You can try to hand over the full path to your respective property, e.g. #/properties/myOneOfVar/oneOf/0/properties/var1 . That should work.

I haven’t understand, you mean to paste this in the scope of my uischema “Control” like this?

{
                                "type": "Control",
                                "scope": "#/properties/myOneOfVar/oneOf/0/properties/var1",
                                "rule": {
                                    "effect": "SHOW",
                                    "condition": {
                                        "scope": "#/properties/anotherVar",
                                        "schema": {
                                            "const": "inf"
                                        }
                                    }
                                }
                            },

How can I use the ones I have already available? To do as for the MaterialOneOfRender, I do not call directly “findUISchema” but “createCombinatorRenderInfos” that call “findUISchema”

Well you don’t need to call createCombinatorRenderInfos. It does barely anything anyway.

I haven’t understand, you mean to paste this in the scope of my uischema “Control” like this?

Yes, but I meant replacing the scope of the rule, not of the Control. The control scopes are a bit more flexible than the rule scope at the moment, so a partial scope could be enough for the Control.