Creating Dynamic UISchema with JsonFormsUISchemaRegistryEntry

General
1

Hi!
I am trying to create dynamic UISchema with uischema registry entry on Angular, but the JsonFormsUISchemaRegistryEntry array I wrote has a problem with rendering, meaning when I try to run the app I see “No applicable renderer found!”
My schema is like this:

{
    "definitions": {
        "student": {
            "type": "object",
            "properties": {
                "name": {
                    "type": "string"
                },
                "age": {
                    "type": "string"
                },
                "gender": {
                    "type": "string"
                }
            }
        },
        "building": {
            "type": "object",
            "properties": {
                "age": {"type": "string"},
                "color": {"type": "string"}
            }
        }
    },
     "type": "object",
     "properties": {
        "school": {
            "type": "object",
            "properties": {
                "name": {
                    "type": "string"
                },
                "students": {
                    "type": "array",
                    "items": {
                        "$ref": "#/definitions/student"
                    }
                },
                "building": {
                    "$ref": "#/definitions/building"
                }
            }
        }
     }
}

And my UISchemaRegistry array is like this:


  uischemaRegistry: JsonFormsUISchemaRegistryEntry[] = [
    {
      tester: (schema, schemaPath, path) => {
        if (schemaPath === "#/definitions/student")
        return 1;
      },
      uischema: {
        type: 'Control',
          options: {
            scope: "#/definitions/student",
            elements: {
              name: {
                type: 'Control',
                options: {
                  scope: "#/definitions/student/properties/name",
                  label: 'Name'
                }
              },
              age: {
                type: 'Control',
                options: {
                  scope: "#/definitions/student/properties/age",
                  label: 'Age'
                }
              },
              gender: {
                type: 'Control',
                options: {
                  scope: "#/definitions/student/properties/gender",
                  label: 'Gender'
                }
              }
            }
          }
      },
    },
    {
      tester: (schema, schemaPath, path) => {
        if (schemaPath === "#/definitions/building")
        return 1;
      },
      uischema: {
        type: 'Control',
          options: {
            scope: "#/definitions/building",
            elements: {
              name: {
                type: 'Control',
                options: {
                  scope: "#/definitions/building/properties/age",
                  label: 'Age'
                }
              },
              age: {
                type: 'Control',
                options: {
                  scope: "#/definitions/building/properties/color",
                  label: 'Color'
                }
              }
            }
          }
      },
    },
    {
      tester: (schema, schemaPath, path) => {
        if (schemaPath === "#/properties/school")
        return 1;
      },
      uischema: {
        type: 'Group',
          options: {
            scope: "#/properties/school",
            label: "School",
            elements: {
              students: {
                type: 'ListWithDetail',
                options: {
                  label: "Student",
                  scope: "#/properties/school/properties/students"
                }
              },
              building: {
                type: 'Group',
                options: {
                  scope: "#/definitions/building",
                  label: 'Building Info'
                }
              }
            }
          }
      },
    }
  ];

Is there a problem with my uiSchemaRegistry? Sorry if the question is obviously solveable, but I could not find a documentary on how to use uiSchemaRegistry. I hope that someone can help me :slight_smile:
Thank you in advance.

2

Hi @discomel,

There are two issues which I see here:

  • The testers should always return a number. In cases where they are not applicable, they should return -1.
  • The uischemas in the uischemaRegistry are invalid. They don’t confirm to our format and therefore behave not as intended.

Some of the errors are:

  • Controls need to define their scope next to their type, not in the options
  • labels are also defined next to their type, not in the options
  • elements is an array, not an object
  • detailed ui schemas for object/array controls are defined in options.detail, not directly in the options themselves

I would like to suggest taking a look at our examples and docs to see how the UI Schema format looks like.