How to change the value of fields dynamically depending on another field

General
1

can we change the value of fields (example: set value true on multiple checkbox/radio buttons) dynamically in the same group depending on the checkbox value changes.
can we add custom rules or if there is any other solution please suggest (React using material renderer)

1 Like
2

Hi @suman_sb,

JSON Forms does not offer this functionality out of the box. You basically have three options:

  1. Write a custom renderer which not only changes its own data but also the data it affects
  2. Listen to data changes outside of JSON Forms and hand in modified data back to JSON Forms
  3. Customize AJV to modify the data as part of the validation process

Note that we also would like to add some kind of middleware to JSON Forms which would be similar to option 2 but in a “cleaner” way, i.e. with one less render step.

3

Hi @sdirix,

I have a similar use case (e.g. clear a dropdown value when the value of a dependant dropdown is changed), but in my case the schema is coming from a backend service and the frontend doesn’t know anything about the fields that are part of the form, so I cannot implement custom logic in the onChange or create custom renderers.

My only way to define this dependency is through the form schema. Do you have any idea how I can solve my issue?

4

Hi @veej,

Retrieving the actual values for an enum from a backend is a common use case, e.g. a drop down which shall select an employee out of all the employees of a company or an article from a catalogue.

My suggestion is to solve this via a custom extension of JSON Schema and a custom renderer. For example in JSON Schema you could model this as:

title: 'User',
type: 'string',
queryURL: 'my-url.com/api/v1/users'

Then your custom renderer just needs to check whether there is a queryURL in the JSON Schema and if yes, it takes over the rendering for that field. Via the queryURL it then knows how to interact with the backend to receive a list of elements to select from.

5

Hi there, just saw this post and thought I’d mention that I’ve created a tool that can be used in conjunction with JSONForms to implement the kind of dynamic logic the OP is looking for.

The tool is FigTree Evaluator and is intended for evaluating complex configuration expressions.

As a proof of concept, I whipped up a variant of the JSONForms React Seed app, but with some additional FigTree expressions in the schema and uischema to create some dynamic elements:

Demo: JSONForms with FigTree
Repo: Github

This is pretty crude, and I’m sure there’s better ways to integrate this, but just wanted to see if if could be done.

The demo has a Country selector, which is populated from an online API, and a City selector, also populated by online API, but the query depends on the country selected in the first element.

There’s also a few other form elements (and a custom “Text” component) demonstrating other functionality of FigTree (and JSON Forms)

6

@CarlosNZ This is super cool!

We wanted to add a “Community” page to the website for a while now. The idea is to highlight cool projects with JSON Forms from the community. I think this would be a good reason to finally do it. Would you be fine being added to such a page?

7

Yeah, sounds good to me. Look forward to seeing it :slight_smile:

1 Like
8

Hi @sdirix ,

I’ve followed the steps you suggested and get it working e.g. change the value of fields triggered by another field value. But I have an additional question: we store all schemas, UI schemas and validation rules in the backend and passed it to the frontend to drive the forms, by this way, we can avoid duplicated form model/validation code across backend & frontend.

However, from the discussion above, I feel it’s not possible to define the customer renderers in the backend - it has to be defined in the frontend, is it correct?

Actually, what I want to achieve is to avoid the duplicated code across frontend & backend. What’s the best way to utilise the power of jsonforms to achieve this goal?

Thanks

9

Hi @yyf,

Well, JSON Forms could be used in the backend, but it doesn’t really make sense outside of SSR use cases.

Being based on JSON Schema is the main pillar to enable shared logic on frontend and backend. If you also want to align additional rules on top, then you have in general two approaches available:

  • Single source these rules on the backend/cloud/service, e.g. each modified data is passed to the backend, processed, and then comes back, potentially modified, to the frontend. In this processing derived values are set. Or,
  • Align this process on both the backend and frontend side. For example by not implementing it as a custom renderer in the frontend but using a change-listener system, modifying the derived values outside of JSON Forms, and then handing them back to JSON Forms. So basically the same approach like the first one, but implemented on both frontend and backend separately.

You can have a look at the community page. There you will find a link where @CarlosNZ integrated an expression evaluator within JSON Schema to allow for logic like this. He even integrated this then into JSON Forms too.

1 Like