rjsf-team/react-jsonschema-form

Question: hide/show functionality for large forms?

gdbassett opened this issue · 15 comments

gdbassett commented

Prerequisites

  • I have read the documentation;
  • In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.

Description

I have a rather large schema (roughly 150 potential values to input). Is it possible to condense the form in either an accordion or a hide/show manner to make navigation easier? Is this something that could be added to a form generated with the existing library or would the library itself require updating?

glasserc commented

Hi, thanks for your question. #304 was meant to allow use cases like this but I don't really know what is possible using existing libraries or what you would need to do to use them together with RJSF.

glasserc commented

See also #268, which I finally just found again.

acouch commented

It would be awesome if this could be included in UISchema. Maybe ui:order could contain a grouping field so you could do something like:

ui:order:
- field1
- field2
  group:
    - field 3
    - field 4
- field5

If this is something the maintainers would accept I could take a crack at it.

EvertLagerberg commented

@glasserc How would I use Field Template to achieve hide/show? Its not obvious from the docs.

  • 👍3
gdbassett commented

I'm in the same boat as @EvertLagerberg. I don't know how to use Fix #284 to collapse empty sections and ignore required fields in them. I had expected #542 would address it, but it still seems to be pending feedback from the author. If it's possible to address this with #284, it may be helpful if someone can document a quick blog post or such showing how to do it.

  • 👍1
glasserc commented

There's no specific setting or configuration that #304 permits. However, with your own field template, you can write any kind of HTML you like, including one that collapses according to user input. If someone took the time to do this, an example in the docs would be great!

  • 👍1
fantapop commented

@EvertLagerberg were you able to acheive this yet?

loganvolkers commented

@fantapop Here's an example using a custom ObjectFieldTemplate: https://codesandbox.io/s/0y7787xp0l

  • 👍3
fantapop commented
neilyoung commented

@loganvolkers Looks good, but produces tons of warnings, mostly because of this:

index.js:1449 Warning: Each child in an array or iterator should have a unique "key" prop.

fantapop commented

@neilyoung maybe you meant to tag @loganvolkers

neilyoung commented

@fantapop Right, sorry, fixed

loganvolkers commented
neilyoung commented

Long time ago, but I found an easier way by utilising react-jsonschema-form-extras.

https://codesandbox.io/s/bold-williamson-23hwo

HTH

vhcoder commented

Hello we looked at both these options.... we cannot find a way to support dependencies. Does anyone have an example for this?
Thanks.
VRH