Dashboard template node with own filters?

Dashboard
1

Hi,

I am using Dashboard template node to show a table. Working so far.
Now I need to add a custom filter in ng-repeat but cannot find out how to to that correctly.

Below is my example. I add a new filter "MyFilter" and make use of it in ng-repeat.
However, console of the Dasboard page reports an error:
app.min.js:140 Error: [$injector:unpr] http://errors.angularjs.org/1.5.11/$injector/unpr?p0=MyFilterFilterProvider%20<-%20MyFilterFilter

So I guess the filter is not correctly registered.
Any ideas? Thanks in advance.

<div id="{{'my_'+$id}}">
    <table style="width:100%">
       ...
        <tr ng-repeat="x in issues | MyFilter"> 
             ...
        </tr>
    </table>
</div>
    
<script>

app.filter('MyFilter', function () {
    return function (items) {
        var filtered = [];
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            if (item.labels.indexOf("MyLabel") > -1) {
                filtered.push(item);
            }
        }
        return filtered;
    };
});

(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
        // Do something when msg arrives
        scope.issues = msg.payload.issues;
    }
  });
})(scope);

</script>
2

I seem to remember that you don't get access to Angular's app when using Dashboard. So I don't think you can insert your own filter. Too many other things going on to make the front- and back-end's talk to each other.

You could use uibuilder but then would have to build your own display widgets. uibuilder is kind of the opposite extreme of Dashboard. It gives you an easy way to include whatever front-end libraries you want; creates a URL for you to use and automatically links in a small library that creates a websocket link to the back-end along with a simple event system to make it easy to know when new data has been received (and easy to send data back to Node-RED of course). It also lets you create many pages off a single URL and lets you have many instances each with their own master URL.

3

I believe Julian is correct -- you don't have access to the app object in the dashboard.

However, you should be able to apply that same filter when each message is received:

(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
        // When msg arrives, use only those with MyLabel
        scope.issues = msg.payload.issues.filter(i => i.labels.indexOf("MyLabel") > -1);
    }
  });
})(scope);

I have not tested this, but it should be close, and have the same results... (it could also use some error checking logic).

1 Like
4

uibuilder would be an option (and I love it as you know) but its too heavy for my use case here. So, I would like to stay with dashboard in this case and understand, that it does not allow to make use of full Angular functionality.

In the meantime I have found a workaround, similar to what Steve suggests, i.e. preprocess manually in the scope.$watch function.

Thanks Julian and Steve for your feedback!

1 Like