Vue seed example nested json

General
1

I am new to the library and I try to learn how to implement JSONForms using the seed example for modelling. When I change the schema to contain a nested object I get “No applicable renderer found.”.

I read from the documentation (Renderer sets - JSON Forms) that objects may not yet be supported.

Is it correct that I can currently only use flat json schemas with the vue integration?

[original thread by glockenbach]

2

Hi @llundin(llundin), thanks for your interest in JSON Forms. Nested objects work perfectly fine, you’ll just need to adapt the scope of the controls in the given ui schema, e.g.

{
  type: 'object',
  properties: {
    personalData: {
      type: 'object',
      properties: {
        age: {
          type: 'integer',
        },
    },
    name: {
      type: 'string'
    },
}

{
  type: 'VerticalLayout',
  elements: [
    {
      type: 'Control',
      scope: '#/properties/name'
    },
    {
      type: 'Control',
      scope: '#/properties/personalData/properties/age'
    },
  ]
}

Of course you could also implement an object renderer yourself.

3

[glockenbach]

Thank you for your quick response!

Sorry I should have mentioned, I am trying to omit the uiSchema.
Using your example I can get it to work but is there a way I can do it without providing the layout?

4

Hi @llundin(llundin), only by providing an object renderer, which should not be too hard, or by generating the appropriate ui schema yourself. See https://spectrum.chat/jsonforms/general/get-full-generated-uischema-to-tweak-it~c24edb06-8be4-4cea-8e3d-dd83b07f9a2d for more information about the latter.

5

[glockenbach]

Thanks again for your quick reply!

I followed your advice and implemented a recursive schema generator. For documentation prupose I will pase it here:

const getNestedProperties = (base, obj) => {
  const result = [];
  for (const [key, value] of Object.entries(obj)) {
    const prefix = `${base}/properties/${key}`;
    if (value.hasOwnProperty("properties")) {
      const nested = getNestedProperties(prefix, value["properties"]);
      result.push(...nested);
    } else {
      result.push(prefix);
    }
  }
  return result;
};

const uischemaGen = {
  type: "HorizontalLayout",
  elements: [
    {
      type: "VerticalLayout",
      elements: getNestedProperties("#", schema.properties).map((path) => ({
        type: "Control",
        scope: path,
      })),
    },
  ],
};

I will leave this for now but maybe come back to it later.

I started to look at your next suggestion about the renderer. Did I understand correct, would it be possible to implement a generic renderer which takes any object and produce the same result as above? And possibly have some grouping around the nested properties?

6

Hi @llundin(llundin)

I started to look at your next suggestion about the renderer. Did I understand correct, would it be possible to implement a generic renderer which takes any object and produce the same result as above? And possibly have some grouping around the nested properties?

In principle yes, but you no longer need the recursive schema generator then. You can take a look at our existing Object renderers, for example the one for React Material. They simply use the already existing shallow ui schema generator, generate a layout for their properties and then dispatch back to JSON Forms. As this renderer will again be called for any nested objects, objects with arbitrary depth can be handled.