Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Question: hide/show functionality for large forms? #598

Closed
1 of 2 tasks
gdbassett opened this issue May 31, 2017 · 15 comments · Fixed by #1294
Closed
1 of 2 tasks

Question: hide/show functionality for large forms? #598

gdbassett opened this issue May 31, 2017 · 15 comments · Fixed by #1294

Comments

@gdbassett
Copy link

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
Copy link
Contributor

glasserc commented Jun 8, 2017

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
Copy link
Contributor

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

@acouch
Copy link

acouch commented Jun 21, 2017

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
Copy link

EvertLagerberg commented Jul 6, 2017

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

@gdbassett
Copy link
Author

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.

@glasserc
Copy link
Contributor

glasserc commented Aug 3, 2017

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!

@fantapop
Copy link

@EvertLagerberg were you able to acheive this yet?

@loganvolkers
Copy link
Contributor

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

@fantapop
Copy link

fantapop commented Aug 21, 2018 via email

@neilyoung
Copy link

neilyoung commented Feb 22, 2019

@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
Copy link

@neilyoung maybe you meant to tag @loganvolkers

@neilyoung
Copy link

@fantapop Right, sorry, fixed

@loganvolkers
Copy link
Contributor

loganvolkers commented Feb 25, 2019 via email

@neilyoung
Copy link

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

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

HTH

@vhcoder
Copy link

vhcoder commented Dec 20, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants