Dynamic selects in embedded forms

Camunda 7 Topics Discussion & Questions
,
1

Hi,

Inside an embedded form, I’m using AngularJS capabilities to get all the users from the system with this call:

$http.get(Uri.appUri('engine://engine/:engine/user')

Once I have them, I store them in a variable ($scope.users), which I use to populate an HTML select bound to a camForm variable using this code:

<select class="form-control" cam-variable-name="selected_user" cam-variable-type="String"  required>
  <option ng-repeat="us in users" 
    ng-value="us.id">
      {{ us.firstName }} {{ us.lastName }}
  </option>
</select>

The select is displayed and it lets me select a user, but the variable (selected_user) is not created. For example, if I print the variables using console.log(camForm.variableManager.variables); in the camForm submit event, I see all the other variables but this one. I’m pretty sure that I’m not defining the select correctly. I’ve also tried to use cam-choices with a “map-like” variable like the following one, without any success:

users_map = {
  "user1": "User 1 name",
  "user2": "User 2 name",
  ...etc...
}

What am I doing wrong? Thanks in advance,

2

Hi,

I have added a “hard-coded” select (no dynamic options) and it works fine:

<select class="form-control" id="sel"		      
  cam-variable-name="selector" cam-variable-type="String" required>
    <option value="Y" selected>Sí</option>
    <option value="N">No</option>
</select>

Any help with this? I’m stuck… Thanks!

3

I just discovered what was going on. The select was inside an ng-if, so it wasn’t available to the Camunda engine when it loaded the form. The solution is to replace the following line:

<div class="row" ng-if="users">

by this one:

<div class="row" ng-style="{'display': users ? 'block' : 'none' }">

Cheers,

4