Hello,
SETTING THE SCENE :
I use the tag in an embedded form because I need to use Camunda’s SDK. I need to use the SDK because I would like to retrieve the ID of the process instance related to the form I click on in the tasklist. Why do I need to use the SDK? Because I simply need to retrieve variables linked to the instance and I need to put them back in the embedded form to be able to manipulate them and for example display them in a grid.
Normally, I should therefore use a Camunda function to fetch the variables from the process instance. But this does not work as described in the following post :
Therefore, as nobody was able to help me, I got around the problem by making a request to the Camunda API.
- using the SDK I will look for the ID of the process instance related to the form I opened in the task list.
- then I will look for the variables of this instance to be able to manipulate them.
Cool!! 
But that’s not the crux of the problem… I want to use a particular library to customize my data grid. I’d like to use KENDO UI from Telerik.
I have already managed to set up a grid with rows and columns created in the HTML file of the form. It was very design ! But unfortunately, nobody uses data this way… Indeed, I would like my grid to contain data from a database. So I managed to save the data to be displayed by the grid in the process instance. My instance therefore contains a String variable in JSON format containing the data to be displayed in the grid.
Cool !!! But what’s the problem?
I’m getting there… So I use the tag to retrieve the instance and the variables it contains. It works. But then I try to create my Kendo grid in this same tag… And there … it’s a drama… it doesn’t work because in my opinion, Camunda’s own script prevents the use of other imported sources. like for example My JS kendo files or JQuery.
The solution is to get the variables of the instance in the tag and then, by transforming the variables of the instance into global variables of my HTMl form, to create the Kendo grid in another standard tag where I know it works. The grid will then retrieve the global variable from the form and integrate it as a data source.
THE PROBLEM !!!!
It doesn’t work because the tag that I will call script (a) is ALWAYS read after the other tag that I will call script (b). I can’t even check if my variable is indeed global since script (a) is always read last…
That’s the problem.
<form role="form">
<script cam-script type="text/form-script" async=false>
var taskService = camForm.client.resource('task');
var processInstanceId = null;
var result = null;
taskService.get(camForm.taskId, function(err, task) {
//alert(JSON.stringify(task));
processInstanceId = task.processInstanceId;
result = $.get("http://localhost:8080/engine-rest/process-instance/"+processInstanceId+"/variables", function(l1_result) {
window.alert("coucou");
console.log(l1_result.JsonWeightSetpoints.value);
});
result.done(function(l2_result) {
console.log(l2_result.JsonWeightSetpoints.value);
});
});
</script>
<script type="text/javascript" async=false>
debugger;
result.done(function(l3_result) {
console.log(l3_result.JsonWeightSetpoints.value);
});
//this is where I implement the Kendo UI grid
</script>
<div id="grid"></div>
</form>
the 3rd console.log() doesn’t work because the result variable is not defined.
Afterwards, I did an experiment to test the scope of script (a). I create a button that calls a function defined in script (a). The console returns an error indicating that the function is not defined…
<form role="form">
<script cam-script type="text/form-script" async=false>
var taskService = camForm.client.resource('task');
var processInstanceId = null;
var result = null;
function myFunction() {
debugger;
result.done(function(l3_result) {
console.log(l3_result.JsonWeightSetpoints.value);
});
}
taskService.get(camForm.taskId, function(err, task) {
//alert(JSON.stringify(task));
processInstanceId = task.processInstanceId;
result = $.get("http://localhost:8080/engine-rest/process-instance/"+processInstanceId+"/variables", function(l1_result) {
window.alert("coucou");
console.log(l1_result.JsonWeightSetpoints.value);
});
result.done(function(l2_result) {
console.log(l2_result.JsonWeightSetpoints.value);
});
});
</script>
<script type="text/javascript" async=false>
//this is where I implement the Kendo UI grid
</script>
<button onclick="myFunction()">Try it</button>
<div id="grid"></div>
</form>
The console.log() of the function doesn’t work, all the other console.log() work.
I conclude that my 2 problems are :
- How to force the script (a) to work synchronously to allow the reading of the script (b) only after???
- Is the scope problem with script (a) normal ? How to solve this scope problem?
THE AIM :
I would like to be able to use the string variable JsonWeightSetpoints in a standard tag .
Thank you all for your help !!! 
