Help with filtering HTML Component Lists

Hi Everyone,
Wondering if someone can help me, i´m trying to get the filters in the html component to work. Specifically i´m using the filtered list from the library. The html code for the filters is:

Although i´m maybe wrong, it appears when I change the “tb-value” only the filter label changes on the front-end, also, i´m not seeing how to specify a particular field that I´d like to filter within for a specific value. Tried changing the “tb-filter tb-id” to the field id but to no avail. Had a look at the documentation but it just gives the same sample line of code thats included in the template/image above.

Also, would be great if anyone has a template for filtering with check-boxes as opposed to filtering by value.

Any help highly appreciated.

Ashley, just to ensure that I am following you…are you using an Custom Component?

The basic HTML component does not allow the use of handlebars.js expressions/helpers


Hi Adam, thanks for responding, yes i´m using the custom component, and without having watched Tim´s custom component video using Chat GPT. Basically, i´ve been going around in circles a little as I wanted to build a filterable table to be published on a website inside an iFrame and was lacking a little information. I now realise what handlebars and helpers are so this should help me. I´m going to spend a few hours again and will update you with or without questions. :slight_smile:

Also, yesterday I saw Tim´s filtering using parameters within a search component video which gives me another option as some fields i´d like filter with are checkbox fields. So i´ve got some options. I´ll keep you updated :wink:

1 Like

Got the filters modified to accept multi checkbox filters relatively quickly with ChatGPT which i´m really pleased with.

However, i´m exploring quite a few other different dream features I could include, but a lot of the time gpt is asking me to include a reference to a the field id in the javascript which i´m not sure is possible as the handles only work in html, so any work-around there would be appreciated.

I also spend a good few hours on chatgpt trying to generate a rating system to convert an equation number field containing a decimal number between 0.0-5.0 to the nearest 0.5 number and display the that number into a visual display of empty and filled stars. I the end I gave up as I couldn´t get any visual “stars” display. So there´s a challenge if anyone is bored! I´d show the code here but Chatgpt gave me so many different versions of code (html, CSS and JS) that wouldn´t work so it doen´t seem worth posting here.

Will post a my filterable list in the showcase so anyone who wants can see it.