I'm new to json forms and I tried to integrate suggestions with the input field

General
1

I’m new to json forms on react and I tried to integrate suggestions with the input field but the fields are not getting populated can anyone guide me on that?

[original thread by Balaji-Suresh]

2

[Lily]

Hi @balaji-suresh do you have any example code of what you’ve tried?

3

[Balaji-Suresh]

Hi @lilyh
{
“type”: “HorizontalLayout”,
“elements”: [
{
“type”: “Control”,
“scope”: “#/properties/personalData/properties/height”
},
{
“type”: “Control”,
“scope”: “#/properties/nationality”
},
{
“type”: “Control”,
“scope”: “#/properties/occupation”,
“suggestion”: [
“Accountant”,
“Engineer”,
“Freelancer”,
“Journalism”,
“Physician”,
“Student”,
“Teacher”,
“Other”
]
}
This is my sample code and I want a suggestion option to be appeared on the occupation menu. Please help me to fix this

4

[Balaji-Suresh]

I need a suggestion on the input field when user enters the value such as Acc–> Accountant should be given as suggestion.

5

[Lily]

Hi @balaji-suresh sounds like you can build a custom renderer for this. There’s some explaination of what custom renderers are an example of one here.
https://jsonforms.io/docs/custom-renderers

You could write your own autocomplete component, or in the custom renderer you could use some package which provides this funcionality. I’ve used autocomplete-js before but there are many others you’ll find searching npm. react-autocomplete looks promising.

6

[Lily]

This is some fake code which hopefully gives you an idea of what this custom renderer could look like.

import Autocomplete from 'react-autocomplete'
const AutoCompleteCustomRenderer = ({ uischema }) => {
const [value, setValue] = useState(uischema.suggestion[0])
return <Autocomplete
  items={uischema.suggestion}
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>
}
7

Thanks @lilyh for the great answer! @balaji-suresh you can also check the JSON Forms React seed to see the custom renderer from the tutorial in action.

8

[Balaji-Suresh]

Hi @lilyh I tried to implement the custom renders but my project is built on JS not on TS so i’m unable to work on it. Can you please help on working of that suggestion array?

9

[Lily]

Hi @balaji-suresh any TS is valid JS if you remove type annotations.

10

[Balaji-Suresh]

Hi @lilyh
I tried to integrate with the sample code which you provided me and I’m facing Uncaught TypeError: r.tester is not a function
at JsonForms.js:186
at baseExtremum (_baseExtremum.js:20)
at Object.maxBy [as default] (maxBy.js:30)
at JsonFormsDispatchRenderer.ResolvedJsonFormsDispatchRenderer.render (JsonForms.js:185)

this issue. Please help me to solve this

11

This is a Javascript runtime error. It seems your provided tester is not a function: r.tester is not a function

12

[Balaji-Suresh]

Hi @sdirix I checked with that and the custom render link you have mentioned that we need to provide the
store.dispatch(Actions.registerRenderer( AutoCompleteCustomRenderer )); on index.tsx file but as I’m using js part can you help me where to call this method.

13

store.dispatch(Actions.registerRenderer( AutoCompleteCustomRenderer )); is valid Javascript so there is no problem regarding that. However registerRenderer expects two parameters, a renderer and a tester as you can see in the tutorial, the React seed and the FAQ.

14

[Balaji-Suresh]

Hi @sdirix
I tried with all posibilities but still I’m facing the error.

react-dom.development.js:23816 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of JsonFormsDispatchRenderer.
at createFiberFromTypeAndProps (react-dom.development.js:23816)
at createFiberFromElement (react-dom.development.js:23838)
at reconcileSingleElement (react-dom.development.js:14244)
at reconcileChildFibers (react-dom.development.js:14304)
at reconcileChildren (react-dom.development.js:16735)
at finishClassComponent (react-dom.development.js:17136)
at updateClassComponent (react-dom.development.js:17069)
at beginWork (react-dom.development.js:18535)
at HTMLUnknownElement.callCallback (react-dom.development.js:189)
at Object.invokeGuardedCallbackDev (react-dom.development.js:238)
at invokeGuardedCallback (react-dom.development.js:291)
at beginWork$1 (react-dom.development.js:23075)
at performUnitOfWork (react-dom.development.js:22042)
at workLoopSync (react-dom.development.js:22015)
at performSyncWorkOnRoot (react-dom.development.js:21633)
at react-dom.development.js:11147
at unstable_runWithPriority (scheduler.development.js:656)
at runWithPriority$1 (react-dom.development.js:11093)
at flushSyncCallbackQueueImpl (react-dom.development.js:11142)
at flushSyncCallbackQueue (react-dom.development.js:11130)
at scheduleUpdateOnFiber (react-dom.development.js:21076)
at Object.enqueueSetState (react-dom.development.js:12692)
at

15

[Balaji-Suresh]

Please help me to solve this

16

[Lily]

Hey @balaji-suresh do you have a github / other repository you can share so we can see the code that’s causing this issue?

17

[Balaji-Suresh]

import Autocomplete from ‘react-autocomplete’;
import { rankWith, scopeEndsWith } from ‘@jsonforms/core’;
import {JsonForms,JsonFormsDispatch,JsonFormsReduxContext} from ‘@jsonforms/react’;
import {materialCells,materialRenderers} from ‘@jsonforms/material-renderers’;

18

[Balaji-Suresh]

<JsonForms
schema={schema}
uischema={uischema}
data={data}
renderers={[
…materialRenderers,
//register custom renderer
{ tester: rankWith(3,scopeEndsWith(‘name’)), renderer: this.AutoCompleteCustomRenderer({uischema}) }
]}
cells={materialCells}
/>

AutoCompleteCustomRenderer = ({ uischema }) => {
// let value = uischema.elements[0].elements[0].suggestion;
// console.log(“value is printed:”,value);
return (
<Autocomplete
items={uischema.elements[0].elements[0].suggestion}
shouldItemRender={(item, value) => item.label.toLowerCase().indexOf(value.toLowerCase()) > -1}
getItemValue={item => item.label}
renderItem={(item, highlighted) =>

{item.label} } value={this.state.value} onChange={e => this.setState({ value: e.target.value })} onSelect={value => this.setState({ value })} /> ) }
19

[Balaji-Suresh]

this is my code with schema and uischema values as person example values

20

[Balaji-Suresh]

@lilyh the code which you provided was not with getitemvalue and renderitem so i tried to add those up with the code but it threw is error