How to display sort buttons for deeply nested arrays in oneOf combinator using JSON Forms React?

General
1

I’m working with the JSONForms in React with material-renderers and I’ve encountered a problem with displaying sort buttons for deeply nested arrays in combinators. My schema includes a oneOf combinator, which itself is nested in an array. Some of the components in the oneOf combinator have arrays that I want to be able to sort.

Here’s a simplified example of my schema:

{
  type: "object",
  properties: {
    items: {
      type: "array",
      items: {
        type: "object",
        oneOf: [
          {
            type: "object",
            properties: {
              text: { type: "string" },
              nestedArray: {
                type: "array",
                items: {
                  type: "object",
                  properties: {
                    text: { type: "string" },
                  },
                  required: ["text"],
                },
              },
            },
            required: ["text", "nestedArray"],
          },
          {
            type: "object",
            properties: {
              title: { type: "string" },
            },
            required: ["title"],
          },
        ],
      },
    },
  },
}

Example uiSchema. Sorting works this way for the top level array.

const uiSchemaTest = {
  type: "VerticalLayout",
  elements: [
    {
      type: "Control",
      scope: "#/properties/items",
      options: {
        elementLabelProp: "text",
        showSortButtons: true,
      },
    },
  ],
};

I’ve tried to configure the UI schema to display the sort buttons for the deeply nested objects in the arrays, but I’m unable to get the sort buttons to show up consistently. I have tried adding deeply nested uiSchemas in uiSchema details, but this lead the form to be partly broken. Is there a way to globally enable the showSortButtons?

2

Hi @max12 ,

Is there a way to globally enable the showSortButtons?

You can pass global configuration properties via JsonForms’s config option into the <JsonForms> root element. This config options are passed to every renderer. If the used renderer supports the showSortButtons option, it should show them. Maybe this already solves your problem :slight_smile:

const config = { showSortButtons: true };
...
<JsonForms
  ...
  config={config}
/>

For more info see: React Integration - JSON Forms

Best regards,
Lucas

3

Thanks! That config did it.