How best to deal with async BDM API data not showing up in custom widget controller?

Q&A
1

Hi,

I have a process instantiation form that uses a custom data table widget to present data to a user.

The table content is in a form-defined variable of type “external API”, the API being /API/bdm/businessData/com.company.model…

The table column definitions, etc are also form-defined variables, they have been given fixed content.

When the process initiates the custom widget controller receives column definitions, etc. through the $scope.properties.xxxx variables - except for the table content, derived from the external API call, which is undefined. The call is correct for I see the desired table row objects when I use a text widget for display of the BDM array of objects received through the API.

I can call the BDM API directly in the custom widget controller using $http.get but this seems it should be unnecessary. Is there a simpler way to get the information to the controller when it is called? The standard table widget does not seem to have any difficulty and I don’t see any special handling (watchers, callbacks, etc) in its controller.

2

Ok, after a fair bit of trial and error…

I wrapped the entirety of the controller code in a watch function like this:

function controller ($scope) {

var tableUpdates = ;
var newValue = ;
var tableRows = ;

// Wait for data from API call
$scope.$watch(function(scope) { return scope.properties.rowObjects },
function(newValue, oldValue) {
tableRows = newValue;

// Then carry on doing stuff…

}); // end of watch function
} // end of controller

I also found that to get updates to $scope.properties.xxxx variables, in this case the table updates, back to the page/form I needed to call the $scope.$apply() function like this:

        { text:   'Save and Quit Editor',
           init: function () {
                    this.disable();
                  },
           action: function (e, dt, node, config) {
               $scope.properties.tableUpdates = tableUpdates;
               console.log('End and save updates',$scope.properties.tableUpdates);
               $scope.$apply();
               $("div").remove(".panel");
               table.clear();
               $('#example').DataTable().destroy(true);
            }
         },

//