MaterialUI Categorization Stepper


I would like to add a Material UI Stepper to my JSONForm. I have read comments from Add alternative categorization renderer based on steppers by edgarmueller · Pull Request #1235 · eclipsesource/jsonforms · GitHub and have got the stepper working (looks great!) but i was wondering if there was any way i could add Next and Previous Buttons to toggle through each page? Also if there was any way to always show previous content, for example if i was on page 1 and i pressed next / went to page 2, it would still show contents from page 1 and just append page 2 to the current view?

Any help would be appreciated.

Thanks Arslaan Qadus

[original thread by Arslaan Qadus]

I think you would need to create your own renderer here.
@edgarmueller do you see a good way to make the stepper renderer extensible/configurable for the asked use case?

[Arslaan Qadus]

Hi, @edgarmueller is there any update on this?

[Edgar Müller]

I’d go with a custom renderer as well. You can copy the existing stepper renderer and add the buttons, e.g. as it is the case in the React Stepper component - Material-UI example. @eneufeld We could probably provide a 2nd UI option called showNavButtons or similar that would display the back/next buttons somewhere (not sure if I like it though).

[Edgar Müller]

About your 2nd question, I guess that possible, but I don’t think the Stepper would be a good fit for that. Conceptually, this requirement seems to boil down to displaying multiple categories at once.

I agree, I would also tend to not add a new ui option at the moment,
I would suggest to move this as a feature request to github and discuss the necessity of it there

[Arslaan Qadus]

Hi, i have been trying to implement my own custom renderer to implement the Next and previous buttons i previously described but im struggling to understand how to do this.

I have seen the MaterialCategorizationStepperLayoutRenderer and can see the activeCategory state, which i know i can simple increment / decrement when next / previous button is pressed but im just a little confused on how to get access to that state and where to pass my own handleNext and handlePrevious functions.

I have created my own Control component and corresponding tester, here should i be importing the MaterialCategorizationStepperLayoutRenderer and passing in my own handleNext and handlePrev functions?

Any help would be appreciated, Thanks Arslaan.

The most pragmatic solution is to just copy and adapt the code in the way you want. The renderer only has about 40 lines of code, so this is perfectly fine. If you prefer to reuse the renderer feel free to open a PR which adds customization capabilities (or extracts a common reusable component) and we’ll definitely take a look.


I came across a need for something similar and based on this thread I have a PR created:


@sdirix @eneufeld @edgarmueller Please let me know if this looks suitable or any improvement suggestions you may have.

Thank you very much! We’ll take a look :slight_smile: