JSONForms Vue Basic String Custom Renderer

Question

So I'm starting out with Vue JSONForms and I'm trying to create a bare-bones custom text renderer. I know there JSONForms has the vue-vanilla package, but I want to understand what are the basics needed for a custom renderer because later on I will need to do much more customization to each custom renderer I create. Here is what I have so far:

<template>
    <v-input />
</template>

<script lang="ts">
import { ControlElement, JsonFormsRendererRegistryEntry, rankWith, isStringControl } from '@jsonforms/core'
import { useJsonFormsControl, RendererProps } from '@jsonforms/vue'
import { defineComponent } from 'vue'

const renderersText = defineComponent({
    name: 'renderers-text',
    setup (props: RendererProps<ControlElement>) {
        return useJsonFormsControl(props)
    },
})

export default renderersText

export const entry: JsonFormsRendererRegistryEntry = {
    renderer: renderersText,
    tester: rankWith(1, isStringControl),
}
</script>

But I'm getting a r.tester is not a function error. Any idea what this means and/or what I need to fix? Thanks in advance!

I cannot suggest edits so I'm going to add some supplementary information here before I bounty the question. The relevant documentation for creating custom renderers is here (including a basic example): https://github.com/eclipsesource/jsonforms/blob/master/packages/vue/vue/README.md . An example of a working vanilla renderer (there are many others in that folder): https://github.com/eclipsesource/jsonforms/blob/master/packages/vue/vue-vanilla/src/controls/StringControlRenderer.vue . — 5uperdan, Apr 14 '23 at 12:27

score 3 · Accepted Answer · answered Apr 17 '23 at 09:07

In the jsonforms vue template, renderers are added like so

const renderers = Object.freeze([
    ...vanillaRenderers,
    // here you can add custom renderers
])

The vanillaRenderers collection (typed as any[]) is actually a collection of JsonFormsRendererRegistryEntry objects. The error r.tester is not a function occurs if you add a renderer object to the collection, e.g.

const renderers = Object.freeze([
    ...vanillaRenderers,
    renderersText,
])

Instead make sure to add a JsonFormsRendererRegistryEntry object, which you can define in full

const renderers = [
  ...vanillaRenderers,
  {
    tester: rankWith(
      1,
      isStringControl,
    ),
    renderer: renderersText,
  }
];

Apologies for late answer. This is correct. However, if you want to keep the tester inside the renderer file like I have in my example, you can do the following import: `import { entry as renderersText } from './path/to/renderer.vue'` — Adam Silva, Apr 19 '23 at 10:19

JSONForms Vue Basic String Custom Renderer

1 Answers1