Access other fields value(data) in custom renderer

Hi everyone, I have a form with a few dependent fields. I mean one field may change its behavior if the value of another field is equal to a special value. I need to access the value of other fields inside custom renderer. is it possible? how?

[original thread by farshad-abb]

Hi @farshad-abb(farshad-abb), you can access other fields in one of two ways:

  • Use the useJsonForms hook which gives you access to the full JSON Forms context. Note that of course the regular context rules of React apply. So you should not change any data value directly here.
 import { useJsonForms } from '@jsonforms/react';
 ... 
 const ctx = useJsonForms();
 const wholeDataObject = ctx.core.data;
  • Write your own version of the withJsonFormsControlProps HOC. In that HOC we determine the props for the renderer component by looking at the dispatched props and the JSON Forms context. You can just write an own one instead of using the one provided by JSON Forms. In there you can add any additional prop you like, i.e. also a prop pointing at the data you’re interested in.

[farshad-abb]

@sdirix(sdirix) Thanks Stefan, it helped. I wish I could find these this information in documentation.

Feel free to contribute :wink:

Hi sdirix, I need the exact same (access data of other form fields in a particular renderer) and I am using Vue. However I cannot find the useJsonForms hook in the Vue set of hooks. Is there another way of doing this? Thanks!

Hi @jdwit,

in Vue you can inject the jsonforms object containing the same state as returned by the useJsonForms() hook in React.