Rules not working in array items?

#1

Hello, I am using JSONForms to build a React based, general interactive authoring tool. the current form is for a quizzing interaction and needs a lot of nested and dynamic arrays/objects. the dropdown “questionType” will affect the fields which come after. I’ve noticed HIDE and SHOW rules are not working when applied to any item in an array, and I cant tell if my scoping is just wrong or it’s a limitation of the system.

I’ve included a reduced version of my schemas below. These rules seem to work when the array object isn’t in the array. I’ve tried changing the scopes, effects and schemas around to see if it helped, but unsure what’s causing the fields to show up.

2021-06-23 16_37_56-React App.png
2021-06-23 16_37_56-React App.png715×240 10 KB

schema.json

{
  "type": "object",
  "properties": {
    "questions": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "questionType": {
            "type": "string",
            "enum": ["Choice A", "Choice B", "Choice C"]
          },
          "answerText": {
            "type": "string",
            "description": "Note: you do not need an enumerator, this will be added automatically."
          },
          "feedBackText": {
            "type": "string",
            "description": "Feedback text presented if the answer is selected"
          },
          "scoreValue": {
            "type": "integer",
            "description": "If correct, the answer should have a score"
          }
        }
      }
    }
  }
}

uischema.json

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/questions",
      "label": "Questions (Use the + icon to add more questions.)",
      "options": {
        "showSortButtons": true,
        "detail": {
          "elements": [
            {
              "type": "Control",
              "label": "Question Type",
              "scope": "#/properties/questions/questionType"
            },
            {
              "type": "Control",
              "label": "Answer Text",
              "scope": "#/properties/questions/answerText",
              "rule": {
                "effect": "SHOW",
                "condition": {
                  "scope": "#/properties/questions/questionType",
                  "schema": { "enum": ["Choice A"] },
                  "NOTE": "based on https://jsonforms.io/docs/uischema/rules"
                }
              }
            },
            {
              "type": "Control",
              "label": "FeedBack Text",
              "scope": "#/properties/questions/feedBackText",
              "rule": {
                "effect": "SHOW",
                "condition": {
                  "scope": "#/properties/questions/questionType",
                  "schema": { "const": "Choice B" },
                  "NOTE": "https://jsonforms.io/examples/rule"
                }
              }
            },
            {
              "type": "Control",
              "label": "Score Value",
              "scope": "#/properties/questions/scoreValue",
              "rule": {
                "effect": "SHOW",
                "condition": {
                  "scope": "#/properties/questions/questionType",
                  "schema": { "const": "Choice C" }
                }
              }
            }
          ]
        }
      }
    }
  ]
}

[original thread by cjmorrison]

#2

Hi @cjmorrison(cjmorrison)! We offer three different ways to render arrays: Either as a table, list or list with detail. When using the ui schema type “Control” JSON Forms will by default try to render it as a table, which is also happening for you.

Tables can only be configured as a whole, so it’s not possible to apply rules for single cells or columns. When a table is not applicable (for example when the schema consists of nested objects) or the user indicates as such with a detail ui schema, the list renderer is used.

In your case still the table renderer is used because the given detail ui schema is invalid. It’s missing a type on the root element, for example type: “VerticalLayout”. Therefore the detail ui schema is ignored and JSON Forms falls back to the default case. For you that is the table renderer. Note that not only thetypeis missing, but yourscope</code>s are also wrong. They need to be scoped to the array items.

This is how you can fix the detail:

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/questions",
      "label": "Questions (Use the + icon to add more questions.)",
      "options": {
        "showSortButtons": true,
        "detail": {
          "type": "VerticalLayout",
          "elements": [
            {
              "type": "Control",
              "label": "Question Type",
              "scope": "#/properties/questionType"
            },
            {
              "type": "Control",
              "label": "Answer Text",
              "scope": "#/properties/answerText",
              "rule": {
                "effect": "SHOW",
                "condition": {
                  "scope": "#/properties/questionType",
                  "schema": { "enum": ["Choice A"] },
                  "NOTE": "based on https://jsonforms.io/docs/uischema/rules"
                }
              }
            },
            {
              "type": "Control",
              "label": "FeedBack Text",
              "scope": "#/properties/feedBackText",
              "rule": {
                "effect": "SHOW",
                "condition": {
                  "scope": "#/properties/questionType",
                  "schema": { "const": "Choice B" },
                  "NOTE": "https://jsonforms.io/examples/rule"
                }
              }
            },
            {
              "type": "Control",
              "label": "Score Value",
              "scope": "#/properties/scoreValue",
              "rule": {
                "effect": "SHOW",
                "condition": {
                  "scope": "#/properties/questionType",
                  "schema": { "const": "Choice C" }
                }
              }
            }
          ]
        }
      }
    }
  ]
}

Now the list renderer will be used and your rules will apply.

If you’d like to try the list with detail renderer, then see this example on how to configure it.
#3

[cjmorrison]

@sdirix(sdirix) that worked! Thank you so much.