I have a lightning web component with filters on it. When a user changes one of the filter fields, I have an action that I am trying to build to filter the records displayed.

My question is, how do I access fields from the component? For example, I have the following which is called when one field is changed. I know I can get the value of the field that triggered the change but how do I get, for example, the list of records used in the data table so I can filter? or the values of the other fields on the page? 'FilterGroupStructures' is where I will do all of the work to filter the list.

//method to handle package filter change
    this.selectedproduct = event.target.value;

Thank you!!!



First create a vairable FILTERED_PRODUCTS annotated with @track in .js file that stores the list of products you want to display the user. On each filter change,create a handler that will further call a generic method to filter the products. Now, there are 2 approaches for that: 1. Make an apex call witht the filters and return values with limit. On UI you can add pagination or lazy loading. 2. When the page gets loaded get all the respective products and store them in a private variable ALL_PRODUCTS whose value will not be changed in any case. In the generice filter method filter the records from the ALL_PRODUCTS and assign them to FILTERED_PRODUCTS.

Since FILTERED_PRODUCTS is @track so as soon as you assign the values, the component UI will get rendered again.

Also, if you want to fetch additional info from the page apart from valueHandler, you can use this.template.querySelector() function.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.