Hey all,
Lately I have been trying some things with polymer and I thought I would share my findings about applying a filter in a polymer interface since some of you might have a hard time figuring this out as well. It was my first experience with JavaScript and took me some time to figure out a simple thing like this. Hope this will help some of you struggling as well.
In my case I wanted to use polymer as a endpoint for users to check off maintenance tasks they performed. In the background there is a maintenance system running that calculates when what maintenance should be executed on our machinery. Only when a task is due to be performed, it should show in the polymer interface so that the mechanic knows that it should be executed.
To achieve this, polymer should filter out all activities that have a priority of 0 (or lower). To do so I have added the following code to my standard polymer list interface.
All of the additions came from Data binding helper elements - Polymer Project
The total code can be found in the html file attachment. I have added two things (and removed a lot of other things to limit some functionalities for the mechanics):
- Added a line behind the iron-selector/template which specifies what filter to use here. The line is:
filter="isNeeded" observe="type item.prioriteit">
The filter attribute refers to a part of code in the script should execute (this is the part I added in point 2)
I believe the observe attribute will watch the item.prioriteit (which is the priority) for changes. When a change is detected, the filter will be reapplied.
- Added code to the (
class MachineonderhoudOnderhoudsregelList) in the script part of the code
The code I added here defined the actual filter that is applied to the list. My code for this looked like:
isNeeded(item) {
return item.prioriteit > '0';
}
Which specifies that only list items with a priority higher than 0 should be shown. The isNeeded is called in point 1 in the filter attribute of the iron-selector.
By adding polymer fields to the screen that are used in this script I believe you could use this method to create dynamic filters as well. But in my case this was not necessary and I have not tried this yet.
My full code for the list-interface can be found in the following HTML file (so you can see where the pieces of code above are placed (it wont display properly on the forum somehow)
Onderhoudsregels-list.html (2.6 KB)
By no means do I know if this is the most effective or right method to filter, but it helped me and might help some of you as well!