Rules not working in table items?

General
1

Hi, I am using JSON Forms to build dynamic form in Angular. In one of my use case I want to enable/disable or show/hide one control in a table row. But its not working as expected when go for Table. Please find the schema and ui json. All my requirement working when I go for ListWithDetail, But I need to show as table only.
Design:

tableerror
tableerror1913×659 31.8 KB

Schema:

{
  "type": "object",
  "properties": {
    "company": {
      "properties": {
        "users": {
          "type": "array",
          "items": {
            "type": "object",
            "properties": {
              "name": {
                "type": "string",
                "description": "Name"
              },
              "phonenumber": {
                "type": "string"
              },
              "itemRequiredFlag": {
                "type": "boolean"
              },
              "itemConditionalRequiredFlag": {
                "type": "boolean"
              }
            },
            "required": [
              "name",
              "phonenumber",
              "itemRequiredFlag"
            ],
            "allOf": [
              {
                "if": {
                  "properties": {
                    "itemRequiredFlag": {
                      "enum": [
                        true
                      ]
                    }
                  },
                  "required": [
                    "itemRequiredFlag"
                  ]
                },
                "then": {
                  "required": [
                    "itemConditionalRequiredFlag"
                  ]
                }
              }
            ]
          }
        }
      }
    }
  }
}

UI Schema:

{
  "type": "VerticalLayout",
      "elements": [
        {
          "type": "Control",
          "scope": "#/properties/company/properties/users",
          "label": "Users",
          "options": {
            "labelRef": "#/properties/name",
            "detail": {
              "type": "VerticalLayout",
              "elements": [
                {
                  "type": "Control",
                  "scope": "#/properties/name",
                  "label": "Name"
                },
                {
                  "type": "Control",
                  "scope": "#/properties/phonenumber",
                  "label": "Phone Number"
                },
                {
                  "type": "Control",
                  "scope": "#/properties/itemRequiredFlag",
                  "label": "Required Flag"
                },
                {
                  "type": "Control",
                  "scope": "#/properties/itemConditionalRequiredFlag",
                  "label": "Conditional Required Flag",
                  "rule": {
                    "effect": "ENABLE",
                    "condition": {
                      "scope": "#/properties/itemRequiredFlag",
                      "schema": {
                        "const": true
                      }
                    }
                  }
                }
              ]
            }
          }
        }
      ]
}
2

Hi @sathiyamurthy,

we don’t support rules on table content, in fact at the moment the UI Schema has no concept of describing any sort of table content. Therefore the options/detail UI Schema is not used at all in the Table renderer, as you can see because the VerticalLayout is not applied.

The table support in JSON Forms is very limited on purpose as in our experience most developers need to heavily customize their table sooner or later and therefore need to write a custom table renderer anyway. Also popular is writing a table component outside of JSON Forms and then using JSON Forms for editing the details of a specific entry.

3

Thanks for the update

4

I’m sorry to have to disagree here.
I understand that tables can be very complex; I use AG-Grid Enterprise in many of my apps.
But tables in JSON Forms should at least support be at par with other controls, e.g. rules, etc.
I’m not advocating for advance tables features; but I least I need to hide/show columns, and pass cell forming parameters. I’m just asking for the same level of support as in the other controls.

5

Hi @mingfang, you can always copy the existing Table renderer, customize it to your needs and then register it as a custom renderer for your forms.

The overall table has rules support, it’s just the columns and cells which don’t as they are not represented in the UI Schema. Feel free to implement support for this. You could then showcase your implementation and, if you’d like, offer a back contribution. We can then discuss with you whether the proposed architecture turns out to be a good fit for the base framework, or you could even open source it yourself for other people to consume.

Regarding cells: You can customize them separately via the cells registry.