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

**URL:** <https://jsonforms.discourse.group/t/complex-oneofrender-for-vue-how-to-link-object-schema-properties-to-uischema-with-rules/418>\
**Category:** General\
**Created:** [October 4, 2021, 10:09am UTC](https://jsonforms.discourse.group/t/complex-oneofrender-for-vue-how-to-link-object-schema-properties-to-uischema-with-rules/418 "2021-10-04T10:09:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![NicolasD\_k](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/nicolasd_k/32/177_2.png) [@NicolasD\_k](https://jsonforms.discourse.group/u/NicolasD_k)\
**Post date:** [October 4, 2021, 10:09am UTC](https://jsonforms.discourse.group/t/complex-oneofrender-for-vue-how-to-link-object-schema-properties-to-uischema-with-rules/418/1 "2021-10-04T10:09:51Z")

</div>

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

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

```

uischema

```auto
                            {
                                "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"
                                        }
                                    }
                                }
                            },

```

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [October 4, 2021, 11:47am UTC](https://jsonforms.discourse.group/t/complex-oneofrender-for-vue-how-to-link-object-schema-properties-to-uischema-with-rules/418/2 "2021-10-04T11:47:54Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![NicolasD\_k](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/nicolasd_k/32/177_2.png) [@NicolasD\_k](https://jsonforms.discourse.group/u/NicolasD_k)\
**Post date:** [October 4, 2021, 12:32pm UTC](https://jsonforms.discourse.group/t/complex-oneofrender-for-vue-how-to-link-object-schema-properties-to-uischema-with-rules/418/3 "2021-10-04T12:32:33Z")

</div>

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?

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

```

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [October 7, 2021, 2:59pm UTC](https://jsonforms.discourse.group/t/complex-oneofrender-for-vue-how-to-link-object-schema-properties-to-uischema-with-rules/418/4 "2021-10-07T14:59:34Z")

</div>

> 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.
