Create all input fields automatically based on schema

[bluepuma77]

Is your feature request related to a problem? Please describe.
We have a lot of input fields (100+), would love to build the form with all inputs automatically based on the schema.

Describe the solution you'd like
We have an ancient custom solution that builds the form with all input fields automatically, we added a label and bootstrap class attribute for the layout. It would be great if the schema could be extended and then there is a superforms component to build the form or just all fields.

Describe alternatives you've considered
Instead of integrating into superforms, it could be a helper utility or library.

Additional context
This is how our proprietary schema looked like:

    {
        "id": "firstname",
        "type": "text",
        "label": "First name",
        "text": "",
        "class": "col-md-3",
        "validation": [
            {
                "required": true,
                "message": "Please enter a first name"
            },
            {
                "isAlpha": true,
                "message": "No number in first name, please"
            },
            {
                "minLength": 2,
                "message": "First name needs at least 2 characters"
            }
        ]
    }

[ciscoheat]

Maybe this will be added in some form in 2.0, but that's far away. A Zod schema has excellent introspection capabilities, so I'd recommend you use that, or map your proprietary schema to Zod with something like this library. This is how I do it with Superforms: https://github.com/ciscoheat/sveltekit-superforms/blob/main/src/lib/schemaEntity.ts#L87

[bluepuma77]

For others looking into this: some hints for field creation are available in the "Componentization doc".

It took a little time do build a very basic draft demo with SuperForms of what we are going to use to build 100+ field forms. We use extended JSON Schema (added 'label' and 'class') because fields need to be modified by clients, which is hard with zod. JSON is (very basic) converted to zod with help of a ChatGPT-created function, then we build all fields based on the metadata.

@ciscoheat Thanks for SuperForms! If SuperFields is coming, maybe this can provide some ideas.

One further idea would be to make zod plug-able, to be able to replace with something like JSON Schema and ajv. Want an extra feature request for this?

[ciscoheat]

Thank you, nice to see a form builder like this. The problem with making such a library, as I see it, is that as soon as you allow some customization, you're opening the sluice gates and eventually everything is configurable, which is the same as doing things without the builder library. It's a hard balance to strike.

But that said, it would be interesting to see it with Formsnap, which is a really nice component library, closely integrated with Superforms.

Supporting multiple validation libraries is a bit complicated and is already discussed in #120.

[bluepuma77]

I looked at FormSnap, but it doesn't snap for me. I still have to create HTML for every input field, that's what I am trying to avoid.

Think of SAP and input masks, 30+ fields per page, I want to define those dynamically (well, tenant should define or customise) and just attach a class to it, so the layout works for laptop browser and mobile.

                'string_example': {
                    label: 'String example',
                    type: 'string',
                    class: 'col-12 col-md-6',
                },
                dropdown_example: {
                    label: 'Dropdown example',
                    type: 'string',
                    enum: [
                        'A',
                        'B',
                        'C'
                    ],
                    class: 'col-12 col-md-6',
                },

[bluepuma77]

@ciscoheat I read your great "Superforms v2: Supporting all validation libraries" post (link). Thanks for collecting feedback from the community!

You place a lot of emphasis on the type safety, maybe that is just not compatible with a dynamic JSON-schema like setup.

This is an example screenshot, our fields are customisable per tenant:

Two things are important to me:

1. Define fields dynamically via JSON, which can be loaded from database
2. Enable metadata like label and class so everything can be defined in one single place

It seems zod developers are also very keen on types, so they recommend to wrap zod to enable metadata (1), but a lot of people would prefer to have it combined with zod directly (2, 3, 4), maybe because they are unfamiliar with types - like me.

[ciscoheat]

For 2.0, I recommend using the JSON schema generated by the adapters and add metadata as needed. It won't be a part of Superforms, as there are too many ways of defining the data model, and no standard afaik.

[ciscoheat]

This is how it could work, when you have a validation schema already. You create an adapter:

import { zod } from 'sveltekit-superforms/adapters';
import { zodSchema } from './schemas.js';

const adapter = zod(zodSchema);
const jsonSchema = adapter.jsonSchema;

And from there, transform the schema to a data model for your form generator. Reference: https://www.learnjsonschema.com/2020-12/

Lots of examples how to parse the schema here (since Superforms is doing that for many of its features) https://github.com/ciscoheat/sveltekit-superforms/tree/v2/src/lib/jsonSchema