How to re-order anyOf items with ui-schema?

[perelin]

Prerequisites

• I have read the documentation

What theme are you using?

core

What is your question?

I have an anyOf array that is used to render a dropdown list. Now I want to change the order of the list elements with ui.schema (we cant change the actual json-schema files, they come from somewhere else). How can I do this?

Example:

{
  "anyOf": [
    {
      "const": "OPTION1",
      "title": "op1"
    },
    {
      "const": "OPTION2",
      "title": "op2"
    },
    {
      "const": "OPTION3",
      "title": "op3"
    }
  ],
  "type": "string"
}

How can I reorder them to eg [op3, op1, op2]?

Thanks!

[heath-freenome]

@perelin There is currently no way to do it with uiSchema. You can, however, do it with either a custom widget or custom field, depending on how many fields you are dealing with.

[perelin]

Thanks for the reply @heath-freenome! We are using rjsf as it is provided by https://retool.com. Custom components would defeat the purpose of using a tool like retool. We might just do some processing on the schema file itself.

[heath-freenome]

@perelin Ah I see. I've used retool in the past. So, yeah, it sounds like that is the best approach. Please close the issue if you feel like you have your answer

[TheOneTheOnlyJJ]

You could generate your UiSchema at runtime and order it at definition time.
To get an idea of how you could do it:

export const ORDERED_JSON_SCHEMA: JSONSchemaType<OrderedJSONSchema> = {
  // Sort by keys to ensure the order is the same even if definitions change around
  anyOf: Object.keys(ORDERED_JSON_SCHEMA_SUBTYPES)
    .sort()
    .reduce<OrderedJSONSchema<OrderedJSONSchema>[]>(
      (accumulator: JSONSchemaType<OrderedJSONSchema>[], currentValue: string) => {
        accumulator.push(ORDERED_JSON_SCHEMA_SUBTYPES[currentValue as keyof typeof ORDERED_JSON_SCHEMA_SUBTYPES]);
        return accumulator;
      },
      []
    )
} as const;

You would need to declare your anyOf options in a separate object with the keys that you want to order the options by.