Enable/Disable multiple fields from two enums drop down values

General
1

This is my schema

{
  "type": "object",
  "properties": {
    "fruits": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "payment": {
            "type": "string",
            "enum": [
              "none",
              "mastercard",
              "visa",
              "paypal"
            ]
          },
          "country": {
            "type": "string",
            "enum": [
              "none",
              "USA",
              "UK",
              "France",
              "Germany"
            ]
          },
		  "value":{
			"type": "string"
		  }
		  "subValue":{
			"type": "string"
		  }
        }
      }
    }
  }
}

In the UI schema, i plan to use “ListWithDetail”, i have requirement, where i had
enable “value” and “subvalue” fields when “payment” is “mastercard” and “country” is “US”
and
disable “value” and “subvalue” fields when “payment” is “mastercard” and “country” is “none”
How do i go on implementing rules in UI Schema for this, Thanks

2

Hi @bala, you can use the options.detail to specify a detail UI Schema containing the rules, e.g. the following should work:

{
  "type": "ListWithDetail",
  "scope": "#/properties/fruits",
  "options": {
    "detail": {
      "type": "VerticalLayout",
      "elements": [
        {
          "type": "Control",
          "scope": "#/properties/payment"
        },
        {
          "type": "Control",
          "scope": "#/properties/value",
          "rule": {
            "effect": "ENABLE",
            "condition": {
              "scope": "#/properties/payment",
              "schema": {
                "const": "mastercard"
              }
            }
          }
        }
      ]
    }
  }
}
3

Thanks for the reply, in your reply the enable rule effect is applied for “value” scope, based on the scope of “payment” element. It is a simple case enabling or disabling one control or element

The question i originally asked is enabling “value” control based on “payment” and “country” control.

If payment is 'mastercard ’ and country is ‘US’ enable value field
If payment is 'mastercard ’ and country is ‘None’ disable value field

I don’t know how to apply multiple rules to single element

4

Hi @bala,

You can check multiple properties by referring to their parent scope, in this case it’s just #. You don’t need multiple rules for a single element as the provided schema can be arbitrarily complex and therefore cover all use cases.

It would help if you could specify your complete set of requirements, i.e. what shall happen in all the other cases?

  • What shall happen if payment is not mastercard?
  • What shall happen if payment is mastercard and the country is not US or None?
5

What shall happen if payment is not mastercard ?
If the payment is not mastercard, “value” and “sub value” are enabled.

What shall happen if payment is mastercard and the country is not US or None ?
Then also “value” and “sub value” are enabled

6

Hi @bala,

the following UI Schema should do the trick:

{
  "type": "ListWithDetail",
  "scope": "#/properties/fruits",
  "options": {
    "detail": {
      "type": "VerticalLayout",
      "elements": [
        {
          "type": "Control",
          "scope": "#/properties/payment"
        },
        {
          "type": "Control",
          "scope": "#/properties/country"
        },
        {
          "type": "Control",
          "scope": "#/properties/value",
          "rule": {
            "effect": "DISABLE",
            "condition": {
              "scope": "#",
              "schema": {
                "properties": {
                  "payment": {
                    "const": "mastercard"
                  },
                  "country": {
                    "const": "none"
                  }
                },
                "required": [
                  "payment",
                  "country"
                ]
              }
            }
          }
        },
        {
          "type": "Control",
          "scope": "#/properties/subValue",
          "rule": {
            "effect": "DISABLE",
            "condition": {
              "scope": "#",
              "schema": {
                "properties": {
                  "payment": {
                    "const": "mastercard"
                  },
                  "country": {
                    "const": "none"
                  }
                },
                "required": [
                  "payment",
                  "country"
                ]
              }
            }
          }
        }
      ]
    }
  }
}