Multiple pages proposal

[epicfaace]

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

It would be nice to have multiple pages in a form. As a first pass, I'm proposing something like the following in the uiSchema:

{
    "ui:options": {
        "pages": [
            {
                "title": "Page 1",
                "ui:order": [
                    "name",
                    "address",
                    "email"
                ]
            },
            {
                "title": "Page 2",
                "ui:order": [
                    "zipcode",
                    "abc"
                ]
            }
        ]
    }
}

This would put everything in all pages within a single schema. In the case we have an array of required elements, then, perhaps validation errors could show only at the end once all pages are completed.

Not sure if this is the right way to do it; would appreciate some feedback!

[epicfaace]

Another repo which implements pagination: https://github.com/RxNT/react-jsonschema-form-pagination

[MatinF]

I think this would be a really nice implementation. We’re relying on the separate pagination project, but it’s causing a number of issues for us.

In our case, we’d just like the pagination functionality of the separate project - but included natively in rjsf so we can avoid eg any versioning issues.

Would be interested in hearing the outlook on this.

[Carus11]

Would the first implementation include nested pages?

[epicfaace]

Yeah, I think implementation of this would not necessarily take much time, but it would be good to get the design right -- something to be extended upon.

For example, will this structure proposed above be compatible with more complicated features, such as nested pages? @Carus11 what did you have in mind exactly when you said "nested pages"? There are several ways in which that could look like, so if you have an example that would be helpful.

[MatinF]

We use it in the following way:

The ability to split a long rjsf form into separate tabs is extremely useful - we would just like for it to be possible from the core project.

[epicfaace]

We’re relying on the separate pagination project, but it’s causing a number of issues for us.

@MatinF what are some of these issues? Are they related to the design of the library (https://github.com/RxNT/react-jsonschema-form-pagination) or more about the fact that it's a separate package from react-jsonschema-form?

[MatinF]

I think the visual and functional design is good, but we had some challenges that eg switching tabs in the pagination would clear the editor formdata state. We do a rough fix for this by saving the state between tab changes “manually” but I think this issue is somehow related to these being separate repos and not fully integrated in the right way.

I’d be able to quickly test an implementation to see if this is resolved if the repo is integrated

[MatinF]

Any update on this? I looked at the posts that mention this issue, but I don't think they really resolve the issue. It would be great to have a built-in, simple-to-use pagination feature compatible with the latest rjsf releases - and which do not involve dynamic behavior in the UIschema.

[epicfaace]

No updates as of now, but if anyone has time to create a basic implementation, we could move this forward!

[MatinF]

Ok, we were hoping there might be an option of reusing a lot of the functionality from the -pagination library as suggested in this issue. We're not able to do it ourselves, but I can try and reach out to the author again

[mavarazy]

@epicfaace, @MatinF I finally have time to work on this, but I want to clear out a few things first:

There are 2 ways to add this functionality:

#1. As originally suggested have a pagination project inside packages, which would look something like:

- packages
   - core
   - pagination
   - bootstrap-4
   - ...

In that case, I would just need to import the pagination project, and update documentation.

#2. Integrate pagination with the core project

In that case, I'll need to add additional components to Bootstrap-4, Semantic-UI, to keep the library as a whole ...

What is a preferable way from the @epicfaace point of view?

[epicfaace]

@mavarazy , great!

I think we would want to do 2., integrate pagination into the core project. Right now, each package is only designed to be a single theme, and we would want all themes to use pagination.

We could always start by only having pagination support for core, and then I'm sure people would work to port some of that into other themes (just like what's happening with additionalProperties).

[ronny-rentner]

What I don't understand: When you add pagination to the core, all themes should automatically have it. Just construct it with <button ... /> and <field ... /> etc. and it should work. Themes shouldn't interfere too much with functionality. Though, it might be in a wrong design/layout but then it's up to the theme to decide how to better render it, maybe by using theme specific components like a Drawer in material-ui.

[epicfaace]

That's currently not how themes work -- making themes involve creating all widgets, fields, and templates -- though if you have thoughts as to how we could have cleaner abstraction, we might be able to change the way themes work to use that abstraction.

[stale]

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.

[MatinF]

Would still really like to have this functionality built into the rjsf

[heath-freenome]

@epicfaace, @MatinF I finally have time to work on this, but I want to clear out a few things first:

There are 2 ways to add this functionality:

#1. As originally suggested have a pagination project inside packages, which would look something like:

- packages
   - core
   - pagination
   - bootstrap-4
   - ...

In that case, I would just need to import the pagination project, and update documentation.

#2. Integrate pagination with the core project

In that case, I'll need to add additional components to Bootstrap-4, Semantic-UI, to keep the library as a whole ...

What is a preferable way from the @epicfaace point of view?

@mavarazy Take a look at the new way to add templates that is coming in RJSF v5 (landing in weeks). I can work with you to design something that is easily extensible in the latest release.

[MatinF]

This would be amazing to get in - either solution works for us

[MatinF]

By the way, you can see how we've implemented this in our own editor tool today (using the plugin):
https://canlogger.csselectronics.com/simple-editor-demo/#/

As mentioned, the issue with our solution is that we're "locked" into a 2 year old version of react-jsonschema-form because the plugin is not maintained.

[heath-freenome]

@MatinF If this is to make it into core it will require someone beside the current (very few and busy with their own work) maintainers to build it. @mavarazy be sure to use the v5 beta master branch to do the work as there are a lot of changes (such as full typescript in core)

[MatinF]

Understood. @mavarazy as mentioned earlier, we'd be happy to contribute with inputs/sparring on this, as well as some funding if that helps

[mavarazy]

I'll need to refresh my RAM to get to this, I'll try to find time this/next week.

[cihusss]

Any news on this? If not what is the external pagination library some of you have used? I have a project for which this lib is perfect, but badly need pagination since I'll have more than 500 questions/elements in the form.

Thanks!

[MatinF]

We use this from @mavarazy :
https://www.npmjs.com/package/react-jsonschema-form-pagination

It works great as per below config editor example:
https://canlogger.csselectronics.com/simple-editor-demo/#/

However, it is not part of the rjsf core and we are therefore locked to a very old version of rjsf (^2.0.0-alpha.1) which results in a number of challenges. So would be excellent to get this as part of the core.

[cihusss]

Awesome MatinF, I already got it working. Do you happen to know how to apply themes (material/bootstrap) to the old rjsf (^2.0.0-alpha.1)?

[MatinF]

I am not sure, sorry - it's been a long time since I messed with the core of our configuration editor code :-)

Our source code is below, though:
https://github.com/CSS-Electronics/config-editor-base
https://github.com/CSS-Electronics/config-editor

[cihusss]

Awesome, thanks a bunch!

[cihusss]

Getting the below warning in browser when updating state with form data. It is something in the react-jsonschema-form-pagination package. The true bug is that it messes with tabs, jumping to first tab every time state is updated. I managed to suppress the warning by changing "componentWillReceiveProps" to "UNSAFE_componentWillReceiveProps" in applyNav.js (two instances), but obviously the jumping-to-tab-one bug remains. Any ideas?

Good thing is I was able to make react-jsonschema-form-pagination package work with the latest @rjsf. Just need to fix that one bug mentioned above. Any help is highly appreciated.

Browser warning:
react_devtools_backend.js:4026 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state
• Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: FormWithPagination

[MatinF]

@mavarazy just wanted to check if you had the chance to look further at this?

[MatinF]

We created a version of the react-jsonschema-form-pagination project that includes just the tabs functionality and which works with the latest rjsf versions. You can find it here: https://github.com/CSS-Electronics/rjsf-tabs

It would be ideal to modify this so as to better integrate with rjsf through e.g. the plugins functionality, or perhaps an integration into the core project. But we are not sure what that would require in terms of code modification. However, we're hoping our updated project may help others and may serve as the basis for a more formal integration.

[StephenStrickland]

Would love to see this integrated into rjsf core

[desuraghu13]

Any update on this enhancement ?

[thaikoh]

Hello everyone, I'm trying to use react-jsonschema-form-pagination like this:

import Form from '@rjsf/material-ui';
import validator from '@rjsf/validator-ajv8';
import applyNavs from "react-jsonschema-form-pagination";
...
let FormWithNav = applyNavs(Form);
...
return (<FormWithNav schema={this.state.mySchema} formData={this.state.myConfig} validator={validator}
                    onSubmit={(e) => this.saveData(this.props.context.instance_id, e.formData)} uiSchema={uiSchema} />)

But I'm getting unexpected results.
The good:

• tabs are showed and on click it switched the pages of the forms
  The bad:
• tabs not look like tabs but like regular text
• on some form pages I see title Unknown field type and after that title tabs links are duplicated (see picture below).

Without pagination form displayed and works normally.
I'm not good in react and don't know how to solve it, maybe some styling are missing?

Any help will be appreciated.
Thank you.