¿How i capture the onchange event of the select field in a form of HumanTask ?
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:
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
The code for eJSc is as follows:
function myFunction(e) {
var value = e.options[e.selectedIndex].value;
console.log('eSDDL value '+value);
var text = e.options[e.selectedIndex].text;
console.log('eSDDL text '+text);
document.getElementById('eTR').innerHTML = "You selected: " + text;
}
</script>
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
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
Comments
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.
Comments
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:
<select id="aSDDL" onchange="myAJAXFunction(this)">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
3.5 Change the Data in the eJSc HTMLWidget to (delete the previous code):
<script type="text/javascript">
function myFunction(e) {
var value = e.options[e.selectedIndex].value;
console.log('eSDDL value '+value);
var text = e.options[e.selectedIndex].text;
console.log('eSDDL text '+text);
document.getElementById('eTR').innerHTML = "You selected: " + text;
}
function myAJAXFunction(e) {
console.log('in myAJAXFunction');
var xmlhttp;
var atext;
xmlhttp = new XMLHttpRequest();
console.log('after new myAJAXFunction');
xmlhttp.onreadystatechange = function() {
console.log('in onreadystate myAJAXFunction');
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
console.log('valid');
document.getElementById('eTR').innerHTML = "Data from Call is: " + xmlhttp.responseText;
}
}
xmlhttp.open("GET", "http://localhost:8080/com.vogella.web.filecounter/FileCounter", true);
xmlhttp.send();
}
</script>
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:
String lnameParamName = "lname";
String fnameParamValue = req.getParameter(fnameParamName);
String lnameParamValue = req.getParameter(lnameParamName);
That's it - easy!
regards and Good Luck