Event based refresh of a input form

Camunda 7 Topics Discussion & Questions
,
1

Hi all,
I have a select list in an embedded form and if I select one element of the select list, then I want the input fields to be filled dependent of the selected element of the list. How can I achieve this using the camform?

camForm.on('form-loaded', function() { camForm.variableManager.fetchVariable('insuredPersonsList'); }); 
    camForm.on('variables-fetched', function() {
        $scope.insuredPersonsList = camForm.variableManager.variable('insuredPersonsList').value;
    });
</script>
<div class="row">
    <div class="col-xs-6">

        <div class="form-group">
            <label for="insuredPerson">Versicherte Personen</label>
            <div class="controls">
                <select    class="form-control"
                        cam-variable-name="insuredPerson"
                        cam-variable-type="String">
                    <option ng-repeat="insuredPerson in insuredPersonsList" value="{{insuredPerson.id}}">{{insuredPerson.lastName}}, {{insuredPerson.firstName}}</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="insuranceNumber">Versichertennummmer</label>
            <div class="controls">
                <input required="true"
                       cam-variable-name="insuranceNumber"
                       cam-variable-type="String"
                       name="insuranceNumber"
                       ng-pattern="/^[0-9]{9,9}$/"
                       class="form-control" />
                <p ng-if="insuredPersonForm.insuranceNumber.$invalid" style="color: red">
                      Eingegebene Versichertennummmer ist ung&uumlltig!
                </p>
            <p class="help-block" ng-show="insuredPersonForm.insuranceNumber.$invalid">Versichertennummer muss 9stellig numerisch sein.</p>
            </div>
        </div>

…

Thank you
Armin

2

Might be useful to check out the select control:
https://docs.camunda.org/manual/7.4/reference/embedded-forms/controls/select/

3

Hi Niall,
sorry, the post was not complete. My form example was not added. I am able to fill the select list. My problem is to listen to the select event of the select box and then refresh the input text field. I do not know how to do this with the camform?

<form role="form" name="insuredPersonForm">
     <script cam-script type="text/form-script">
        camForm.on('form-loaded', function() {
              camForm.variableManager.fetchVariable('insuredPersonsList');
        });

        camForm.on('variables-fetched', function() {
            $scope.insuredPersonsList = camForm.variableManager.variable('insuredPersonsList').value;
        });
    </script>
    <div class="row">
        <div class="col-xs-6">

            <div class="form-group">
                <label for="insuredPerson">Versicherte Personen</label>
                <div class="controls">
                    <select    class="form-control"
                            cam-variable-name="insuredPerson"
                            cam-variable-type="String">
                        <option ng-repeat="insuredPerson in insuredPersonsList" value="{{insuredPerson.id}}">{{insuredPerson.lastName}}, {{insuredPerson.firstName}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="insuranceNumber">Versichertennummmer</label>
                <div class="controls">
                    <input required="true"
                           cam-variable-name="insuranceNumber"
                           cam-variable-type="String"
                           name="insuranceNumber"
                           ng-pattern="/^[0-9]{9,9}$/"
                           class="form-control" />
                    <p ng-if="insuredPersonForm.insuranceNumber.$invalid" style="color: red">
                          Eingegebene Versichertennummmer ist ung&uumlltig!
                    </p>
                <p class="help-block" ng-show="insuredPersonForm.insuranceNumber.$invalid">Versichertennummer muss 9stellig numerisch sein.</p>
                </div>
            </div>
4

In the embedded form, you can also use plain Javascript. For this use-case you could add an id attribute to the select field and use Javascript to add a change event listener to the select field within the form-loaded callback. This listener is then called whenever the selection changed and you can update the input text field.

5

Hi Sebastian,
Thank you, your solution works for me. I have one problem left, I guess.
Within the camForm.on(‘form-loaded’, function() { I am setting the input fields. The camForm is now already loaded. How can I refresh the camForm to make the changes viewable?

6

You need to apply the value directly to the DOM element (instead of to the variable manager). Then the changes are immediately visible in the form.

7

Now it is working.

Vielen Dank und Grüsse nach Berlin

8