How to hide the uiSchema component in jsonForm . i pass the hidden : true in schema that basically return null value . but it take the space in the frontend . why it take space in the frontend . how to jsonForm hidden the component internally

General
1

import {
JsonFormsCellRendererRegistryEntry,
JsonFormsRendererRegistryEntry,
JsonSchema,
OwnPropsOfRenderer,
} from ‘jsonforms/core’;
import { JsonFormsDispatch, useJsonForms } from ‘jsonforms/react’;
import { Hidden } from ‘mui/material’;
import Grid2 from ‘mui/material/Unstable_Grid2’;

export interface MaterialLayoutRendererProps extends OwnPropsOfRenderer {
elements: UISchemaElement;
direction: ‘row’ | ‘column’;
}

const MaterialLayoutRendererComponent =
({
visible,
elements,
schema,
path,
enabled,
direction,
renderers,
cells
}: MaterialLayoutRendererProps) => {
if (isEmpty(elements)) {
return null;
} else {

  return (
    <Grid2
      container
      direction={direction}
      spacing={direction === 'row' ? 2 : 0}
      justifyContent={'space-around'}
    >
      {

        elements.map((child: any, index: number) => {
          console.log("child : ", child, " index : ", index);

          return (
            <Grid2 key={`${path}-${index}`} xs={child?.config?.layout ? (child?.config?.layout.xs ? child?.config?.layout.xs : child?.config?.layout) : 12} sm={child?.config?.layout ? (child?.config?.layout.sm ? child?.config?.layout.sm : child?.config?.layout) : 12} md={child?.config?.layout ? (child?.config?.layout.md ? child?.config?.layout.md : child?.config?.layout) : 12} lg={child?.config?.layout ? (child?.config?.layout.lg ? child?.config?.layout.lg : child?.config?.layout) : 12}>
              <JsonFormsDispatch
                uischema={child}
                schema={schema}
                path={path}
                enabled={enabled}
                renderers={renderers}
                cells={cells}
              />
            </Grid2>
          )
        })

      }
    </Grid2>
  );
}

};
export const MaterialLayoutRenderer = React.memo(MaterialLayoutRendererComponent);

import {
HorizontalLayout,
LayoutProps,
RankedTester,
rankWith,
uiTypeIs,
} from ‘@jsonforms/core’;
import { withJsonFormsLayoutProps } from ‘@jsonforms/react’;
import {
MaterialLayoutRenderer,
MaterialLayoutRendererProps
} from ‘./Horizontal’;
import { useContext } from ‘react’;
import { DataContext } from ‘…/context/Context’;

/**

  • Default tester for a horizontal layout.
  • @type {RankedTester}
    */
    export const materialHorizontalLayoutTester: RankedTester = rankWith(
    200,
    uiTypeIs(‘HorizontalLayout’)
    );

export const MaterialLayoutHorizontal = ({ uischema, renderers, cells, schema, path, enabled, visible }: LayoutProps) => {
const { theme } =
useContext(DataContext);
const layout = uischema as HorizontalLayout;
const childProps: MaterialLayoutRendererProps = {
elements: layout.elements,
schema,
path,
enabled,
direction: ‘row’,
visible
};
return (<MaterialLayoutRenderer {…childProps} renderers={renderers} cells={cells} />);
};
export default withJsonFormsLayoutProps(MaterialLayoutHorizontal);

2

Hi @Ritikkumar,

It’s an implementation choice of our off-the-shelf renderer sets to still reserve space for hidden controls. In our use cases we often show/hide controls and a “jumping layout” is not what we wanted.

In our case the layout renderers use flex-box to align their children and they will create an item for each child no matter whether it will be shown or hidden. It seems your custom renderer implements the grid in a similar way. You can implement a different approach and for example let all children render the item itself or use different layout techniques like for example CSS Grid.