Don't know how to add a Filter to the Node-Red ui-table? WATCH THIS

in this video we expand the dashboard from last week with a filter by clicking on the filter button a group appears showing the filter settings here the user can select which column to filter which operator to use and which value to compare we start by importing the flows from last week you can download the flows from my GitHub page linked in the description below before moving forward we deploy the current flows to check if it still works in the last video there was a typo in the table columns so I'll fix that quickly my general approach to implementing a new feature in node-red is to try it out using basic nodes such as inject change and function when I'm sure they work as I want them to I Implement them using buttons drop downs or whatever I need the filter is just a payload that gets injected into the table so we use the inject and the change nodes to implement a very basic filter the payload is a Json object with a command and arguments the command is called set filter in the arguments we need to Define field type and value the field specifies by which row we want to filter the type is just operator used to filter and the value is the value We compare to an important note here is that the field is not the table column title but the property defined in the table so in this case those are ID the name with the lowercase n and H let's try our hard-coded filter by adding some data to the table to make sure the Filter Works we add two rows in our table one not matching the filter after clicking on the inject node we see that only the row with my name as a name gets displayed to reset the filter we use the same change and just remove the values in the arguments array when we remove the filter all the rows in our table get shown again the first step to our final implementation is a filter button in the command group let's add it below the delete row button the name is filter and we use the filter icon it's located between the edge row and clear table buttons we create a new flow called filter where we can implement the actual filter the filter needs two drop downs and a text input in the dashboard in the first drop down we Define The Columns from the UI table we need to make sure that the value is the same as the column property the second is used to select the type which specifies the operation we want to use we Implement basic operations like equal and greater than the text input is used to input the value to be compared next we add the filter group to our UI control flow so it gets hidden when a new user connects as we see the filter group is hidden after reloading the dashboard when the user clicks on the filter button we want the group containing the filter options to appear now that we have all the required UI elements we can implement the actual filter we use three different change nodes to create a flow object called filter which contains all the required information after selecting a filter we can see the parameters in our flow.filter object we create a button called apply filter let's use the filter icon again when clicking the button we load our flow.filter object and construct the filter in the same way we did with the change before using a link out node we connect the filter command to the UI table after adding some data we test the filter on the name column we see that the filter is working as expected after applying a filter the user should also be able to clear the filter the button is called clear filter we can use the same change as we used in the beginning after applying the filter we can click clear filter which shows all the data again let's give the button a red background we want the group to be hidden after clicking one of the buttons Let's test the filter the filter group appears after clicking on the button we select the H column this time after applying only the rows which match the filter are shown and the filter group is hidden by clicking clear filter all the data is shown again that's it for this week's video I hope you enjoyed it and you could learn something

Channel: RuWindustries

Views: 5,331

Keywords: Node-Red, Dashboard, Industry 4.0, IOT

Id: uxzjIgueV08

Length: 10min 15sec (615 seconds)

Published: Sat Dec 31 2022