Populate <select> options from a webservice in a custom stencil

cancel
Showing results for 
Search instead for 
Did you mean: 
mario_fliegner
Active Member II

Populate <select> options from a webservice in a custom stencil

Jump to solution

I'm on developing a custom stencil in Activiti 1.7 where I want to populate values from a Webservice in a dropdown box. So far, with my current approach, it works fine with the exception that I'm not able to manage the current selection anymore after the "Save" button in the task was clicked. Maybe my approach is not the right one? Can someone give me advice in best-practice, please?

Here is my current runtime template, I want to achieve this with ng-options parameter at the <select> level instead of ng-repeat:

<div ng-if="field.type !=='readonly'" ng-controller="myCompanyCodeController">
<select class="form-control" id="myCompanyCodeSelect" name="myCompanyCodeSelect" ng-change="updatedata()" ng-options="company.value for company in companycodes track by company.id" ng-model="myCompanyCode" >
</select>
</div>‍‍‍‍

And this is the main part of the controller:

angular.module('activitiApp').controller('myCompanyCodeController', ['$rootScope', '$scope', '$http',
    function($rootScope, $scope, $http){
         $http.get('http://localhost:8080/activiti-app/app/rest/getMyCompanyCodes').success(function (data) {
         var options = [];
         for(var i = 0; i < data.length; i++) {
             var obj = data[i];
             options.push({
                          id : obj.id,
                          value : obj.label
             });
         }
         $scope.companycodes = options;
         return options;
});
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The behavior is, that if a user clicks on the "Save" button of the task, the page will be reloaded. Therefore the controller is executed again, and therefore even the Webservice is called again. The issue is now, that I don't know how to pre-select the current selected value of the dropdown again, once the page was refreshed? Always the first option appears. I can see, that in parameter $scope.field.value the selected value remains and is still there after the refresh, but the ng-model is gone. On the other hand, I really don't need to call the Webservice each time a user clicks on "Save" to fill the ng-model again. Should I try to handle this different as well?

Thanks for any advice!

Mario

1 Solution

Accepted Solutions
mario_fliegner
Active Member II

Re: Populate <select> options from a webservice in a custom stencil

Jump to solution

Hi Ciju,

thank you. Meanwhile, I've solved it by myself using the following additional logic in the controller script (added a selectedItem parameter for the loop and compare the current id with  the selected field.value):

angular.module('activitiApp').controller('myCompanyCodeController', ['$rootScope', '$scope', '$http',
    function($rootScope, $scope, $http){
         $http.get('http://localhost:8080/activiti-app/app/rest/getMyCompanyCodes').success(function (data) {
         var options = [];
         var selectedItem = 0;
         for(var i = 0; i < data.length; i++) {
             var obj = data[i];
             options.push({
                          id : obj.id,
                          value : obj.label
             });
             if(obj.id === $scope.field.value) {
                 selectedItem = i;
             }
         }
         $scope.companycodes = options;
         $scope.myCompanyCode = options[selectedItem];
         return options;
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

It looks like it is working. I'm not sure whether the refresh is necessary at this point. For me it's not, but for any other use-cases (I do not know so far) it might be... does it worth to open a ticket?

View solution in original post

2 Replies
cjose
Senior Member II

Re: Populate <select> options from a webservice in a custom stencil

Jump to solution

Mario,

yeah, the refresh on save is annoying. You can raise a support request to make this refresh optional.

Another option is to take control of the save by yourselves in the taskBeforeSaved javascript extension. If you are to take that path, the following snippet might be of help

// This method is invoked when task form is saved. Prevents default save behaviour when true (boolean) is returned
taskBeforeSaved: function (taskId, form, data, scope) {
var formService = angular.element(document.body).injector().get('FormService');
formService.saveTaskForm(taskId, data);
return true;
}

Cheers,

Ciju

mario_fliegner
Active Member II

Re: Populate <select> options from a webservice in a custom stencil

Jump to solution

Hi Ciju,

thank you. Meanwhile, I've solved it by myself using the following additional logic in the controller script (added a selectedItem parameter for the loop and compare the current id with  the selected field.value):

angular.module('activitiApp').controller('myCompanyCodeController', ['$rootScope', '$scope', '$http',
    function($rootScope, $scope, $http){
         $http.get('http://localhost:8080/activiti-app/app/rest/getMyCompanyCodes').success(function (data) {
         var options = [];
         var selectedItem = 0;
         for(var i = 0; i < data.length; i++) {
             var obj = data[i];
             options.push({
                          id : obj.id,
                          value : obj.label
             });
             if(obj.id === $scope.field.value) {
                 selectedItem = i;
             }
         }
         $scope.companycodes = options;
         $scope.myCompanyCode = options[selectedItem];
         return options;
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

It looks like it is working. I'm not sure whether the refresh is necessary at this point. For me it's not, but for any other use-cases (I do not know so far) it might be... does it worth to open a ticket?