More control via schema

[zehawki]

This package is missing its full potential :-)

A form system that's based on a schema should be fully controllable via a schema. There's no point in doing some things from a schema and then have to go into the code to customize simple stuff. Example:

1. Headings and other help text (eg https://uniforms.tools/docs/tutorials-customizing-your-form-layout#adding-a-heading-to-the-form)
2. Error messages.
3. Class names

Please consider adding these to the schema? Heading would be a new type, whereas help and error would be new keys. Eg

  properties: {
    blurb1: { 
      description: 'IT meeting guest questionnaire',
      type: 'heading' 
    },
    firstName: { type: 'string' },
    lastName: { type: 'string' },
    workExperience: {
      description: 'Work experience in years',
      type: 'integer',
      minimum: 0,
      maximum: 100,
      help: 'Round it off to the nearest year',
      'errorMsg': 'Oops, no negative allowed'
    },

The heading type would go into the AutoField block and return a < h3 > or some such.
The help and errorMsg would control the help message and error message, etc.

[radekmie]

Hi, @zehawki! It's great to see, that you've discovered the power of theming independently 😄 Let's analyze your ideas one by one:

1. Headings (and other non-form components). I guess we all agree, that the "basic header" would be so inflexible, that it'd barely make use outside of demos and PoCs. That's because you'll always have the need to customize it - add icons, links, style it properly, handle API-generated data... The list goes on. That's why uniforms are not - and we are not planning to - implement such logic.

   However! It doesn't mean you cannot do it with uniforms - we've got you covered. You can override the AutoField component and render anything you'd like to - not only headers but literally anything, based on the schema and props. We do it quite extensively in our projects, often by creating a "layouting system" - an object that can generate a schema but also the shape of JSX. And as I already made I think more than dozen of them, I can tell that there's nothing generic enough to cover these cases.

2. That's something that uniforms are not supposed to do - that's the case for a bridge. Right now, each one implements a getValidator method, that creates the validation function, and the getError/getErrorMessage/getErrorMessages methods family. The latter is what you need - if you'll have enough data in the error (returned from the validator), you'll be able to explain the error in getErrorMessage.

   Based on your example, I assume you're using JSON schema. In this case, I'd recommend using the ajv-errors package, which serves this need just fine. There's also ajv-i18n if you'd need to translate them. And finally, you can roll your own implementation - ajv errors are well defined and you could implement your own getErrorMessage (I did as well).

   Separately, the help text parameter is an excellent example of a theme-specific option. As you can see in our docs, TextField already accepts help prop in uniforms-antd, uniforms-bootstrap4, and uniforms-bootstrap4 themes. And that's not the only field - all fields from these themes do. If you'd like to render it differently or add support for it in other themes - we're open to suggestions and contributions.

3. Finally, class names should be handled by all of the field components. Just keep in mind, that most of them render more than one HTML node, thus it may appear in a different place. If there's something missing, once again, feel free to let us know.

[radekmie]

@zehawki: could you comment on these? I'd like to improve our docs if that's what you meant.

[zehawki]

Hi @radekmie, thank you for the very detailed answer.

Based on what you wrote above, I realized that Uniforms would not serve my purpose. After some search, I switched over to react-jsonschema-form, which had exactly what I needed straight out of the box and truly matched what I had in mind about creating forms with only schema in mind and no need to add custom or other components. It took me only a few hours to roll it out as part of the maincross service. As an example, one of our customers then used it to create this - https://www.regenerativemedia.net/topics/588/form/2099/co-creating-the-regeneration-narrative

I'd like to improve our docs if that's what you meant.

react-jsonschema-form has spectacular documentation (https://react-jsonschema-form.readthedocs.io/en/latest/), codepen examples & a comprehensive playground that makes it very easy to adopt vs Uniforms. It would be great if Uniforms would enhance the documentation...