Compute or calculate a textbox value based on other control data

General
1

Hi,

Have 4 controls - 3 textbox , 1 dropdown.
The 4th textbox control is to get the value calculated from the three other controls.

If textbox1 value = 2000, dropdown = Accepted, textbox2 value = 20
then Textbox4 should be populated on the fly as 2020.

If textbox1 value = 2000, dropdown = Dispose, textbox2 value = 0
then Textbox4 should be populated on the fly as 0.

Is there a simple way of achieving this.

This use case is pretty common.

If a custom renderer is needed , can you share code pls

Any pointers are of much help. Thanks

Aneena

2

Hi @ANNIE,

You basically have two options for achieving this behavior:

  • Implement custom controls for these fields which not only set their own value but also the value of all dependent fields
  • Listen to data changes outside of JSON Forms, modify the data on change and hand over the modified data back to JSON Forms (within a new object to trigger rerendering)

For an example for a custom renderer please you can check our React seed and tutorial. The second approach should be straightforward, for updating the data I can recommend lodash’s fp/set as this will modify the data where necessary without cloning the whole object.

3

Thank you…In progress of implementation.