Add ability to give a form multiple templates of a given type and pick one by name through uiSchema

[elevesque-nexapp]

Prerequisites

• I have read the documentation

What theme are you using?

core

Is your feature request related to a problem? Please describe.

In my project, we define a variety of schemas in our backend API and dynamically fetch those from the frontend to display relevant forms. In some of these forms, we have object fields that we would like to be able to display horizontally instead of vertically. Take for example an array of HTTP headers:

{
  "type": "array",
  "items": {
    "type": "object",
    "properties": {
      "header" { "type": "string" },
      "value": { "type": "string" }
    }
  }
}

We would like to be able to display those side-by-side as below:

However, we have other object fields (the form itself being one example) for which we want to keep the default vertical layout.

Because schemas are defined on the backend, we can't easily provide a custom ObjectFieldTemplate for this field.

Describe the solution you'd like

We'd like to be able to provide multiple ObjectFieldTemplate implementations to our form (say VerticalObjectFieldTemplate and HorizontalObjectFieldTemplate) and have the ability to pick one from the ui schema. For example:

function MyForm() {
  const { schema, uiSchema } = useDynamicSchema()

  return <Form schema={schema} uiSchema={uiSchema} templates={{ ObjectFieldTemplate: {'vertical': VerticalObjectFieldTemplate, 'horizontal': HorizontalObjectFieldTemplate}} />

schema:

{
  "type": "object",
  "properties": {
    "headers": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "header" { "type": "string" },
          "value": { "type": "string" }
        }
      }
    }
  }
}

uiSchema:

{
  "headers": {
    "items": {
      "ui:ObjectFieldTemplate": "horizontal"
    }
  }
}

Describe alternatives you've considered

Our current solution is to do basically that, but by modifying the ui schema by replacing "ui:ObjectFieldTemplate": "horizontal" by its implementation in the frontend after fetching it from the backend. This works, but it's not exactly simple nor elegant.

We've also looked into custom widgets and fields, but the former is too low level and the latter appears too generic. With a custom field, we weren't able to get the object field's properties without digging around in the registry and form data in somewhat complex ways.

We've also considered the options of simply adding some arbitrary key to they ui schema and using that as a sort of additional prop to a custom ObjectFieldTemplate. It's simple enough, but it opens the door to all sorts of implicit contracts between backend and frontend that would be hard to track, maintain and debug.

We've also tried playing around with ui:classNames and ui:style, but between the various layers of Template, Field and Render components that don't always pass all props down to their children, this quickly ends up becoming confusing and finicky.

[nickgros]

@elevesque-nexapp this is very similar to #3695, which is being solved in #3881, and has a slightly different solution than you're suggesting. I'll post a comment in that PR referencing this issue and maybe we can settle on the right path forward.

[elevesque-nexapp]

Agreed, this issue is a duplicate. I've commented on #3881 that the solution proposed there is fine with me and aligns better with RJSF's current APIs. I'll close this to avoid diluting the discussion.