Json Form not working for the allOf schemas

General
1

[shivgarg5676]

I have created a json form which is having all of at the top level

{
  "type": "object",
  "allOf": [
    {
      "properties": {
        "a": {
          "type": "string",
          "enum": ["a", "b"],
          "default": "a"
        },
        "b": {
          "type": "string"
        }
      }
    },
    {
      "if": {
        "properties": {
          "a": {
            "const": "a"
          }
        }
      },
      "then": {
        "propeties": {
          "b": {
            "title": "abc"
          }
        }
      }
    },
    { "required": ["a"] }
  ]
}

Now the schema is perfectly ok as per json schema conventions. But this is not working with json form.

Please refer a code sandbox here.

2

[Lily]

Hey, take a look at

To see what JSON Schema features are supported by JSON Forms. The if/then is not currently supported.

Take a look at this related issue which has some infomation

3

[shivgarg5676]

Hey Lily,
Thanks for replying.
I don’t think this issue is related to if/then/else. If you try the following schema, things will break as well.

{
  "type": "object",
  "allOf": [
    {
      "properties": {
        "a": {
          "type": "string",
          "enum": ["a", "b"],
          "default": "a"
        },
        "b": {
          "type": "string"
        }
      }
    },
    { "required": ["a"] }
  ]
}

Live demo here

4

@shivgarg5676 Thanks for reporting the issue.

As @lilyh mentioned, our if/then/else support only works for validations. In cases where the if/then/else modifies structure (e.g. adding additional properties) or other attributes (e.g. title) there is no support.

I quickly checked the second case (no if/then/else) with our latest renderers 2.4.0-alpha.3. Here the Redux variant works as in that it renders controls for a and b. However it also shows an error “no renderer found”. The standalone version runs into a type error.

Our allOf support is restricted to cases where each element of the allOf adds properties. In Redux it fails for the second allOf element as it doesn’t do that, so it shows the error instead.

Immediate ToDos:

  • Fix allOf renderer in standalone version (should not crash with a type error)

  • Improve allOf renderer and ignore property-less elements for rendering

As we explicitly don’t support if/then/else in other ways as validation I would not take a look there for now.

If you’d like to contribute fixes for the allOf issues you’d be very welcome to do so :wink:

5

[shivgarg5676]

Thanks @sdirix. I will try to contribute if I can solve the issue.

6

With Rework JsonFormsStateProvider by AlexandraBuzila · Pull Request #1583 · eclipsesource/jsonforms · GitHub the crash is now fixed. However the allOf renderer should still be improved.

7

[Nanda]

Hi,
I am trying to implement condition based required validation. But its not working.
I have dropdown with values circle, square and rectangle.
If I select circle then “radius” property is required.
If I select square then “height” property is required.
If I select rectangle then “height” and “Width” properties are required.
But none of the validations are working. Am I miss anything?
Schema:

  "type": "object",
  "properties": {
    "shapeType": {
      "type": "string",
      "enum": [
        "",
        "square",
        "circle",
        "rectangle"
      ]
    },
    "shapeProperties": {
      "properties": {
        "radius": {
          "type": "number"
        },
        "height": {
          "type": "number"
        },
        "width": {
          "type": "number"
        }
      },
      "allOf":[
        {
          "if": {
            "properties": {
              "shapeType": {
                "const": "square"
              }
            },
            "required": [
              "shapeType",
              "shapeProperties"
            ]
          },
          "then": {
            "required": [
              "height"
            ]
          }
        },
        {
          "if": {
            "properties": {
              "shapeType": {
                "const": "circle"
              }
            },
            "required": [
              "shapeType",
              "shapeProperties"
            ]
          },
          "then": {
            "required": [
              "radius"
            ]
          }
        },
        {
          "if": {
            "properties": {
              "shapeType": {
                "const": "rectangle"
              }
            },
            "required": [
              "shapeType",
              "shapeProperties"
            ]
          },
          "then": {
            "required": [
              "height",
              "width"
            ]
          }
        }
      ]      
    }
  },
  "if": {
    "properties": {
      "shapeType": {
        "const": "square"
      }
    },
    "required": [
      "shapeType"
    ]
  },
  "then": {
    "required": [
      "shapeProperties"
    ]
  }
}

UI Schema

  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Group",
      "label": "Shape Type",
      "elements": [
        {
          "type": "Control",
          "label": "Shape Type",
          "scope": "#/properties/shapeType"
        }
      ]
    },
    {
      "type": "Group",
      "label": "Shape Properties",
      "elements": [
        {
          "type": "Control",
          "label": "Radius",
          "example": "Ex: 5467234786",
          "scope": "#/properties/shapeProperties/properties/radius"
        },
        {
          "type": "Control",
          "label": "Height",
          "scope": "#/properties/shapeProperties/properties/height"
        },
        {
          "type": "Control",
          "label": "Width",
          "scope": "#/properties/shapeProperties/properties/width"
        }
      ],
      "rule": {
        "effect": "SHOW",
        "condition": {
          "scope": "#/properties/shapeType",
          "schema": {
            "enum": [
              "square",
              "circle",
              "rectangle"
            ]
          }
        }
      }
    }
  ]
}