epicfaace commented 5 years ago

Prerequisites

[x] 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 commented 5 years ago

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

MatinF commented 5 years ago

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 commented 5 years ago

Would the first implementation include nested pages?

epicfaace commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

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

MatinF commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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[bot] commented 2 years ago

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 commented 2 years ago

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

heath-freenome commented 2 years ago

@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 commented 2 years ago

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

MatinF commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

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

cihusss commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

Awesome, thanks a bunch!

cihusss commented 2 years ago

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 UNSAFEcomponentWillReceiveProps 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 commented 2 years ago

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

MatinF commented 2 years ago

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 commented 2 years ago

Would love to see this integrated into rjsf core

desuraghu13 commented 6 months ago

Any update on this enhancement ?

thaikoh commented 2 months ago

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.

Screenshot 2024-09-04 at 17 42 10

rjsf-team / react-jsonschema-form

Multiple pages proposal #1157

Prerequisites

Description

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

2. Integrate pagination with the core project

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

2. Integrate pagination with the core project