Multiple fieldsets to group form elements ?

[edi9999]

Prerequisites

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

Description

I would like to be able to group multiple form elements together in a fieldset, with following data for example :

uiSchema : {
  "ui:order": [
     {
        title: "About your car",
        items: ["car_color", "car_price"]
     },
     {
        title: "About yourself",
        items: ["name", "age"]
     }
}

and this would render as :

<fieldset>
<legend>About your car</legend>
<div class="form-group">
   <label>Car Color <input type="text"></label>
   <label>Car Price <input type="text"></label>
</div>
</fieldset>
<fieldset>
<legend>About yourself</legend>
<div class="form-group">
   <label>Name <input type="text"></label>
   <label>Age <input type="text"></label>
</div>
</fieldset>

Version

1.0.0

What do you think of such a syntax ? If you are interested, do you have any starting points for implementing this ?

[loganvolkers]

I have implemented a generic version this here: https://codesandbox.io/s/0y7787xp0l

It uses "ui:group" instead of "ui:order" and support custom rendering for doing other things like tabs, tables and wells instead of just fieldsets.

[epicfaace]

Cool @loganvolkers . Could you write up exactly how that works? I'm wondering if your approach might also solve https://github.com/rjsf-team/react-jsonschema-form/issues/1157, and if we could incorporate your approach (or something similar) into this library.

[loganvolkers]

The premise is that it overrides the ObjectField default behavior of just placing all it's properties as a list of divs.

The grouping part is a slightly modified code snippet from the original UI:order code.

I think customizing the ObjectField template is one of the least used and most powerful customizations in this library.

I don't think that this needs to go into the core library, since it's easy enough to solve externally, but it could get incorporated into examples or docs if someone else has the time.

On Sun, Dec 8, 2019, 9:33 PM Ashwin Ramaswami [email protected] wrote:

Cool @loganvolkers https://github.com/loganvolkers . Could you write up exactly how that works? I'm wondering if your approach might also solve #1157 https://github.com/rjsf-team/react-jsonschema-form/issues/1157, and if we could incorporate your approach (or something similar) into this library.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/rjsf-team/react-jsonschema-form/issues/784?email_source=notifications&email_token=AAI2PXXZCFOTGTYXRGVTWADQXXKCTA5CNFSM4EG2YXZ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEGH4QEA#issuecomment-563070992, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAI2PXSNX4SIQ7HZ766I7YDQXXKCTANCNFSM4EG2YXZQ .

[IcarusHU]

It's not a bad solution, however I'm kind of new to React, and I'm having a serious issue for weeks now. I have to recreate a really complex form with vertical tabs (hopefully using MUI components), Back and Next buttons, custom fields, etc.

I've implemented your solution, managed change them to vertical tabs, however I couldn't really change them to MUI version and also didn't find a corresponding solution for navigating between tabs. Also when I submit the form, I got "Uncaught TypeError: Cannot read property 'length' of undefined" error from validate.js, and don't really understand why or which part is wrong.

Also I (you too in the codesandbox example) have a constant error, that it cannot render the "Todo" object.

The third problem is that you use function call and custom component in the uiSchema JSON, but we would like to receive every part of the schema from the server. Do you think it is possible to convert it somehow to be outsourced in a ui-schema.json file?

Also two questions:

1. can you help find out what are these 2 errors and how to solve them? Your example doesn't contain the Submit button somehow (???), so I cannot test about the validation error.
2. can you help to implement navigation buttons, which also changes Tab state?

(fyi also Well is no more supported by bootstrap, so I removed that part)

I think it's really disturbing, that there are no solution for this in RJSF yet, however it is a casual usecase having a Wizard-like or multipage form with navigation for ages, even UX guidelines recommend paged form solutions.

This example is from a different issue here: https://jsfiddle.net/gmz7qern/, but our problem is that we have to validate different parts of the form together, so we cannot use partial schemas.

https://github.com/RxNT/react-jsonschema-form-pagination/ - this is a pager solution, which unfortunately couldn't be merged into this repo, because they are too different, and I don't really want to use an outdated and incompatible component which prevents me from updating rjsf and react.

Some of the other json-schema-form packages have this feature - paging/tabbing/stepping (I won't 'advertise' them unless an admin gives me permission), but those solutions are much worse in case of all the other json-schema form components, eg not handling select lists correctly, outdated, being underdocumented, or it's a huge pain to convert stepping solution to a vertical tabbed version.

[loganvolkers]

It took me ten minutes, but here's the solution to your problem: https://codesandbox.io/s/tabbed-mozilla-form-41hfn

I've implemented your solution, managed change them to vertical tabs, however I couldn't really change them to MUI version and also didn't find a corresponding solution for navigating between tabs.

In react-bootstrap there are two types of tabs. Controller and uncontrolled. To implement custom back/forward behaviour, needed to write a new template with controlled tabs.

Also when I submit the form, I got "Uncaught TypeError: Cannot read property 'length' of undefined" error from validate.js, and don't really understand why or which part is wrong.

Comment out the line transformErrors={log("transformErrors")} to fix this. transformErrors should return an array.

Also I (you too in the codesandbox example) have a constant error, that it cannot render the "Todo" object.

I don't understand this problem. Please provide an example by forking the sandbox and/or adding some more steps.

The third problem is that you use function call and custom component in the uiSchema JSON, but we would like to receive every part of the schema from the server. Do you think it is possible to convert it somehow to be outsourced in a ui-schema.json file?

It's possible, but not as easy as it should be because the registry doesn't fully support template customization last time I checked.

can you help find out what are these 2 errors and how to solve them?

Solved one

Your example doesn't contain the Submit button somehow (???), so I cannot test about the validation error.

See comments in the above fiddle. If you pass any children to Form, then it won't render the default submit button.

I think it's really disturbing, that there are no solution for this in RJSF yet, however it is a casual usecase having a Wizard-like or multipage form with navigation for ages, even UX guidelines recommend paged form solutions.

Agreed, if I had more time I would create this as a standard plugin, but contributing is something that I have little time for. Once you've wrapped you head around this more, maybe try your hand at a pull request?

[IcarusHU]

Hi,

thank you very much. My main problem now is, that I need vertical tabs, so I'm trying to convert your solution, but I didn't find controlled nav pills in react bootstrap yet., Also that I wanted to use MUI elements, (i'm using rjsf-material-ui), but I can live with react-bootstrap element until later.

For the uiSchema problem, I solved it by getting the field declarations parts from my API and merging it with the rest,

import uiSchemaDyn from '../data/uischema.json'; var uiSchema = { "ui:groups": groups, "ui:template": props => <Grouped.ObjectFieldTemplate {...props} />, ...uiSchemaDyn };

but later, this should be solved to be able to add custom field components to specific fields, mostly because I will need tooltips and unit parts for all fields.

I've also added missing 'key's in the templates map functions, but there are two more warnings in ObjectFieldTemplate (Warning: Each child in a list should have a unique "key" prop.), which I cannot find).

However I found a major problem, and I'm not sure, this will be the last:

I've tried to add a dependency field after one of my boolean (yes/no checkbox) fields. I've tried every type of solution for dependency field display from the documentation, but none of them were working (without any error), so like adding this at the end of schema.json, nothing happens:

"dependencies": { "existingField": { "properties": { "displayFieldName": { "title": "Please describe the details", "type": "string" } }, "required": [ "displayFieldName" ] } }

the 'displayFieldName' field is obviously not in groups.json, but it is described as a textarea widget in uiSchema.json, but it doesn't work. I supposed, because it's missing from groups.json, thus, it is not added to the groups later somehow. Any idea?

I will post my solutions and the rest of the problems later, and maybe we can add a pull request later later on, because I will have to work with this for a while.

I would really appriciate, If you can help me with finding solution for dependency field, and vertical tabs solution.

[IcarusHU]

Also one more really important part, which i'm sure I will need later, is dependency tabs, so for example by checking a checkbox, an extra tab fieldgroup is displayed. Btw almost all of these are solved in jsonforms.io using categories and mui (i hope mentioning a concurrent repo is not firbidden), however there are numerous other problems with that component library, just that I saw this solved somewhere else, however the implementation is really different from this one.

[IcarusHU]

Meanwhile I managed to solve the vertical tabs, and I've put up every type created here: https://codesandbox.io/s/tabbed-mozilla-form-c7yf9

However the conditional fields are still a mystery.

About the "Also I (you too in the codesandbox example) have a constant error, that it cannot render the "Todo" object." comment, you can check the console of codesandbox at your solution:

Can't render function uiTemplate() {} Object {title: "Todo", description: undefined, TitleField: function TitleField(), DescriptionField: function DescriptionField(), properties: Array[12]…}

You can find the missing key errors there too.

[hiitskiran]

ui:groups works fine if the fields are all in one level, how do pass the field names to the groups in a nested object scenario? like, obj.field1

[hiitskiran]

I have implemented a generic version this here: https://codesandbox.io/s/0y7787xp0l

It uses "ui:group" instead of "ui:order" and support custom rendering for doing other things like tabs, tables and wells instead of just fieldsets.

Great example which covers the majority of UI forms scenarios, I had couple of quick questions.

1. I just want the fields to be displayed in the form of grid without group titles, for eg: in your example I dont want the column with labels "Much Less Important" and "Only Kind of Less Important", just want the grid of fields as the individual field has a label and having group name displayed I loose a lot of space

2. How do I pass the field names to the groups in a nested object scenario? like, obj.field1

3. where do I tweak the styles to not show the grid template without table borders and also not to show gridlines

[NeslihanKolukisa]

@hiitskiran Did you find a solution ui:groups works fine if the fields are all in one level, how do pass the field names to the groups in a nested object scenario? like, obj.field1