How to use Unsubscribe a Record Watcher.

When designing widgets, we often want to use a record watcher to notify us that the data we are monitoring has changed. To achieve this we would normally use spUtil like this

spUtil.recordWatch($scope, "", "", function() {

});

This works fine when we are only really interested in looking at one condition, but what happens when we want to change the filter condition? You know, when the user selects a different filter, how do we remove the old record watcher?

One option would be to reload the page to get rid of the old record watcher, but that is not great, we could use a variable to let the record watcher that we are now interested in is different and as such ignore the event. These are a little clunky and just mask the fact that we can't remove the record watcher we created using spUtil as we don't have a reference to the watcher any more.

The solution.

There is a way we can remove the old record watcher, but we have to create the record watchers in a different way. All spUtil is doing behind the scenes is calling snRecordWatcher which you can access directly.

Registering a record watcher (without spUtil)

Firstly add the snRecordWatcher as a parameter of the main client function, e.g.

function(spUtil,$scope,snRecordWatcher) { /* widget controller */ var c = this;

}

Nowe we can add the following line will create a new recordwatcher and return it to the variable called tempWatch

var tempWatch = snRecordWatcher.initList('

','<filter to apply');

This just registers the record watcher, next you need to specify the function you wish to execute. If you don't specify anything, the record watcher will simply execute the client main function()

So to register the function to execute, use the following

tempWatch.subscribe(function( ){

});

Now store the "tempWatch" variable somewhere, e.g. c.data.tempWatch for example.

Un-subscribing a record watcher.

As I mentioned previously, now that you can store a reference to the record watcher, you can now execute the "unsubscribe" function which is available in the snRecordWatcher class

tempWatch.subsbscribe();

The record watcher will no longer fire on the filter condition that you applied and you can now re-register the record watcher for your new condition.

Worked Example.

In this example there is a simple table that is filtered using a drop down. I have not gone complicated with the filtering.

Client HTML

watch_me=false watch_me=true

ID = [{{data.recordID}}]

Text = [{{data.text}}] Number = [{{data.number}}]

Client Class

The client class has the function called by the drop down when a user selects a filter. if the record watcher has been applied, it is simply cleared and the new one added. The record watcher doesn't do anything fancy, simply calls the refresh of the data, but this is just an example. you can pass a variable into the watcher that contains the record that has been changes and just update your data accordingly, but for simplicity I have not done that here.

function(spUtil,$scope,snRecordWatcher) {

/* widget controller */

var c = this;

//Filter change function executed when user picks the filter they want to watch

c.filterChanged = function(){

spUtil.update($scope);

//if they previously picked a filter then unsubscribe the watcher

if (c.data.tempWatch) {

console.log('Attempting to unsubscribe the watcher');

c.data.tempWatch.unsubscribe();

}

//Create new snRecordWatcher and keep the object

var tempWatch = snRecordWatcher.initList('x_snc_record_watch_data',String(c.data.recordFilter));

c.data.tempWatch = tempWatch;

if (c.data.recordFilter == 'watch_me=false'){

//Add slightly different recordwatcher functions to show that it works.

console.log('[b] filter selected');

//subscribe the function to the recordwatcher, otherwise the main update is called

tempWatch.subscribe(function(data){

console.log('[b] record watcher');

spUtil.update($scope);

});

} else {

//As above but a different function to show a different message to the console.

console.log('[a] filter selected');

tempWatch.subscribe(function(){

console.log('[a] record watcher');

spUtil.update($scope);

});

}

Server Class

The server is just applying the filter and collecting the data to be shown on screen.

})();

Hopefully this was helpful, if it was please let me know in the comments.