JSON Forms as a standalone component with Vanilla renderers

#1

Hi guys!

I’m trying to use JSON Forms as a standalone component but with Vanilla renderers instead of Material.
I used this page as a basis: Create a JSON Forms App | JSON Forms.
I replaced import { materialRenderers } from ‘@jsonforms/material-renderers’; with import { vanillaRenderers, vanillaCells} from ‘@jsonforms/vanilla-renderers’; and used it in the template.
The problem is that i get some warnings No applicable cell found. and nothing renders.
Are the vanilla rendered usable only with Redux or am i doing something wrong?

[original thread by urucualex]

#2

Thanks for your interest in JSON Forms. We did not yet release the support for setting cell renderers via the standalone component, however it’s already part of the next stream. So you should be able to set and use the vanilla renderers (including cells) by installing the @next version of the packages, e.g. @jsonforms/core@next or @jsonforms/core@2.3.2-alpha.0 and configuring the cells via

<JsonForms
  schema=... // uischema, data, renderers
  cells={vanillaCells}/>

Please let me know if that solved your problem :wink:

#3

[Ivan Saveliev]

I’m a bit confused. I have the same warnings ‘No applicable cell found’ and form doesn’t render. However I didn’t not provide cells via props in both cases for material renderers and for vanilla ones. I’m using the person schema from examples.

All warnings are coming from InputControl renderer from Vanilla. To be more specific this piece of code: jsonforms/InputControl.tsx at master · eclipsesource/jsonforms · GitHub

And this is source of my confusion. Because cells doesn’t seem to be a required as per interface for Controls, but it deliberately checks if there are none to return - null. Also I do not see such cell checks in MaterialInputControl - jsonforms/MaterialInputControl.tsx at master · eclipsesource/jsonforms · GitHub

export interface StatePropsOfControl extends StatePropsOfScopedRenderer {
  cells?: { tester: RankedTester; cell: any }[];

  /**
   * The label for the rendered element.
   */
  label: string | Labels;

  /**
   * Description of input cell
   */
  description?: string;

  /**
   * Whether the rendered data is required.
   */
  required?: boolean;

  // TODO: renderers?
}

Or I have a wrong perception of how this works?

#4

[urucualex]

@sdirix Thank you! Your solution solved my problem.

@ivansvlv
In the current released version of JSONForms (2.3.1) you can use the Vanilla renderers only with the Redux Integration (https://jsonforms.io/docs/react). You need to install version 2.3.2-alpha.0 (or @next, ex npm i @jsonforms/core@next --save) to use them in the “standalone component”.

#5

[Ivan Saveliev]

@urucualex Ooh, got it. Thanks :+1:

#6

@urucualex Thanks for answering!