Option to clear value of form control when it gets disabled

[AtjonTV]

Is your feature request related to a problem? Please describe.

I am building an application in Vue that has a huge form with optional fields. I control the availability of the fields with enable rules in the UI schema and required conditions in the data schema.

Here is a typical example of an UI element:

{
              "type": "HorizontalLayout",
              "elements": [
                {
                  "type": "Control",
                  "scope": "#/properties/common/properties/typeOfGeneticDiabetes",
                  "options": {
                    "vuetify": {
                      "v-autocomplete": {
                        "variant": "outlined"
                      }
                    }
                  }
                },
                {
                  "type": "Control",
                  "scope": "#/properties/common/properties/mutationOfGeneticDiabetes",
                  "options": {
                    "vuetify": {
                      "v-text-field": {
                        "variant": "outlined"
                      }
                    }
                  },
                  "rule": {
                    "effect": "ENABLE",
                    "condition": {
                      "scope": "#/properties/common/properties/typeOfGeneticDiabetes",
                      "schema": {
                        "not": {
                          "const": "MODY"
                        }
                      }
                    }
                  }
                }
              ]
            }

And here is the required condition from the data schema:

"allOf": [
        {
          "if": {
            "required": ["typeOfGeneticDiabetes"],
            "properties": {
              "typeOfGeneticDiabetes": {
                "not": {
                  "const": "MODY"
                }
              }
            }
          },
          "then": {
            "required": ["mutationOfGeneticDiabetes"]
          }
        }
]

What I need is the ability to have fields like "mutationOfGeneticDiabetes" be cleared, when its toggle field "typeOfGeneticDiabetes" is set to a falsy condition (in this case the "typeOfGeneticDiabetes" is set to "MODY").

Describe the solution you'd like

Add an "clearValueOnDisable" toggle to form controls (in its "options" object) to have their value cleared when they get disabled. Then the toggle could be selectively applied to the fields in UI schema where it is needed.

Describe alternatives you've considered

The only options to consider where:

1. processing the data before storing it in a database, which presents the issue that special logic can become out of sync with the forms result (data schema) over time. Currently, the form has 2000 lines of UI Schema and 1800 lines of Data Schema.
2. forking JsonForms to implement the option. Though due to the rather complex source code structure, I was not able to find the place where I would implement the feature.

Package

Vue Vuetify Renderers, Vue Bindings, Core

Additional context

No response

[sdirix]

Hi @AtjonTV,

Conceptually we don't do any automatic data manipulation in JSON Forms based on UI rendering. When introducing features like this, it's easy to get weird edge cases. For example if you use categories, then the nested enable/hide rules would only be executed for the currently active category. So only disabled fields of that category are cleared, but not of all the others.

The cleanest solution is to use a middleware and in there delete properties once you no longer need them. The challenge here is to design this in a way so you don't repeat yourself between the UI Schema and your middleware functionality.

A UI-based solution (with all of the mentioned downsides), could be to implement a CATCH-ALL renderer for properties. That one would just check the enabled state and automatically delete its data if false. Then it dispatches back to JSON Forms but takes itself out of the suggested renderers. Thereby the "original" renderer can participate and render the usual UI.

Forking is of course always possible. The rules are for example evaluated here. However there you can't do (or rather should not do) any data manipulation. So instead you would add this to the Vue-Vuetify bindings, for example here you could check the enabled state and trigger a change if false. But then we're back to a UI based solution.

---

Generally you need some kind of backend/database protection/validation though. You can't rely on the UI to protect your database as this is easily circumvented.

[AtjonTV]

@sdirix thank you for that information.

Currently, I verify the data against the data json-schema on the server, before allowing it to enter the database. But from what I can see, I can't define rules like "if a is not b, then c must be empty" in the data schema.

Not sure what the best solution here is, without writing very data-schema specific code, which I want to avoid.

[Pierre-Mike]

I also have the same issue and was considering a middleware solution. Does anyone have an example of this? The ideal solution would include a UI Schema property called 'HIDE_AND_CLEAR' | 'DISABLED_AND_CLEAR' instead of just 'hide.'

or an utils function from jsonform to clear hidden or disabled render value ?

Or something like this would be even better

      {
        if: {
          properties: {
            questionYesNo: {
              const: true,
            },
          },
        },
        else: {
          properties: {
            commentsForQuestionYesNo: {
              const: '',
            },
          },
        },
        then: {
          required: [
            'commentsForQuestionYesNo',
          ],
        },
      }, 

[sdirix]

JSON Schema is not powerful enough to express the kind of dynamic data manipulation you like to see. The JSON Forms UI Schema is also not the ideal place because it is a UI artifact by design, with only a very loose coupling to the data schema via the control pointers.

If you want to stay within JSON Forms, I would go with a middleware based solution to manipulate the data as you see fit. However you should find a way to not repeat yourself within the middleware and the UI functionality. The upcoming function-based ruled conditions could help you there.

You can also check the JSON Forms community for existing solutions. It seems the fig-tree-evaluator would fit your use cases. They even provide a JSON Forms integration demo.

[AtjonTV]

Well, the function-based rules looks nice. But unless they get the UI state (enabled or disabled) and can clear the current value instead of pure validation, then they wont be the solution to my issue.

All I need is for form elements that get disabled by a UI rule, to have their value automatically cleared.

The element is visible by an ENABLE rule like I already described. When the condition becomes falsey, I require the value to be cleared. All disabled form inputs must be empty.

I tried to do this via a middleware as was suggested, but I was not able to get it working.

[pierre-mike-pge]

@AtjonTV Here my POC so far

   const middleware = (
          state: JsonFormsCore,
          action: CoreActions,
          defaultReducer: (state: JsonFormsCore, action: CoreActions) => JsonFormsCore,
        ) => {
          const newState = defaultReducer(state, action)
          // on hidden clear the data
          if (action.type === 'jsonforms/UPDATE') {
            const pathsToDelete = new Set<string>()
            const ajvInstance = newState.ajv ?? handleDefaultsAjv // Prefer ajv from state if available

            const getPropertyNameFromScope = (scope: string | undefined): string | null => {
              if (!scope || !scope.startsWith('#/properties/'))
                return null
              return scope.substring('#/properties/'.length)
            }

            const traverseUiSchema = (elements: UISchemaElement[] | undefined, parentIsEffectivelyVisible: boolean) => {
              if (!elements)
                return

              elements.forEach((element) => {
                // Determine the element's own visibility based on its rule
                const ownIsVisible = Runtime.isVisible(element, newState.data, ajvInstance)
                // The element is effectively visible only if its parent is and it itself is
                const effectiveIsVisible = parentIsEffectivelyVisible && ownIsVisible

                // Check if the element has a scope (data binding)
                const scope = (element as any).scope as string | undefined // Type assertion for scope
                const propertyName = getPropertyNameFromScope(scope)

                if (propertyName && !effectiveIsVisible) {
                  // If the element has a data binding and is not effectively visible,
                  // mark its data for deletion.
                  pathsToDelete.add(propertyName)
                }

                // Recursively traverse children, passing down the current element's effective visibility
                const childElements = (element as any).elements as UISchemaElement[] | undefined // Type assertion for elements
                if (childElements && Array.isArray(childElements))
                  traverseUiSchema(childElements, effectiveIsVisible)
              })
            }

            // Start traversal from the root UI schema
            const rootUiSchema = newState.uischema
            if (rootUiSchema) {
              const rootElements = (rootUiSchema as any).elements as UISchemaElement[] | undefined
              if (rootElements && Array.isArray(rootElements)) {
                // Root UI schema has an 'elements' array (typical for layouts)
                traverseUiSchema(rootElements, true) // Root elements' parent is considered visible
              }
              else {
                // Root UI schema is a single element (e.g., a single control)
                const ownIsVisible = Runtime.isVisible(rootUiSchema, newState.data, ajvInstance)
                const scope = (rootUiSchema as any).scope as string | undefined
                const propertyName = getPropertyNameFromScope(scope)
                if (propertyName && !ownIsVisible)
                  pathsToDelete.add(propertyName)
              }
            }

            if (pathsToDelete.size > 0) {
              const updatedData = { ...newState.data }
              let dataWasChanged = false
              pathsToDelete.forEach((path) => {
                if (Object.prototype.hasOwnProperty.call(updatedData, path)) {
                  delete updatedData[path]
                  dataWasChanged = true
                }
              })
              if (dataWasChanged)
                newState.data = updatedData
            }
          }
          return newState
        }