Vertical Stepper Custom Renderer not picked up by Json Forms

I have created below custom render for vertical stepper. I added it to render set of json form. But it does not render. Is there something I have done wrong here?

import React, {useState} from 'react';

import merge from 'lodash/merge';

import { Button, Hidden, Step, StepButton, Stepper } from '@material-ui/core';

import {

  and,

  Categorization,

  categorizationHasCategory,

  Category,

  isVisible,

  optionIs,

  RankedTester,

  rankWith,

  StatePropsOfLayout,

  uiTypeIs

} from '@jsonforms/core';

import { withJsonFormsLayoutProps } from '@jsonforms/react';

import { AjvProps, MaterialLayoutRenderer, MaterialLayoutRendererProps, withAjvProps } from "@jsonforms/material-renderers";

export const MUiVerticalStepperLayoutTester: RankedTester = rankWith(

  1000,

  and(

    uiTypeIs('Categorization'),

    categorizationHasCategory,

    optionIs('variant', 'stepper')

  )

);

export interface CategorizationStepperState {

  activeCategory: number;

}

export const MUiVerticalStepperLayoutRenderer = (props: any)=> {

  const [activeCategory, setActiveCategory] = useState<number>(0);

  const handleStep = (step: number) => {

    setActiveCategory( step);

  };

  const {

    data,

    path,

    renderers,

    schema,

    uischema,

    visible,

    cells,

    config,

    ajv

  } = props;

  const categorization = uischema as Categorization;

  const appliedUiSchemaOptions = merge({}, config, uischema.options);

  const buttonWrapperStyle = {

    textAlign: 'right' as 'right',

    width: '100%',

    margin: '1em auto'

  };

  const buttonNextStyle = {

    float: 'right' as 'right'

  };

  const buttonStyle = {

    marginRight: '1em'

  };

  const childProps: MaterialLayoutRendererProps = {

    elements: categorization.elements[activeCategory].elements,

    schema,

    path,

    direction: 'column',

    visible,

    renderers,

    cells

  };

  const categories = categorization.elements.filter((category: (Category | Categorization)) => category.type == "Category" && isVisible(category, data, "", ajv));

  return (

    <Hidden xsUp={!visible}>

      <Stepper activeStep={activeCategory} nonLinear orientation="vertical">

        {categories.map((e: (Category | Categorization), idx: number) => (

          <Step key={e.label}>

            <StepButton onClick={() => handleStep(idx)}>

              {e.label}

            </StepButton>

          </Step>

        ))}

      </Stepper>

      <div>

        <MaterialLayoutRenderer {...childProps} />

      </div>

      { !!appliedUiSchemaOptions.showNavButtons ? (<div style={buttonWrapperStyle}>

        <Button

          style={buttonNextStyle}

          variant="contained"

          color="primary"

          disabled={activeCategory >= categories.length - 1}

          onClick={() => handleStep(activeCategory + 1)}

        >

          Next

        </Button>

        <Button

          style={buttonStyle}

          color="secondary"

          variant="contained"

          disabled={activeCategory <= 0}

          onClick={() => handleStep(activeCategory - 1)}

        >

          Previous

        </Button>

      </div>) : (<></>)}

    </Hidden>

  );

};

export default withJsonFormsLayoutProps(MUiVerticalStepperLayoutRenderer);

Hi @shridhar, the code overall looks fine. Please elaborate what errors do you get? Is it just not picked up? Please show the import of the renderer/tester and how you register it.

Quickly looking over it you did not include the withAjvProps in the bindings at the bottom. As you are still referencing AJV this should definitely be added.

There are no errors in console. It’s just Categorization is not rendered any more. If I remove custom renderer it comes back again.

import { MUiVerticalStepperLayoutRenderer, MUiVerticalStepperLayoutTester } from "../renderers/MUiVerticalStepperLayoutRenderer";

const renderers = [

          ...materialRenderers,

          //register custom renderers

          { tester: MUiVerticalStepperLayoutTester, renderer: MUiVerticalStepperLayoutRenderer },

        ];
    

              <JsonForms

                schema={this.props.schema}

                uischema={this.props.uiSchema}

                data={this.props.data}

                renderers={renderers}

                cells={materialCells}

                

              />

You are importing the wrong component. You need to import the wrapped renderer, i.e. the default export

import MUiVerticalStepperLayoutRenderer, { MUiVerticalStepperLayoutTester } from "../renderers/MUiVerticalStepperLayoutRenderer";

Also don’t forget to add the additional binding I mentioned in the other post, otherwise the ajv prop will be undefined for you.

thanks, that solves it.