Record Watch with Animation

A lot of the time when using record watch to show record updates in real-time I would just use the heavy handed approach of updating the whole scope with something akin to the following :

This works well and gives the desired outcome, but in essence what is happening here is that even if just one record in a list has changed then the whole list is refreshed. What if we wanted to have a lighter touch on things and perhaps add some animations like so:

Note – Open the video in full screen for best results – The animation is not as smooth as I would like in the video, but trust me, in real life it’s breathtaking. 🙂


So how did I achieve this? Firstly I used a handy library for cross browser css animations called animate.css and also dug a little bit deeper into the record watch tool. Lets take a look at the widget.



Note – I have put the link to animate.css in the html of the widget for ease of this example, normally it would be linked to in the theme.


Server Script:

Client Script:

Note – Don’t forget to pass $scope and spUtil into your function.

It is the two objects (name and data) that are passed into the record watch function that allow us to interrogate not only the event that has occurred but the data that has changed during that event. The best way to see what is available to you is to log these two objects to the console and play around:

This post was merely meant as a quick example to show how we can use record watch with more precision than just blindly refreshing the whole scope. I doubt my example has a place in the real world but hopefully it has helped someone or at least piqued someones interest to go digging into record watch further themselves.

Leave A Comment