Use default uischema and only apply rule to one field

General
1

I do not have a ui schema and only pass a jsonschema (<JsonForms schema={jsonschema}). Now the form renders as I would expect. However, in one array property, I have an object that has an “id” property which I need for update cases but I don’t want to render it.

I naively though I can just add the one rule to the ui schema like so:

const uiSchema = { 
        "type": "VerticalLayout",
        "elements": [
            {"scope": "#/definitions/Address/properties/id", "type": "Control", "rule": {effect: "HIDE", condition: {}}}
        ]
    }

Turns out that specifying one thing in the uischema needs me to specify everything in the uischema. My JSON schema is quite big and I do not want to mention every property explicitly. Is there a way I can get the somehow internally default generated uischema and overwrite/extend the uischema from there?

Thank you a lot
Christian

EDIT:
I have found the function import { generateDefaultUISchema } from '@jsonforms/core'. However the function only returns:

{
    "type": "VerticalLayout",
    "elements": [
        {
            "type": "Control",
            "scope": "#/properties/BusinessPartner"
        }
    ]
}

looks like I cant use that one as a basis to only exclude one field of a nested array object list. Any other ideas?

1 Like
2

Hi @KIC,
unfortunately, you use case is not supported out of the box. You could try generating relevant parts of the UI Schema by using the prefix parameter of the generateDefaultUISchema to generated sub ui schemas and then compose your UI Schema from that. This way, you don’t need to write the whole UI Schema.

3

Hmmm … thank you for your response. I am just not sure how this helps me I have tried to use the prefix on all objects and properties but it looks nothing like I would expect to construct a uischema similar to the one that is rendered on the screen without passing one.

4

Was about to submit a similar post, I’ll contribute here instead.

I think I have a good start to composing sub-UI schemas but would like some feedback. For my case I am basing this off of vuetify CategorizationRenderer

My root UISchema has a custom layout for the top level but leaves children to be dynamically rendered

{
    "type": "Categorization",
    "elements": [
        {
            "type": "Category",
            "label": "datasetConfigs",
            "elements": [
                {
                    "type": "Control",
                    "scope": "#/properties/datasetConfigs"
                }
            ]
        },
        {
            "type": "Category",
            "label": "fileConfigs",
            "elements": [
                {
                    "type": "Control",
                    "scope": "#/properties/fileConfigs"
                }
            ]
        },
    ]
}

So the code I use looks like this

    uiSubSchemas(): (UISchemaElement)[] {
      return (this.layout.uischema as Categorization).elements.map((e) => {
        if (e.type === 'Category') {
          const prefix = (e.elements[0] as unknown as ControlElement).scope
          return Generate.uiSchema(this.layout.schema, 'VerticalLayout', prefix)
        }
        return Generate.uiSchema(this.layout.schema)
      }
      )
    },

which looks ugly and very tightly coupled with the UI schema. Is there a better way to identify prefixes/build sub-UISchemas?

5

Hi @KIC and @andperks,

Note that we have also the uischemas registry feature. Similar like the renderer set you can hand over a registry of UI Schemas to use to JSON Forms. Whenever a detail UI Schema is needed (mostly in object and array renderers) this UI Schema registry is queried.

Using this registry you only need to specify a (shallow) UI Schema for the specific object for which you don’t want to use the default UI Schema.