service portal, widget, client script, link, event triggers

scottl
Kilo Sage

Does anyone know how to communicate between the 'Link' field if an event is fired within the 'Client controller' field?

For example, if an onClick event is triggered, go to the server get some data and upon return, 'flash/blink' the element in the HTML that is being updated.

Screen Shot 2016-09-12 at 2.54.41 pm.png

1 ACCEPTED SOLUTION

Thanks Lars.   Finally got it working and communicating through the callback from the server to the "List function" event



Controller


function($scope, $timeout) {


      this.view = function(){


              $scope.server.get().then(function(response){


                      angular.element('.js-view').triggerHandler('changed.view', response.data);      


                      //   delay the update of the view


                      $timeout(function(){


                              angular.extend($scope.data, response.data);


                      }, 288);


              });            


      }


}  



Link


function($scope, element){


      $(".js-view", element).on("changed.view", function(evnt, data){


              var timer = 288;


              //


              $(this).fadeOut(timer).fadeIn(timer);


      });


}




Update: I added the timeout function directly in the directive because it seems that ServiceNow isn't passing variables (like $timeout) defined in the originating directive "client script" for the Link function.     This has to do with populating the view and redrawing it as setTimeout doesn't work.   This is when one must fade out the 'view', add new content, and then fadein the new content.


View solution in original post

2 REPLIES 2

larstange
Mega Sage

Hi



Try and see the Stock Header widget.



Here they listen for clicks in one of the DOM elements. You could listen for changes instead. I guess you could also listen for changes in the scope.



find_real_file.png


Thanks Lars.   Finally got it working and communicating through the callback from the server to the "List function" event



Controller


function($scope, $timeout) {


      this.view = function(){


              $scope.server.get().then(function(response){


                      angular.element('.js-view').triggerHandler('changed.view', response.data);      


                      //   delay the update of the view


                      $timeout(function(){


                              angular.extend($scope.data, response.data);


                      }, 288);


              });            


      }


}  



Link


function($scope, element){


      $(".js-view", element).on("changed.view", function(evnt, data){


              var timer = 288;


              //


              $(this).fadeOut(timer).fadeIn(timer);


      });


}




Update: I added the timeout function directly in the directive because it seems that ServiceNow isn't passing variables (like $timeout) defined in the originating directive "client script" for the Link function.     This has to do with populating the view and redrawing it as setTimeout doesn't work.   This is when one must fade out the 'view', add new content, and then fadein the new content.