'No applicable renderer found' error when auto generating uischema for schema with nested object (vue)

General
1

Hi,

I am trying to use the automatically generated uischema through only the schema.
Using some simple schema as an example below, the input field for ‘name’ can be rendered, but below that the long description object just shows ‘No applicable renderer found.’

schema= {
  'properties': {
    'name': {
      'type': "string",
      'minLength': 1,
      'description': "The task's name"
    },
    'description': {
      'title': "Long Description",
      'type': "object",
      'required':[
        "leader",
        "estimated_price",
        "status"
      ],
      "properties":{
        "leader":{
          "type":"string"
        },
        "estimated_price":{
          "type":"number"
        },
        "status":{
          "type":"boolean"
        }
      }
    }
  }
}

I am just copying the vue2 seed example on how they declare renderer in my example:
(jsonforms-vue-seed/src/App.vue at vue2 · eclipsesource/jsonforms-vue-seed · GitHub)

const renderers = [
  ...vanillaRenderers
  // here you can add custom renderers
];
//under data()
renderers: Object.freeze(renderers)

Am I doing something wrong? Should I be using a custom renderer? I know I can probably build a uischema manually to create the form properly, but I want to avoid that if possible

2

Hi @hugokhf,

the problem is that we don’t offer an object renderer at the moment, see also here. The ui schema generator just generates a Control for each property including description. The rendering then “fails” as there is no renderer handling the type: "object" schema.

To solve this you can implement your own object renderer which should be rather straightforward. You can basically copy the GroupRenderer, connect it with the useJsonFormsControlWithDetail composition (therefore also use control instead of layout to refer to the computed props) and use findUiSchema to find or generate the sub ui schema, like in the React Material object renderer.

Edit: We now also offer an object renderer, see here.

1 Like
3

thanks a lot for the reply.

so since renderer do not support object, if I don’t create a custom one, but instead specify the uischema dynamically (i.e. parsing and storing properties found in schema manually, then create a function to push each properties as the ‘scope’ into the elements array within uischema)
I assume that will also do the job the same? Is that correct?

Thanks in advance

4

Yes absolutely. As a starting point you can copy the generator code from JSON Forms and adapt it to your needs.

5

did someone meanwhile implement such a generic object reanderer?

6

Hi @bwl21, not yet for the Vanilla renderer set, however the @jsonforms/vue2-vuetify has such a renderer.

7

@sdirix thank you very much for the hint. Can I use this with with vue3 as well. I started my project with the jsonforms-vue-seed.

8

Sadly no. Vuetify for Vue 3 is a complete rewrite and not compatible to Vue 2. So we probably need a complete new renderer set, i.e. @jsonforms/vue3-vuetify or @jsonforms/vue-vuetify for this.

9

Hello,

I’m new with VUE3 and jsonForms so a simple question:

is there any example or tutorial out there how to implement a own control renderer in due-vanilla (VUE3)?

I’m lost,
svnt

10

Hi @svnt,

Please create a new question instead of adding to an existing one.

There is no difference between custom renderers and the off-the-shelf renderers. So feel free to look through the code base. You might want to copy an existing one and modify it to your liking to get going (e.g. a password-string renderer). There is also a more detailed guide as part of the Vue readme, see here.

1 Like
11

Old issue, but I had the same problem and did what @sdirix said, here is the result (typescript):

<template>
  <fieldset v-if="control.visible">
    <legend v-if="control.label">
      {{ control.label }}
    </legend>
    <dispatch-renderer
      :schema="control.schema"
      :uischema="generateUISchema(control)"
      :path="control.path"
      :enabled="control.enabled"
      :renderers="control.renderers"
      :cells="control.cells"
    />
  </fieldset>
</template>

<script lang="ts">
import {
  JsonFormsRendererRegistryEntry,
  ControlWithDetailProps,
  ControlElement,
  rankWith,
  isObjectControl,
  findUISchema,
} from '@jsonforms/core';
import { defineComponent, shallowRef } from 'vue';
import {
  DispatchRenderer,
  rendererProps,
  RendererProps,
  useJsonFormsControlWithDetail,
} from '@jsonforms/vue';

const layoutRenderer = defineComponent({
  name: 'object-renderer',
  components: {
    DispatchRenderer,
  },
  props: {
    ...rendererProps<ControlElement>(),
  },
  methods: {
    generateUISchema(control: ControlWithDetailProps) {
      control.uischemas = control.uischemas ? control.uischemas : [];

      return findUISchema(
        control.uischemas,
        control.schema,
        control.uischema.scope,
        control.path,
        'Group',
        control.uischema,
        control.rootSchema
      );
    },
  },
  setup(props: RendererProps<ControlElement>) {
    return useJsonFormsControlWithDetail(props);
  },
});

export default layoutRenderer;

export const entry: JsonFormsRendererRegistryEntry = {
  renderer: shallowRef(layoutRenderer),
  tester: rankWith(1, isObjectControl),
};
</script>
1 Like
12

Starting with 3.1.1-alpha.0 we have an object renderer available for Vue 3 thanks to a community contribution.

1 Like