Convert a variable of type java.util.ArrayList so I can access it with JS

Camunda 7 Topics Discussion & Questions
1

Hello

I have a process variable of type java.util.ArrayList.
It is created with the following JS :

var oUsersInGroup = execution.getProcessEngineServices().getIdentityService().createUserQuery().memberOfGroup(“camunda-admin”).list();
execution.setVariable(“oUsersInGroup”,oUsersInGroup);

How can I convert this using JS so I can access it in a UserTask form?
In Cockpit, in the Deserialized view I can see the JSON representation but how can I achieve the same using JS?

Thanks

1 Like
2

See this page for info on how to use cam-script to interact with process variables inside an embedded form.

https://docs.camunda.org/manual/latest/reference/embedded-forms/javascript/lifecycle/

I have a similar situation with a JSON list that I parse and then iterate through the entries to dynamically construct HTML for display. In my case I’m populating a div with dynamically generated form input radio buttons where the user has to select one of the entries that is submitted back with the form.

<script cam-script type="text/form-script">
  var variableManager = camForm.variableManager;
  camForm.on('variables-fetched', function() {
    var oUsersInGroup = variableManager.variableValue('oUsersInGroup');
    oUsersInGroup.forEach( function(user) {
      // update some div.innerHTML here
    }
  }

  camForm.on('submit', function() {
    // selectedUser represents the name of the radio group created above
    variableManager.createVariable({
      name: 'selectedUser',
      type: 'String',
      value: $('input:radio[name=selectedUser]:checked').val(),
      isDirty: true
    });
  }
</script>
3

Thanks for the reply @dhallmark

However my problem is not related to accessing the variable on the form, but the fact that it is a serialized string representing a Java ArrayList datatype. This can be seen with

alert(typeof oUsersInGroup + “\n” + oUsersInGroup);

I need to convert it into JSON at some stage but do not know where and how.

4

It is a fairly simple process to do the conversion. I did some testing and I was able to replicate the behavior you are seeing where the value of the variable is the base-64 encoded serialized string.

The easiest way to do this is to create an input variable of type text and convert it to the json string using a juel expression with the Spin.JSON method.

Assuming the variable named userList is your ArrayList. Create a text variable userListJson and set its value to: ${JSON(userList).toString()}

In your form’s cam-script when you retrieve the userListJson variable, use

var userList = JSON.parse(userListJson);
userList.forEach(…)

I am uploading a BPMN to this response that demonstrates this. I am pasting the HTML form here since I can’t upload that as an attachment. Save the HTML with the filename userlist_form.html and deploy it along with the BPMN to see my working example. Step 1 in the process creates the ArrayList variable. Step 2 in the process is the user task that displays the array values on the form inside tasklist.

<form name="userList">
<div id="userDiv"/>
<script cam-script type="text/form-script">
  var variableManager = camForm.variableManager;

  camForm.on('form-loaded', function() {
    variableManager.fetchVariable('userListJson');
  });

  camForm.on('variables-fetched', function() {
    var userListJson = variableManager.variableValue('userListJson');
    console.log(userListJson);

    var userList = JSON.parse(userListJson);
    userList.forEach(function(user) {
    document.getElementById('userDiv').innerHTML += '<p>' + user + '</p>';
  });
})

</script>
</form>

userlist_task.bpmn (3.6 KB)

4 Likes
5

Ah @dhallmark you’re a star. Thanks so much for all the effort. I gave you a well deserved like. :smile:

1 Like
6

You’re welcome!