¿How i capture the onchange event of the select field in a form of HumanTask ?

Q&A
1

Hi ,

i want to capture the onchange event of select field and then call the connector in order to do a mysql query , and then update some fields

Regards

2

You capture the onchange event with JavaScript see here

You have to do an Ajax call to do the mySQL call as you cannot call a connector from the form in community (nor in 7 at all anymore without using JavaScript).

To learn about how to do this read this article and do it. It’s how I learnt to do it, exactly this way, and it works.

So what you do is:

Enable the onchange event
when fired in the function
read mysql
return results
update fields using document.getElementById(“demo”).innerHTML = “Paragraph changed!”;

regards

3

Yes and No,

You have to architect your solution. Not everything can be done in Bonitasoft as you have found. Your PHP pages are an example of this.

Before doing anything else though, please DO the Servlet exercise. It will be the driving module to your Ajax call.

You will notice at 5.6 Validate the deployment, you test the code with a call to the code from a browser, this is what AJAX does call a “browser” and gets the message back. You can then use this data in your JavaScript.

I know you are using 6.5 so this is what I would do.

Part 1: the form and JavaScript for onchange

Create a new diagram
Add a Form
Add an HTML widget for Select Drop Down List (eSDDL)
Add an HTML widget for Text Result (eTR)
Add an HTML Widget for JavaScript code (eJSc)

They must be in this order, well, the script in this case must be last.

The data for eSDDL is:

Volvo Saab Mercedes Audi

The code for eJSc is as follows:


Part 2 will follow, once you have worked the above, AND you have worked the Servlet example because will use that in due course.

regards

4

Hi ,

is it possible write javascript and ajax code into bonita?

i thought , that only is possible execute Groovy script.

I’m accessing to the link of how i do this, and i see only :

  • How i create a servlet
  • How i create data access object

and so on…

Can you say me , where is exactly this ?

Thanks.

5

And…

NOTE: in the above Eclipse can run OR Studio can run but not at the same time…

Part 2…Finalize the Ajax Calls, here I am using Studio.

2.0 Close Eclipse and Studio Completely

2.1 Copy the WAR file to yourBonitaRoot\workspace\tomcat\webapps folder

2.2 Open Studio which will build your WAR into the paths of Tomcat. If you want to verify this go to the webapps folder and you will find a new folder called com.vogella.web.filecounter

2.3 In studio do Server → Open Portal

2.4 In the newly opened browser change the URL to

http://localhost:8080/com.vogella.web.filecounter/FileCounter

and hit enter, this proves that the Servlet is now within the Bonitasoft Tomcat scope.

2.5 Open the diagram we created in Part 1 and open the form. Add an iFrame (add a new column and add it to row 1) and add the URL as data, Run the process. Viola - it works…wait 6 seconds and press F5 (refresh) and you will see the counter go up.

So we have now proved our system can show data from the servlet.

Only one thing to do now, change the Select DDL onchange to execute the AJAX call to get the data back and display it in our widget.

But rather than change things we’ll add to our existing page.

3.1 Add a New Line at the top of the page

3.2 Copy and paste the eSDDL HTMLWidget into the new line

3.3 Rename it to aSDDL

3.4 Change the Data (code) to:

Volvo Saab Mercedes Audi

3.5 Change the Data in the eJSc HTMLWidget to (delete the previous code):


and RUN the process.

Fin.

All being well Changing the second DDL will give you the name of the manufacturer, changing the first DDL will give you an incrementing piece of text.

OK. This does NOT give you access to a database.

Nope - I’ve given you all the tools you need to do what you need to do. Here are the steps you should now consider:

  1. Draw your form
  2. Write your servlet to access Database and return the data you want, you can add parameters to your HTML call and pick those up in the servlet, to select specific data

xhttp.open(“GET”, “demo_get2.asp?fname=Henry&lname=Ford”, true);

String fnameParamName = “fname”;
String lnameParamName = “lname”;
String fnameParamValue = req.getParameter(fnameParamName);
String lnameParamValue = req.getParameter(lnameParamName);

  1. Write your JavaScript to fill in your fields.

That’s it - easy!

regards and Good Luck