The Render of Object's Description

{
  type: "object",
  oneOf: [
    {
      title: "Google",
      description:
        "Once registered, you should receive a Client ID and Client Secret. Add those in your application environment file",
      properties: { type: { const: "Google" } },
    },
    {
      title: "Github",
      description:
        "Let’s enable GitHub as a sign in option in our Auth.js configuration. You’ll have to import the GitHub provider from the package and pass it to the providers array we setup earlier in the Auth.js config file",
      properties: { type: { const: "Github" } },
    },
  ],
},

I have this schema. There is no UI Schema. It does not show Description fields. What should I do?

Hi @cihad

where do you expect this description to be shown?

The description of a oneOf schema is currently not considered by createCombinatorRenderInfos or the oneOf renderers.

Best regards,
Lucas

I want the description to appear under the Address tab. I also want to show a separate description for the User tab. And imagine I have 10 more tabs like this. A separate description for each one.

You can do this in react-jsonschema-form.

Hi @cihad ,
I see. With the current state of JSON Forms, you need to implement a custom renderer that extracts the description from the oneOf schemas.

For the react material renderers, you can use the MaterialOneOfRenderer as a starting point.

If you want to contribute this, we can also extend createCombinatorRenderInfos to include the description making it easier to use it in renderers :slight_smile:

Best regards,
Lucas

1 Like

Actually I expected ObjectRenderer to work since the type of each oneOf is object. But here createCombinatorRenderInfos generated VerticalLayout ui schema. The first expected behavior was to generate { type: "Control", scope: "#" } here.

When I manually entered { type: "Control", scope: "#" } into the uischema of JsonFormsDispatch manually, it fixed it.

Would you like me to open an issue on Github for this?

Well, let’s say there is a schema like this:

const schema = {
  type: "object",
  title: "Auth.js Configuration",
  properties: {
    providers: {
      type: "array",
      items: {
        oneOf: [
          {
            type: "object",
            properties: {
              type: { const: "Credentials" },
              authorizeFunction: { type: "string" }
            }
          },
          {
            type: "object",
            properties: {
              type: { const: "Google" },
            }
          },
          {
            type: "object",
            properties: {
              type: { const: "Github" },
            }
          },
        ]

      }
    }
  }
}

How can I format options with UI schema to authorizeFunction in this schema?

Answered here