Display LinkedHashMap in embedded form

Camunda 7 Topics Discussion & Questions
,
1

Hi,

Using: Camunda Run - 7.15^
Deployment of forms and model: via REST

This seems to be a common usecase, but somehow I can’t firgure out how it work.

I have a process instance with a java object variable adresse which has the value:

{ 
  'street' : 'Hauptstraße',
  'number' : '36'
 }

Now, I want an input field for street and number in an embedded form, but nothing seems to work. Input fields always remain empty, except for adresse which shows the serialzed value of the HashMap:

  <script cam-script type="text/form-script">
    camForm.on('form-loaded', function() {
      // tell the form SDK to fetch the variable named 'adresse'
      camForm.variableManager.fetchVariable('adresse');
    });
    camForm.on('variables-fetched', function() {
      // work with the variable (bind it to the current AngularJS $scope)
      $scope.adresse = camForm.variableManager.variable('adresse').value;
    });
  </script>


  <h3>Process Variables</h3>
  <table class="table table-striped">

    <!-- This Adresse shows the actual serialized value -->
    <tr>
      <td>Adresse</td>
      <td>
        <div class="controls">
          <input id="adresse"
               name="street"
               class="form-control"
               type="text"
               ng-model="adresse"/>
        </div>
      </td>

    <tr>
      <td>Straße</td>
      <td><input type="text" id="input_street"
         cam-variable-name="adresse.street"/></td>
    </tr>

    <tr>
      <td>Straße 2</td>
      <td>
        <div class="controls">
          <input id="street"
               name="street"
               class="form-control"
               type="text"
               cam-variable-type="String"
               ng-model="adresse.street"/>
        </div>
      </td>
    </tr>
  </table>

There even is a section in the documentation about how to fetch Java Objects - but not how to use them afterwards: Working with Java Objects | docs.camunda.org

How do I make fields in this HashMap visible and editable?

Regards,
Markus

2

Checkout the example that your link references, as it’s quite similar. If you’ll notice, there are java objects provided in the example to aide in the serialization (CustomerData.java and Address.java).

Short of that, you might have have some luck saving the variable as JSON.

3

Thank you. I do not have Java objects, since I only use Camunda Platform. Camunda automatically converts the variable adresse in to a Java LinkedHashMap:

image
image1476×390 14.7 KB

Since this is default behaviour, I thought there is a standard way to make values inside that LinkedHashMap editable in an embedded task form. Something like:

<input type="text" id="input_street"
         cam-variable-name="adresse.street"/>

or:

          <input id="street"
               name="street"
               class="form-control"
               type="text"
               cam-variable-type="String"
               ng-model="adresse.street"/>
4

Hi @Noordsestern,

where do you set your adresse variable?

You should set it as a JSON variable and your form will work.

Hope this helps, Ingo

1 Like