How Do I Disable a “Container” Widget?

Issue

I have a bunch of widgets inside a container and I want to disable them all at once based on a condition. However, the Container widget doesn't have a Disabled property. It's too painful to specify the condition at the Disabled property of each child widget. I'm looking for a better way to do this.

Resolution

The Container widget does not have a Disabled property, but it is possible to disable all child widgets inside the container by using storeValue. First, create a JSObject with a store variable that will hold the value of the condition. Next, bind this store variable to the Disabled property JS of each widget using {{appsmith.store.varName}}. The JSObject can be triggered using a button click or a change in an input widget. Based on the trigger, the JS Object will check for the condition and assign true/false to the store variable, which will automatically enable/disable the child widgets. Here is an example of how to disable all child widgets in a container based on a button click:

JSObject:

{
  "name": "containerDisable",
  "logic": {
    "value": "onClick(() => { appsmith.store.setValue(\"disableContainer\", true)})",
    "dependencies": [
      "disableContainer"
    ]
  },
  "executeOnLoad": false
}

Button onClick JS:

{{containerDisable.execute()}}

Widget Disabled Property JS:

{{appsmith.store.disableContainer}}

Updated

How Do I Disable a “Container” Widget?

Issue

Resolution