Enhancing Form with grid layout

[phucpnt]

Reasons for making this change

Enhancing Form with grid layout. Adding new configuration ui:layout for uiSchema.

Checklist

• [ ] I'm updating documentation
  • [ ] I've checked the rendering of the Markdown text I've added
  • [ ] If I'm adding a new section, I've updated the Table of Content
• [x] I'm adding or updating code
  • [ ] I've added and/or updated tests
  • [ ] I've updated docs if needed
  • [x] I've run npm run cs-format on my branch to conform my code to prettier coding style
• [x] I'm adding a new feature
  • [x] I've updated the playground with an example use of the feature

[santosguilherme]

@phucpnt nobody will see it?

[revolunet]

this is cool but how would you handle responsive ?

[phucpnt]

@revolunet it support desktop for grid layout. For mobile it will fallback to 1 column

[glasserc]

Hi, thanks for the PR. It looks good, but in general I would like to keep to a minimum the amount of visual/UI customization available as part of the rjsf package itself. The same way I don't want to support Material Design or Ant, I also don't want to have to support more than one layout mechanism. Is there some way that we could support this, or something like this, as a third-party extension? Are there things missing in the base rjsf library that would make doing so easier? If so, I would much rather support that, and let users/developers decide what layout they want to use in their projects.

[kharkut]

When will this be merged into master branch?

[random-one]

@kharkut as far as I understood they are not planning to extend the project with this kind of functionality. I personally needed it too so I took the file from the merge request withLayout.js in my project and used it like in the example.

[MatejBransky]

I think that this should be as a separate package or in some UI package. (related #899)

[zetekla]

let's merge this.

[epicfaace]

Closing this PR because we already have this functionality in withTheme.

[Fedorov113]

Closing this PR because we already have this functionality in withTheme.

Sorry, but I don't think that withTheme allows to build grid layouts like this PR purposes.

"ui:layout": [
      [{ firstName: 6 }, { lastName: 6 }],
      [{ password: 6 }],
      [{ age: 6 }, { telephone: 6 }],
      [{ bio: 12 }],
    ]

[epicfaace]

@Fedorov113 what I meant was, withTheme is already a HOC that allows for form theme customization. We don't need another HOC called withLayout.

We can still implement a ui:layout functionality, but this would likely need to be implemented for each theme that we support.

[Fedorov113]

@Fedorov113 what I meant was, withTheme is already a HOC that allows for form theme customization. We don't need another HOC called withLayout.

We can still implement a ui:layout functionality, but this would likely need to be implemented for each theme that we support.

Thank you for your reply.

I use this package a lot with Material UI theme, however I'm not primarily a JS developer. I really need this functionality and will try to implement it in my fork. Can you please give some advice on where to start? Is the code in the PR too outdated?

[hiitskiran]

this ticket seems to be closed, Is "ui:layout" supported with latest release 1.8.1? If its supported, how would we provide the layout options in a nested schema structure, the below example provided works only in a flat schema where the object properties are at root level, how would we define if they are nested for eg, name.fn, name.ln

"ui:layout": [ [{ firstName: 6 }, { lastName: 6 }], [{ password: 6 }], [{ age: 6 }, { telephone: 6 }], [{ bio: 12 }], ]

[Mani-1112]

Can anyone share sample example for this..... @phucpnt

[mromey]

That would be great. I second the request, and would love to see the playground upgraded with this example.

Sent from my iPhone

On Sep 17, 2020, at 3:37 AM, Mani-1112 [email protected] wrote:

 Can anyone share sample example for this..... @phucpnt

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[phucpnt]

@Mani-1112 , @mromey you can check the sample at https://github.com/rjsf-team/react-jsonschema-form/pull/693/files#diff-5096d8cd13427dbf61c5ff143f034b98

[Mani-1112]

Hi,

The below syntax for layout will work on the latest rjsf package or not ? As when I tried the suggested code it didnt worked out

uiSchema: { "ui:layout": [ [{ firstName: 6 }, { lastName: 6 }], [{ password: 6 }], [{ age: 6 }, { telephone: 6 }], [{ bio: 12 }], ],

As I updated only UIschema and others do I need to add or latest rjsf package will handle? @phucpnt @epicfaace

[phucpnt]

@Mani-1112 the PR is not merge yet.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please leave a comment if this is still an issue for you. Thank you.

[JuanHeyda]

hi any news about this?

[zetekla]

@Mani-1112 https://github.com/Mani-1112 the PR is not merge yet. Really needs it to be Merged!

On Thu, Aug 4, 2022 at 3:38 PM Juan Heyda @.***> wrote:

hi any news about this?

— Reply to this email directly, view it on GitHub https://github.com/rjsf-team/react-jsonschema-form/pull/693#issuecomment-1205743182, or unsubscribe https://github.com/notifications/unsubscribe-auth/AENTFDAIXDQX7IIIFL4EHLTVXQS4PANCNFSM4DZXKIJQ . You are receiving this because you commented.Message ID: @.***>

[heath-freenome]

So much has changed since this PR was created. Especially the addition of 7 themes that this PR cannot support. Don't worry, there is effort underway to implement grid support in a MUCH richer way for all themes coming in 2023 (hopefully). Stay tuned