How to Dynamically Load Form Fields Based on External API Response in Bonita UI Designer?

Q&A
1

Hello

I am building a process in Bonita BPM where a form needs to display fields based on data returned from an external REST API (for eg; loading specific input fields when a user selects a category). :innocent:

While I am able to fetch the external data using a REST connector / Data variable; I am struggling to dynamically add / remove form widgets in the UI Designer based on the API response especially when the response structure isn’t fixed. :thinking:

I have tried using a Container with a Repeat widget & binding it to a Data variable but the form doesn’t refresh as expected when the data changes at runtime. :innocent:Also; I am not sure how to trigger the refresh at the right time (e.g., after a dropdown selection)/ how to handle complex nested field structures returned by the API. :innocent:

I have seen similar behavior in Angular apps; so I am wondering if I need to manually manage the form state with some custom JavaScript. :thinking: Checked UI Designer overview | Bonita Documentation guide for reference. This came up while building a project that explains what is DAX in Power BI and needs dynamic form behavior.

Is there a best practice in Bonita for handling dynamic form generation based on runtime data? :thinking:Should this be done entirely in UI Designer / is it better to offload some logic to the backend or use a Groovy script to pre-process the response? :thinking:

Any advice or working examples would be greatly appreciated!

Thank you !! :slightly_smiling_face:

2

I’m presuming the external source sends back something JSON-formatted? You’d probably have to have one variable to store that, and another JavaScript variable to parse and refactor the result JSON into something easier to use with a repeating container (JSON.Parse the raw input and go from there).

To trigger a refresh at the right time, have that same JavaScript variable read the data whose change should trigger the refresh, even if it does nothing with it.

3

Hello,

Why not simply add a condition on the widget to diplay it or not based on the data returned in the REST API response?

This is not form generation, it is conditional form field display. Would that fit your need?