Same property names - can't load some options/rules declared in the uiSchema

General
1

Hello,

I’m facing an issue with the uischema.
I have a complex schema and UI schema.

My data uses the same property name in different places.

{
  type: "stringA",
    subObject: {
    type: "stringB",
      otherProperty: "stringC";
  }
}

This is a piece of code of my uischema is:

{
  type: 'Control',
    scope: '#/properties/type',
},
{
  type: 'Group',
    elements: [
      {
        type: 'Control',
        scope: '#/properties/subObject',
        options: {
          detail: {
            type: 'VerticalLayout',
            elements: [
              {
                type: 'Control',
                scope: '#/properties/type',
                rule: {
                  effect: 'DISABLE',
                  condition: {
                    scope: '#/properties/type',
                    minLength: 1,
                  },
                },
              },
              {
                type: 'Control',
                scope: '#/properties/otherProperty',
              }
            ]
          }
        }
      }
    ]
}

I’ve declared a schema like that:


{
  type: 'object',
  additionalProperties: true,
  properties: {
    type: {
      type: 'string',
      options: {
        optionA: 'anyvalue'
      },
    },
    subObject: {
      type: 'array',
      items: {
        $ref: '#/definitions/SubObject',
      },
    },
  },
};

If I define a rule or any other option in my UI schema, for the first type, it will be take into account. If I declare one for my subObject.type, the uischema will always return

{type: 'Control', scope: '#/properties/type', label: false}

How can I manage that on my side? I can’t rename the properties in my data file.

What I’m expecting? For the sub property, the uischema property should be return the rule:

{type: 'Control', scope: '#/properties/type', rule: {...] }

Config: “@jsonforms/angular”: “3.6.0”

2

Hi @KlrSur0,

Can you post the full JSON Schema or at least a self-contained one? e.g. include the definition for SubObject. You are using Angular Material?

3

Hi @sdirix , I’ve reproduced my structure with this files:

in a schema.ts

import { objectA, objectB } from "./otherElements";

export const newSchema = {
  type: 'object',
  additionalPropertes: false,
  properties: {
    rootNode: {
      type: 'array',
      properties: {
        id: {
          type: 'string',
        },
        name: {
          type: 'string',
        },
        objectA: {
          $ref: '#/definitions/ObjectA',
        },
      },
    },
  },
  definitions: {
    ObjectA: objectA,
    ObjectB: objectB,
  },
};

object A and B are referenced in an other file.ts

export const objectA = {
  type: 'object',
  additionalProperties: true,
  properties: {
    type: {
      type: 'string',
    },
    data: {
      type: 'array',
      items: {
        $ref: '#/definitions/ObjectB',
      },
    },
  },
};

export const objectB = {
  type: 'object',
  additionalProperties: true,
  properties: {
    type: {
      type: 'string',
    },
    name: {
      type: 'string',
    },
    alias: {
      type: 'string',
    },
  },
  required: ["type", "name"],
};

The ui schema.json is:

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/rootNode/properties/name"
    },
    {
      "type": "Control",
      "scope": "#/properties/rootNode/properties/objectA",
      "options": {
        "detail": {
          "type": "VerticalLayout",
          "elements": [
            {
              "type": "Control",
              "scope": "#/properties/type"
            },
            {
              "type": "VerticalLayout",
              "elements": [
                {
                  "type": "Control",
                  "scope": "#/properties/data",
                  "options": {
                    "detail": {
                      "type": "VerticalLayout",
                      "elements": [
                        {
                          "type": "Control",
                          "scope": "#/properties/type",
                          "rule": {
                            "effect": "DISABLE",
                            "condition": {
                              "scope": "#/properties/type",
                              "minLength": 4
                            }
                          }
                        },
                        {
                          "type": "Control",
                          "scope": "#/properties/name"
                        },
                        {
                          "type": "Control",
                          "scope": "#/properties/alias"
                        }
                      ]
                    }
                  }
                }
              ]
            }
          ]
        }
      }
    }
  ]
}

and an example of my data:

export default {
  rootNode: {
    id: 'ABC-21121',
    name: 'Abc - ZUY',
    objectA: {
      type: 'Shortcut',
      data: [
        {
          type: 'Key',
          name: 'K-value',
          alias: 'Ctrl+K',
        },
        {
          type: 'Key',
          name: 'C',
          alias: 'Ctrl+C',
        },
        {
          type: 'Mouse',
          name: 'Undo',
          alias: '',
        },
      ],
    },
  },
};

In this example the “Type” under data should never be disabled - because it only 3 characters. Or the rule is based on the first Type = “Shortcut” instead of “Key”.

image
image1471×979 15.2 KB

4

@sdirix Just checking in to see if anyone has had a chance to look into the issue I raised. Were you able to reproduce it locally?

I’d really appreciate any feedback you can share.

Thanks again!