Vue 3 script setup Custom Input Renderer

General
1

Hello,

I am learning to use Vue JSON Forms in script setup, I have seen similar topics but still I haven’t figure out what went wrong. I am using different UI component library.

There is also an error r.tester is not a function. I think I may have missed out something. Thank you in advance.

Here is my current setup:

<template>
  <div>
    <Input
      @input="onChange"
      :id="control.id + '-input'"
      :disabled="!control.enabled"
    >
    </Input>
  </div>
</template>

<script setup lang="ts">
  import { isStringControl, rankWith, type ControlElement, type JsonFormsRendererRegistryEntry  } from '@jsonforms/core';
  import { rendererProps, useJsonFormsControl } from '@jsonforms/vue';
  import { Input } from '@progress/kendo-vue-inputs';

  const props = defineProps({
    ...rendererProps<ControlElement>(),
  })

  const { handleChange, control } = useJsonFormsControl(props);

  const onChange = (event: Event) => {
    handleChange(control.value.path, (event.target as HTMLInputElement).value);

    console.log("Updated control.data: ", control.value.data);
    console.log("Possible Errors: " + control.value.errors);
  };

  const entry: JsonFormsRendererRegistryEntry = {
    renderer: props.renderers,
    tester: rankWith(1, isStringControl),
  };
</script>

Schema:

export const schema = {
  properties: {
    name: {
      type: "string"
    },
  },
  required: ["name"]
};

export const uischema = {
  type: "VerticalLayout",
  elements: [
    {
      type: "HorizontalLayout",
      elements: [
        {
          type: "Control",
          scope: "#/properties/name",
          label: "Name"
        },
      ],
    },
  ],
};

JSON Forms:

<template>
    <TitleHeading title="Details" />

    <JsonForms
      :data="data"
      :renderers="Object.freeze(renderers)"
      :schema="schema"
      :uischema="uischema"
      @change="onChange"
      class="pt-15"
    />
</template>

<script setup lang="ts">
  import { JsonForms } from '@jsonforms/vue';
  import { vanillaRenderers } from '@jsonforms/vue-vanilla';
  import { schema, uischema } from '@/schemas/schemas';
  import { ref } from 'vue';
  import InputRenderer from './InputRenderer.vue';

  const renderers = [
    ...vanillaRenderers,
    InputRenderer,
  ];

  const data = ref({
    "name": '',
  });

  const onChange = () => {
    console.log("changed");
  }
</script>
2

Hi @ajagsantiago,

The renderers handed over to JSON Forms is an array consisting out of { renderer: <component>, tester: RankedTester} tuples. The tester specifies when the renderer shall be used.

See here for an example of such an entry. You need to make sure that your tester returns a higher priority than the default ones of JSON Forms, otherwise it will not be used.