Populate database results in a dropdown list in a form


#1

Hi,

I query the H2 DB and want to populate the results in a dropdown list in a task form.
What is the easiest way?
The results of the query are passed into a java object. But how to pass them into the form?

Any simple example?

Thanks!


#2

I managed to do it with Select as written here
https://docs.camunda.org/manual/7.6/reference/embedded-forms/controls/select/

I put my results in a HashMap and then:

Map<String, String> availble_batches = new HashMap<String, String>();
availble_batches.put("id", "value");
 ObjectValue batchesDataValue = Variables.objectValue(availble_batches)
                .serializationDataFormat(Variables.SerializationDataFormats.JSON)
                .create();
 execution.setVariable("Available_Batches",batchesDataValue);

And I have a simple html form with a Select tag

<select cam-variable-name="Selected_Batch" cam-variable-type="String" cam-choices="Available_Batches"/>

My question now is how can I populate values (also taken from DB) to various text fields on the same form depending on the selected value of the dropdown list?

Actually, how do I call a JavaDelegate code from an html form?
(My plan is when I select an item of the dropdown menu, the OnChange function though javascript will call a Java Delegate to make new queries and/or fetch new variables and then populate them in other text fields in the same form).


#3

HI @kontrag,

depending on how you want to build your user interface you have two options I guess:
a) Change the process model to have a service task after the User Task in which you present this “batch select” to the end user. Then you could use the standard Camunda tasklist features and let the user complete the task. After the user completed the task within your service task you would get the data from the database. After the service task you either have a new user task or cycle back to the first user task.
b) Add JavaScript (e.g. reusing existing AngularJS or jQuery) within the embedded form which requests onChange the variables from a REST endpoint within your application server on which camunda is running. You could create such endpoint within your process application (simple example of doing this in java: https://github.com/camunda/camunda-consulting/tree/master/snippets/ecm-integrations/invoice-cmis/src/main/java/org/camunda/bpm/example/invoice/facade and some very simple jQuery: https://github.com/camunda/camunda-consulting/blob/master/snippets/ecm-integrations/invoice-cmis/src/main/webapp/forms/upload-new.html#L44)

Hope this gives you some ideas.

Best
Felix


#4

Thanks for your ideas @felix-mueller!

What I did for now is to load my object ‘batches’ in the html and then depending on the selected item of the dropdown menu I filter properties of the object to fill in other text fields.
I wrote the below script:

<script cam-script type="text/form-script">
    var variableManager = camForm.variableManager;

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

    camForm.on('variables-fetched', function() {
        $scope.batches = variableManager.variable('batches').value;
    });

    var select = document.getElementById("dropdownItemsAvailBatches");
    select.onchange = function(){
            var obj = $scope.batches;
            for (var i = 0; i < obj.length; i++) {
            if (obj[i]["batchId"] == select.options[select.selectedIndex].value) {
                document.getElementById("batchQuantityField").value = obj[i]["batchQuantity"];
            }
        }

        var selectedString = select.options[select.selectedIndex].innerHTML;
        document.getElementById("batchNo").value = selectedString;
     }

</script>

#5

Good news! Happy to hear that you solved your issue.