Vertical Orientation in Category Layout for Stepper

General
1

Can I use json forms stepper with orientation as vertical? or do I need to write custom renderer?

2

Hi @shridhar, you need a custom renderer.

3

It would be great if we could add it as option in future.

4

I have created below custom render. I added it to render set of json form. But it does not render anymore. 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);
5

See here