Widget that reacts to onChange event of Variable

[Geoffrey2]

Hi. I am building a Catalog Item for use in the Service Portal.  I have a Widget that is embedded in the Catalog Item using a Macro type Variable. And I have another Reference type Variable on the Item. I want the Widget to respond when the Reference field is changed. It needs to look up and display information related to the Referenced record.

I have found about a million Community Articles, Blogs, and YouTube videos that explain how you can use $rootScope.$broadcast to communicate between Widgets. But I'm not trying to communicate between 2 Widgets. I need to communicate from an onChange Catalog Client Script to a Widget.  Or I need to add a listener to the Reference type Variable from my Widget. Or I need a different solution entirely. Does anybody know how to do this?

My workaround at the moment is to use a setInterval in the Widget that manually looks for a change in the Reference Variable using $scope.page.g_form.getValue('my_ref_field'). This solution works, but it sucks and I hate it.

[benjamin_alldri]

$broadcast is still a valid way of communicating between the two (it's designed specifically for the purpose), but you might need to mock the client script side of things to do what you need by getting the widget's native $scope as I don't believe they have knowledge of Angular itself natively. 

To get that, you'd use angular.element something like the following using the widget's specific DOM reference:

var scope = angular.element($('#elementIdHere')).scope();

From there, you should be able to use scope.$broadcast(...) in the same way you otherwise would when the reference field mutates. You could also directly act on the field inside of the widget and skip the middleman of needing an event herald.

Please note that it is scope and not $scope like would be used normally - this is important as you've created a reference to the target scope into a regular JS variable.

If however the script does have knowledge of Angular, it should share the same $rootScope. So, use $rootScope.$broadcast(...) as recommended and catch it with $scope.$on(...) in the widget script to do what you need.

[Prasad38]

you can use  $scope.$watch function to detect the change in value  as mentioned below

$scope.$watch(function() {
        return $scope.page.g_form.getValue('Attr1');
    }, function(value) {
     // your logic
$scope.page.g_form.getValue('Attr1',new Valuevalue);
}

$scope.$watch(function() {
        return $scope.page.g_form.getValue('Attr2');
    }, function(value) {
     // your logic
$scope.page.g_form.getValue('Attr2',new Valuevalue);
}

[Mark Endsley]

This worked for me, thanks!

[xiaix]

Use:  $rootScope.$on("field.change", function(evt, parms) { ...