How to disable non-array input field based on array input data

General
1

I have List with Detail control (List With Detail Example - JSON Forms), Here is the schema json

{
  "type": "object",
  "properties": {
    "fee": {
      "properties": {
        "offers": {
          "type": "array",
          "items": {
            "type": "object",
            "properties": {
              "paymentType": {
                "type": "string",
                "enum": [
                  "Advance",
                  "On the fly"
                ]
              },
              "security": {
                "type": "string",
                "enum": [
                  "Debt",
                  "Equity",
                  "Certificates",
                  "Other"
                ]
              },
              "shares": {
                "type": "number",
                "decimalPattern": {
                  "pattern": "^\\d{0,12}$",
                },
              }
            },
            "required": [
              "paymentType",
              "security"
            ]
          }
        },
        "totalFee": {
          "properties": {
            "amountFees": {
              "type": "number",
              "decimalPattern": {
                "pattern": "^\\d{0,14}(\\.\\d{0,2})?$",
              },
            }
          }
        }
      }
    }
    }
}

Here is the Ui schema

{
  "type": "Category",
  "elements": [
    {
      "type": "VerticalLayout",
      "elements": [
        {
          "type": "ListWithDetail",
          "scope": "#/properties/fee/properties/offers",
          "options": {
            "labelRef": "security",
            "detail": {
              "type": "HorizontalLayout",
              "elements": [
                {
                  "type": "Control",
                  "scope": "#/properties/paymentType",
                  "options": {
                    "variant": "dropdown"
                  }
                },
                {
                  "type": "Control",
                  "scope": "#/properties/security",
                  "options": {
                    "variant": "dropdown"
                  }
                },
                {
                  "type": "Control",
                  "scope": "#/properties/shares",
                  "label": "Amount Being Registered",
                  "rule": {
                    "effect": "DISABLE",
                    "condition": {
                      "scope": "#/properties/paymentType",
                      "schema": {
                        "enum": [
                          "On the fly"
                        ]
                      }
                    }
                  }
                }        
              ]
            }
          }
        },
        {
          "type": "Control",
          "scope": "#/properties/fee/properties/totalFee/properties/amountFees",
           "rule": {
            "effect": "DISABLE",
            "condition": {
              "scope": "#/properties/paymentType",
              "schema": {
                "enum": [
                  "On the fly"
                ]
              }
            }
          }
        }
      ]
    }
  ]
 
}

The condition is when the user selects paymentType as “on the fly” in the array the field
#/properties/fee/properties/totalFee/properties/amountFees, should be disabled. but when the user selects paymentType as “Advance”, the amountFees input field should be enabled, the amountFees is not part of ListWithDetail but separate input control. How can i achieve that?

2

Hi @bala ,
before we dive into a potential solution, I have a question:
The enablement of amountFees is supposed to be dependent on property paymentType in the array items.

What should happen if there are multiple array items and some have paymentType “Advance” while others have payment type “on the fly”?

3

In case of multiple array items, and one of the array items is “advance” then the amountFees should be enabled

4

can anyone help me on this @lucas-koehler

5

Hi @bala,

Yes this can be achieved with the schema-based rules. This is an example on how to define your rule:

{
  "type": "Control",
  "scope": "#/properties/fee/properties/totalFee/properties/amountFees",
  "rule": {
    "effect": "ENABLE",
    "condition": {
      "scope": "#/properties/fee/properties/offers", // point to the array
      "failWhenUndefined": true, // if the array does not exist, fail the rule, i.e. disable the field
      "schema": {
        "contains": { // at least one entry of the array has an existing paymentType which is set to "Advance"
          "properties": {
            "paymentType": {
              "enum": ["Advance"]
            }
          },
          "required": ["paymentType"]
        }
      }
    }
  }
}
6

@sdirix Thanks, it worked perfectly :slight_smile: