how to use REST Api in UI designer to automatically populate form and save to DB

Q&A
1

How can i use a REST API on the UI designer form? I have written a REST service and i want to use the data on the REST service in my UI designer form to automatically populate information in the input widget and send to the Database.

How can this be done?

2

In Bonita UI Designer you can declare variables (actually they are JavaScript variables). You have several options to initialize them but one of them if to use the result of a REST API call (API need to returns data in JSON).

You can refer to the documentation for more details: https://documentation.bonitasoft.com/bonita/7.8/variables

3

I wrote this javascript to populate the data from a REST api onto the form.
The javascript looks like this (Its still the same bos file i used though)

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var jsonVar=xmlhttp.responseText;
obj = JSON && JSON.parse(jsonVar) || $.parseJSON(jsonVar);

var fullname = obj.name;
var perdiem = obj.perdiem;
var supervisorname = obj.supervisorname;
var supervisoremail = obj.supervisoremail;

$data.formInput.travelRequestInput.fullname = fullname;
$data.formInput.travelRequestInput.perdiem = perdiem;
$data.formInput.travelRequestInput.supervisorName = supervisorname;
$data.formInput.travelRequestInput.supervisorEmail = supervisoremail;
}

}
xmlhttp.open(“GET”,“http://localhost:3000/users/1”,true);
xmlhttp.send();

As u can see its supposed to use the same javascript to populate the form so the user would just select few details and add few as well and send to the database.

4

You don’t need to write JavaScript to perform a GET request on a REST API. Just define a form variable as follow in order to perform the request and store the result in a form variable:

form variable initialize using a REST API call

Also, when you call http://localhost:3000/users/1 you understand that this URL is not managed by Bonita (I assume it’s your own user information system).