Call rest service from embedded form

Camunda 7 Topics Discussion & Questions
1

Hi guys, I need to call an api from an embedded taskform. In particular i need to call an api to evalute a dmn rules when a loose a focus on a specific field. I will need the answer to show the result of the rule on the screen.
Has anyone already had a similar need? Are there any examples i could follow?

Thank you so much, Marco.

2

Hi Marco_D_Aquilio,

if I understand you correctly, you want to show your User, after executing a human task the solution of the executed task.

I can think of different approaches in this case:

  • if it is acceptable to have a time difference for the user to get the solution, use a DMN-Task and send the solution via an E-Mail or similar.
  • you can build your own Camunda-Cockpit-Plugin, and with the successful klick on “OK” call a DMN-table with the given parameters and show the result as a popup (see the tutorial)

More information about the Decition-Service.
The REST-Api for Evaluating a Decition-Table

Maybe you also want to look into Delegate Code to find a creative solution.

I hope this helps,
Clemens

3

Hi Clemens, first of all thanks for the quick reply. In reality, the result of the evaluation should not be given after the execution of the human task but while the user is entering the data. After he has entered some information on the form, when he loses focus on a certain field I should call the rest service to evaluate the rule and show the result on another field always on the same form.

Thanks again for the help, Marco.

4

I solved with the following interventions:

  • first I imported angularjs $http services
  • second I used the ng-blur directive to catch the focus loss event
  • third, after setting the context variable with the value returned by the rest call to the DMN service, I forced the alignment of the model with $scope. $apply() to immediately see the value on the screen.

With these interventions everything works fine.
Thank you so much, Marco.

2 Likes
5

Please paste your sample code for others’ benefit.

6

below the complete code for anyone who needs it :grinning::+1:

<script cam-script type="text/form-sc ript">

	var $http = angular.injector(["ng"]).get("$http");

	$scope.callRules = function($event,$index) {
		console.log("BLUR "+$event.target.value);
		if($scope.oldValue.localeCompare($event.target.value) != 0 ){
			console.log("Valore Cambiato");
		    var data = { "variables" : {
					"codAnalisi" : {"value" : $scope.campione.listaAnalisi[$index].codiceAnalisi, "type" : "String"},
					"valore" : {"value" : $event.target.value , "type" : "Double" }
				} 
			};
		    $http({
				url: 'http://localhost:8080/engine-rest/decision-definition/key/ValoreAnalisiCritico/evaluate',
				method: 'POST',
				data: data
			}).then(function mySuccess(response) {
					$scope.campione.listaAnalisi[$index].risultato = response.data[0].risultato.value;
					console.log(response.data[0].risultato.value);
					$scope.$apply();
			},function myError(response) {
					$scope.risultato = response.statusText;
					console.log(response.statusText);
			});
			console.log("Risultato Regole "+ $scope.risultato)
		};
	};

	$scope.myFocus = function($event) {
		$scope.oldValue="";
		console.log(" FOCUS "+ $event.target.value)
		$scope.oldValue=$event.target.value;
	};

    camForm.on('form-loaded', function() {
  		// fetch the variable named 'schedaPrelievo'
  		camForm.variableManager.fetchVariable('campione');
	});

	camForm.on('variables-fetched', function() {
  		// after the variables are fetched, bind the value of customerData to a angular
  		// scope value such that the form can work on it
  		$scope.campione = camForm.variableManager.variable('campione').value;
	});

	camForm.on('submit', function() {
  		// remove '$$hashKey' properties from address objects
  		angular.forEach($scope.campione.listaAnalisi, function(anal) {
	  	  	delete anal.$$hashKey;
    	});
	});

</script>

<div class="form-group">
	<label class="control-label col-md-2">Protocollo Campione</label>
	<div class="col-md-3">
  		<input type="text"
       		id="uuid"
   			class="form-control" 
			readonly="true" 
			ng-model="campione.uuid"/>
	</div>
</div>

<div class="form-group">
	<label class="control-label col-md-2">Tipologia Prelievo</label>
	<div class="col-md-1">
  		<input type="text"
       		id="tipologiaPrelievo"
   			class="form-control"
			readonly="true" 
			ng-model="campione.tipologiaPrelievo"/>
	</div>
</div>

<div class="form-group">
	<label class="control-label col-md-2">Descrizione</label>
	<div class="col-md-4">
  		<input type="text"
       		id="descrizione"
   			class="form-control" 
			readonly="true"
			ng-model="campione.descrizione"/>
	</div>
</div>

<div class="form-group">
	<label class="control-label col-md-2">Laboratorio Incaricato</label>
	<div class="col-md-2">
  		<input type="text"
       		id="laboratorioIncaricato"
   			class="form-control" 
			readonly="true"
			ng-model="campione.laboratorioIncaricato"/>
	</div>
</div>

<div class="form-group">
	<label class="control-label col-md-5">RISULTATO ANALISI</label>
</div>

<div class="form-group">
	<label class="control-label col-md-1">Numero</label>
	<div class="col-md-1">
		<label class="control-label">Analisi</label>
	</div>
	<div class="col-md-1">
		<label class="control-label">Valore</label>
	</div>
	<div class="col-md-3">
		<label class="control-label">Risultato</label>
	</div>
</div>

<div class="form-group" ng-repeat="anal in campione.listaAnalisi">
	<label class="control-label col-md-1">{{$index+1}}</label>
	<div class="col-md-1">
  		<input type="text"
       		id="codiceAnalisi"
   			class="form-control"
			readonly="true" 
			ng-model="anal.codiceAnalisi"/>
	</div>
	
	<div class="col-md-1">
  		<input type="text"
			ng-focus="myFocus($event)"
			ng-blur="callRules($event,$index)"
       		id="valore"
   			class="form-control" 
			ng-model="anal.valore"/>
	</div>

	<div class="col-md-2">
  		<input type="text" 
       		id="risultato"
   			class="form-control" 
			readonly="true"
			ng-model="anal.risultato"/>
	</div>
</div>

<div class="form-group">
	<label class="control-label col-md-2">Rapporto di Prova Singolo : </label>
	<div class="col-md-1">
  		<input type="checkbox"
			id="rapportoProvaSingolo"
       		ng-model="campione.rapportoProvaSingolo"
   			cam-variable-type="Boolean"
   			class="form-control" />
	</div>
</div>
3 Likes