Best Way to Preload of Dynamically Update Control Data from API

Hello, I’m new to JSON forms and wondering if it will work for my use cases.

  1. DYNAMICALLY LOAD CONTROL SCOPE DATA FROM API CALL MADE ON PAGE LOAD
    I have a form that at the very beginning needs to load a list of offices retrieved from an API endpoint. Is it possible to dynamically update the control source data once the API returns from the request sent as soon as the page loads?

  2. INITIATE NEW API CALLS ONCE A FIELD OR GROUP OF FIELDS ARE FILLED
    Once more of the form is completed I will have the data I need to send an API call using that data to load the dropdown options for another control on that same form. I see I can listen to the onChange event for the form, can that be used to capture when certain fields contain valid data (but before submission) and also use that data and initiate an API call?

  3. DYNAMICALLY PREFILL LATER FORM CONTROLS ONCE LATER API CALL RETURNS
    Given that #2 above succeeds can I use the data from that API call to update the control dropdown options or populate textfield inputs?

Hi @christopher.solera,

In general you can update any prop you hand over to JSON Forms and the form will react accordingly. So it’s no problem to exchange the schema or fill in some data once you received the information. Just make sure to not just modify the existing props, you actually need to hand over new instances of them.

Is it possible to dynamically update the control source data once the API returns from the request sent as soon as the page loads?

Yes, just hand over a new data instance to JSON Forms once you received the response.

I see I can listen to the onChange event for the form, can that be used to capture when certain fields contain valid data (but before submission) and also use that data and initiate an API call?

Yes, you can listen to the data and validation (i.e. errors) changes and react accordingly

Given that #2 above succeeds can I use the data from that API call to update the control dropdown options or populate textfield inputs?

Yes you can simply hand over a new schema and/or data prop and the form will react accordingly.

Note that many users also implement a custom control for their enums. So instead of exchanging the schema to add the new enum entries they request and populate their custom enum renderer once the user interacts with it. This is especially useful when there are many enums to choose from when it doesn’t really make sense to exchange the schema all the time.

1 Like