Getting errors of child objects in custom renderer

General
1

Hey there,

I have a component, which gives the option to make a collapsable section.

const CollapsableGroupRenderer = (props: LayoutProps) => {
  const { uischema, schema, path, visible, renderers } = props;

  const layout = uischema as Layout;

  const layoutProps: MaterialLayoutRendererProps = {
    elements: layout.elements,
    schema: schema,
    path: path,
    direction: uischema.type === "HorizontalLayout" ? "row" : "column",
    visible: visible,
    uischema: uischema,
    renderers: renderers,
  };

  const label = "label" in layout ? (layout.label as string) : "";

  return (
    <Hidden xsUp={!visible}>
      <Accordion style={{ marginBottom: "10px" }}>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography>{label}</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <MaterialLayoutRenderer {...layoutProps} />
        </AccordionDetails>
      </Accordion>
    </Hidden>
  );
};

Now I have the problem, that I can’t see if there is an error inside the collapsed accordion. Is there any way to get the error array from the content?

Thanks in advance

2

Hi @nico4mcs,

Generically speaking, layouts can contain arbitrary controls. Out of the box we don’t offer an “error analysis” to check which controls are part of a control, i.e. we don’t determine any errors for any layouts at all.

Therefore if you need this support, you need to implement it in a custom renderer. In it you have access to all errors determined form wide. If in your case layout always refer to objects, i.e. they don’t contain arbitrary controls, then you can easily filter the errors according to your object, similar to what the array renderers do.

In case you have an arbitrary layout, then you need to walk through your layout manually and collect all errors for each control. You can see the filtering for a single control in action here.