Clearing hidden fields

General
1

Hi everyone,
Is there a way to clear fields that have been hidden?
i.e. the user checked a box which shows a nested form, fills it out then changes the check box back to false? I’d like the info they populated in the nested section to be cleared.

[original thread by Steve McKinnon]

2

Hi @mckinnon(mckinnon), there is no built-in functionality for this use case in JSON Forms so you need to add this yourself. There are two main approaches to solve this problem:

  1. Add a custom renderer for the boolean. It not only changes its “own” data, but also clears the remaining data when unchecked

  2. Listen to data changes outside of JSON Forms and additionally remove the data when the corresponding boolean is set to false

The second approach is a little bit “hacky” as you will also have an intermediate renderer pass in which the boolean is set to false but the data is still there. If this is of no concern then the approach is also fine.

Another approach would be to introduce some middleware, however JSON Forms doesn’t support it out of the box yet. You would need to dig somewhat into the internals to implemement this as a customization for your JSON Forms instance.

3

Generally speaking I would recommend NOT implementing this delete behavior. Imagine the user clicking the checkbox by accident and then needing to retype all entered information. This is probably quite frustrating. If you don’t want to send the data to the server you can strip it out beforehand. Of course I don’t know your exact requirements, so the advice might not be applicable.

4

[Steve McKinnon]

Thanks @sdirix(sdirix), I agree with you that it would be frustrating for the user to have their data deleted. I was just preempting that someone in my team would ask me this question! Thanks for your detailed response!

5

@sdirix I would like to implement a similar functionality.
I have a custom renderer of VerticalLayout, within that I have a button that goes to the next subtask, I need to disable the button if there are validationErrors present within visible fields. How should I approach it? I tried doing a .filter on the errors and inside it check if the UiSchemaElement of the error isVisible but I can’t get the UiSchemaElement.

I there a method that gets the UiSchemaElement given an error?

Here is the component: Currently it just checks all the errors which is not ideal since the button will be disabled even if that part of the form is hidden by a rule.

import {
  RankedTester,
  rankWith,
  StatePropsOfLayout,
  uiTypeIs,
  VerticalLayout,
} from '@jsonforms/core';
import {
  JsonFormsDispatch,
  useJsonForms,
  withJsonFormsLayoutProps,
} from '@jsonforms/react';
import { Box, Grid, Hidden } from '@mui/material';
import { t } from 'i18next';

import { SubtaskButton } from '../../../../screens/taskForm/partials/SubtaskButton';

const DividedVerticalLayout = ({
  uischema,
  schema,
  path,
  visible,
  enabled,
  renderers,
  cells,
}: StatePropsOfLayout) => {
  const verticalLayout = uischema as VerticalLayout;

  const {
    core: { errors } = {},
    config: { submitForm },
  } = useJsonForms();

  return (
    <Box
      sx={{
        display: 'flex',
        justifyContent: 'space-between',
        flexDirection: 'column',
        height: '100%',
      }}
    >
      <Hidden xsUp={!visible}>
        <Grid container direction='column'>
          {verticalLayout.elements.map((child, index, { length }) => (
            <Grid item key={`${path}-${length + index}`} xs>
              <JsonFormsDispatch
                uischema={child}
                schema={schema}
                path={path}
                enabled={enabled}
                renderers={renderers}
                cells={cells}
              />
            </Grid>
          ))}
        </Grid>
        {submitForm && (
          <SubtaskButton
            disabled={!!errors?.length}
            label={t('main.next')}
            isLoading={false}
            onClick={() => {
              submitForm?.();
            }}
          />
        )}
      </Hidden>
    </Box>
  );
};

const dividedVerticalLayoutTester: RankedTester = rankWith(
  6,
  uiTypeIs('VerticalLayout'),
);

export default {
  tester: dividedVerticalLayoutTester,
  renderer: withJsonFormsLayoutProps(DividedVerticalLayout),
};
6

Hi @Icenwharth,

Sadly there is no convenience function which can determine the affected UI Schema elements of an error. The only mechanism which we currently offer in JSON Forms is to filter the form-wide errors for a Control, i.e. to a scope.

The generic way to determine all errors for a specific UI Schema container (e.g. a vertical layout) is to walk through all the child elements and collect all errors for all contained controls. There are then multiple edge cases to consider:

  • In case you use any customized controls in there which are not using the default mechanism of JSON Forms then you will need to also use this customization here
  • Any hidden mechanic, e.g. hidden controls, also need to be respected here. Note that by default in JSON Forms this is only the rules mechanic, however if you have some programmatic custom hiding then you will also need to respect it here.

There are two ways to simplify this process:

  • Make sure that any hidden input does not produce a validation error. In that case you don’t need to evaluate whether a control is hidden or not.
  • The JSON Forms UI Schema allows a lot of flexibility in UI Schema containers, i.e. any property, even deeply nested ones from different objects, can be mixed together. If you restrict that and for example specify that a specific layout is responsible for a specific object then the error determination becomes much more simple: Instead of iterating through the UI Schema controls you simply filter for all errors whose path begin with the object path.
7

Is this is possible now? Like changing the fields should clear the hidden fields value?I am also facing this issue now.

9

Hi @rakesh,

No, this is not supported out of the box. This sort of functionality does not integrate well with the principles of JSON Forms:

  • Renderers have full control over what they are rendering, including whether to ignore SHOW/HIDE rules and interpreting what it means to be (in)visible
  • We don’t want to modify data just by rendering

If you want functionality like this then you can integrate this via custom renderers. In them, you check for the visible flag. If it’s false then you delete the data via handleChange.

10

I had more or less the same issue too.
as previously said, custom ctrl is not a good way (to me) as user can disable by error a field and all is lot. I prefer to clean at Submit.
go to Advice on clearing down data on hiding a Group - #3 by lyzergic for seing the way to do . I update the post with my own little corrections