React-jsonschema-form: Multiple pages proposal

[epicfaace]

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]

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 and 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.