This may come late but attached you may find a working example.
I tried to pass the case variables to the routing screen, but failed to get the access token. While this is very easy when in a dynaform (just put MFDynaform.getAccessToken() to the dynaform's javascript), I was not able to get it when on the routing screen. I spent hours trying to figure this out but ended up with a workaround to store the case vars in the local storage.
Note the following disadvantages:
1. NEVER store sensitive data (such as access token) in the local storage.
2. This only works with IE8 and later.
My workaround was to place in the dynaform's javascript the following:
Code: Select all//this is a workaround to store variables in the local storage
//NEVER store sensitive information in the local storage!!!
$("form").setOnSubmit(function(){ //when submitting the form, save the selected vars in local storage
$("form").saveForm();
//store the vars in an object
var vars = {
'entity': $("#entity").getValue(),
'round': $("#votingRound").getValue(),
'vote': $("#vote").getText(),
'score': $("#totalScore").getValue()
}
if(localStorage.getItem('variables')=== null){
localStorage.setItem('variables', JSON.stringify(vars)); //create key->value like pairs to be stored in the local storage
} else {
localStorage.removeItem('variables'); //remove the vars from the local storage if allready in there
localStorage.setItem('variables', JSON.stringify(vars));
}});
In your copy of the routing screen template, add HTML like this (follow the instructions from wiki to place it in the correct sections)
Code: Select all<tr>
<!--Make sure the file exists in the /workflow/engine/public_html/images directory-->
<td style="text-align: center" colspan="2"><img src="/images/toadd.png"/></td>
</tr>
<tr>
<td style="text-align: center" colspan="2"><h2 style="color: red">CHECK YOUR VOTING!</h2></td>
</tr>
<tr height="5">
<td class="FormLabel" width="100">Entity:</td>
<td class="FormFieldContent"><p id="entity"></p></td>
</tr>
<tr height="5">
<td class="FormLabel" width="100">Voting round:</td>
<td class="FormFieldContent"><p id="round"></p></td>
</tr>
<tr height="5">
<td class="FormLabel" width="100">Your vote:</td>
<td class="FormFieldContent"><p id="vote"></p></td>
</tr>
<tr height="5">
<td class="FormLabel" width="100">Score:</td>
<td class="FormFieldContent"><p id="score"></p></td>
</tr>
<tr>
</tr>
<tr>
<td style="text-align: center" colspan="2"><h4 style="color: blue">If the data is correct, click Continue.</br> Otherwise, click on the previous step link.</h4></td>
</tr>
In the javascript section of your routing screen template, put the following:
Code: Select allvar variables = localStorage.getItem('variables'); //get the variabes stored in the local storage
var varsObject = JSON.parse(variables); //create an object from the vars
for (var key in varsObject) { //itterate
if (document.getElementById(key) !== null){
document.getElementById(key).innerHTML = varsObject[key]; //populate the HTML element with the variables
}}
localStorage.removeItem('variables'); //CLEAR the local storage
My routing screen looked like this (I used a different image, the toadd.img is by default in the images directory):
The working routing screen template is attached.