Switch to a view-only schema

General
1

Advice on how to switch a ui-schema to “view-only” en masse.

e.g. we have a stepper wizard that uses multiple schemas, one for each step.

At the end we want to review the input, with a section per form, but in display-mode (not edit).

Can think of a couple of ways:

  1. switch the renderers set at runtime
  2. modify the uischema at runtime
  3. create a view-only uischemas

I guess adding a property-based solution to jsonforms would be nice akin to readonly; then we can use rankers out the bag

What do you think?

2

Hi @alastair-todd,

We offer a readonly prop on the JSON Forms component by which all renderers are instructed to render “view only”. Additionally you can set the validationMode to 'NoValidation' to save on performance.

In case you like some special rendering, for example by rendering only text instead of inputs then you need to implement an own read only renderer set.

1 Like
3

I think JSON Forms is amazing and will solve all of my CRUD use cases.
I also want to extend it for my “display” use case, e.g. reports and dashboard pages.

All the features that makes JSON Forms great for input/forms can also be great for pure display.
This is possible using custom Renderer Sets, but I think it would be great if it came out of the box.
I’m going to work on the React Material display Renderer Set over the week and would be happy to PR it.

4

I created a demo to display JSON Forms in “view only” mode.
It’s basically the same as the RealOnly mode but I changed the look to remove all input declarations, e.g. underlines.
It turned out easier than I thought.
I didn’t have to create a new Renderer Set.
All I have to do was to create a new Material UI Theme and change a few “disabled” styles.

The code is here

and a live demo here
https://jsonforms-demo.rebelsoft.com/

1 Like
5

Hi @mingfang, thanks for your feedback. Nice solution and demo :+1: