Access other fields value(data) in custom renderer

General
1

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]

Access peers properties of customRender
2

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.
3

[farshad-abb]

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

4

Feel free to contribute :wink:

5

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!

6

Hi @jdwit,

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

7

Hi @sdirix ,
I am also using JsonForms in my Vue/Nuxt project. I acutally don’t know where to get the jsonforms object from. I found an interface named JsonFormsState which contains such an object you described above. Is this the interface I should go for? And how should I inject it to my app?
Best Regards

8

Hi @felixholfelder,

See this Vue guide for provide/inject. This is example code where we use it within our bindings.

9

It worked thank’s a lot :slight_smile:

10

Hi! Great support! I tried your vue guide for injection. I can access the error array, both when injecting your “jsonforms” provide, even my own provide of a customn ajv instance. In both cases, I cannot manage to make errors “responsive” in vue. I read in another thread that others had problems with responsivity in vue and the AJV instance?

11

@Langhaus although you can access the jsonforms state, it’s not meant to be directly manipulated. If you want to modify the errors on the fly, you should use a middleware.