Custom positioning ui fields

[yyilmazams76]

Is there a possibility to arrange position of the ui fields in schema?

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.
• Ideally, I'm providing a sample JSFiddle or a shared playground link demonstrating the issue.

Description

[Description of the bug or feature]

Steps to Reproduce

1. [First Step]
2. [Second Step]
3. [and so on...]

Expected behavior

[What you expected to happen]

Actual behavior

[What actually happened]

Version

You can usually get this information in your package.json or in the file URL if you're using the unpkg one.

[Maikel-Nait]

Probably you could try to use this nice "plugin" :
https://github.com/audibene-labs/react-jsonschema-form-layout

[boerngen-schmidt]

Hello,

I was wondering too, if it is possible to rearrange the positions of fields. I have looked at some tickets #1318, #1551, #762 and #1010. Also I read the documentation a couple of times, but in neither of them I found an easily understandable way a non-javascript developer (like I am) could achieve this. I understand from the read discussions, that there is no standard for the uiSchema.

What really bugs me with rjsf is, that the schema which I would understand more as a data layout, actually defines the layout or at least I did not find another way to group fields without grouping the underling data, which also is annoying since the data might be flat, but in order to prefill the form I need to transform it and also after change transform it again to match my endpoint.

Before I had a look at JSONForms which seems to be very similar to this library. They provide a very simple way to do Layouts in their library see: https://jsonforms.io/docs/uischema/layouts

@Maikel-Nait the "plugin" seems to be very dated ~3 years old. Also it seems to only (?) support bootstrap, correct?

If there is a way, that I could design my own layout, and then pass it to the library it would be awesome to have a few examples and more documentation on it.

[epicfaace]

@boerngen-schmidt Try the "Custom Templates" page -- it should allow you to create your own custom layouts: https://react-jsonschema-form.readthedocs.io/en/latest/advanced-customization/custom-templates/

[andraz]

I used classNames and it worked great: #1551 (comment)

[c0ncentus]

Add "styled-schema" ??

@epicfaace

it will be more simple to do this with rjsf tools because "ui schema" is more "attribute-schema" in reality (my point of view). If you disagree in my point of view maybe "style-schema" will be something to add ?

"style-schema" maybe will solve many issues because we have opportunity to made dynamic css #HelloWordReact react inlineCSS is crucial in my point of view else i go back for some javascript dom manipulation (lost advantages of react) : / .

Exemple 1

"display:none"/"display:block" in "style-schema"/"ui-schema" will show one part at a time of the form and made a multi step form in a simplest way (tricky and excited about the result because simplest approach than splitted JSONForm in tabs and manage reverse logic like hell when finish all forms.

[i already do this in extremly painfull experience as dev and end user in my perso project]

=> i have some difficulties for

• splitted the form
• identify witch form is updated
• save user input on onchange (not solved)
• as user difficult to understand i have to make "submit" for save it and next submit once again for validate the all form

in css solution there is no issue for all the points. but I'm not kamikaze and don't want to make DOM javascript manipulation or yet an another plugins, package.

Exemple 2

We can apply "display: grid" and column-grid "auto auto" ...
it would be nice and styled for array of input or more ! something user appreciate to use !

[heath-freenome]

I have plans to build a super flexible form layout system for RJSF. Hopefully I can get it into the next major version by 2024

[joesaunderson]

I have plans to build a super flexible form layout system for RJSF. Hopefully I can get it into the next major version by 2024

Hey @heath-freenome did this ever go anywhere, just checking I didn't miss it!

We'd be keen to explore how others are approaching layouts.

[heath-freenome]

@joesaunderson funny you should ask, I'm about to embark on doing this starting today. I'm planning on getting it into rjsf v6 and have a beta up in 6-8 weeks

[heath-freenome]

@joesaunderson I have merged the playground example into rjsf-v6 for layouts if you want to pull the branch and check it out

[joesaunderson]

@joesaunderson I have merged the playground example into rjsf-v6 for layouts if you want to pull the branch and check it out

Sounds good! How would I go about checking that out visually? Or is it just in code at the moment?

[heath-freenome]

You would do the following (assuming you have either git cloned react-jsonschema-form or created a fork):

git checkout rjsf-v6
git run build
cd playground
npm start

[heath-freenome]

See the new LayoutGrid feature in v6