# Vertical Orientation in Category Layout for Stepper

**URL:** <https://jsonforms.discourse.group/t/vertical-orientation-in-category-layout-for-stepper/444>\
**Category:** General\
**Created:** [October 20, 2021, 9:28am UTC](https://jsonforms.discourse.group/t/vertical-orientation-in-category-layout-for-stepper/444 "2021-10-20T09:28:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![shridhar](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/shridhar/32/153_2.png) [@shridhar](https://jsonforms.discourse.group/u/shridhar)\
**Post date:** [October 20, 2021, 9:28am UTC](https://jsonforms.discourse.group/t/vertical-orientation-in-category-layout-for-stepper/444/1 "2021-10-20T09:28:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [October 20, 2021, 10:12am UTC](https://jsonforms.discourse.group/t/vertical-orientation-in-category-layout-for-stepper/444/2 "2021-10-20T10:12:17Z")

</div>

Hi @shridhar, you need a [custom renderer](https://github.com/eclipsesource/jsonforms/issues/1817).

---

<div class="post-metadata">

**Author:** ![shridhar](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/shridhar/32/153_2.png) [@shridhar](https://jsonforms.discourse.group/u/shridhar)\
**Post date:** [October 20, 2021, 2:16pm UTC](https://jsonforms.discourse.group/t/vertical-orientation-in-category-layout-for-stepper/444/3 "2021-10-20T14:16:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![shridhar](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/shridhar/32/153_2.png) [@shridhar](https://jsonforms.discourse.group/u/shridhar)\
**Post date:** [October 20, 2021, 4:32pm UTC](https://jsonforms.discourse.group/t/vertical-orientation-in-category-layout-for-stepper/444/4 "2021-10-20T16:32:49Z")

</div>

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?

```auto
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);

```

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [October 22, 2021, 6:30am UTC](https://jsonforms.discourse.group/t/vertical-orientation-in-category-layout-for-stepper/444/5 "2021-10-22T06:30:45Z")

</div>

See [here](https://jsonforms.discourse.group/t/vertical-stepper-custom-renderer-not-picked-up-by-json-forms/448/2)