CMS filter using select on csv string

Design help Custom code
1

Hello! :wave:

I am playing around with the Finsweet CMS filter.
I have 3k pages in a collection with some fields that contain arrays as comma separated strings (some are very long).
I cannot use a multi-reference field because it would largely exceed the webflow CMS item limit.

For example, it could be:

  • countries_raw = “France, Germany, Italy”
  • projects_raw = “raising funds, financing machines, hiring staff”

Minimum viable solution

Progress

:white_check_mark: A multi-select checkbox that is populated using another collection.

:white_check_mark: When the user selects a word, it would filter the list according to the field in the list.

:x: If the option selected is contained in the field among other options, it should still match. i.e. The option selected should act as a keyword search and show results.

image
image2384Ă—1602 342 KB

My project

Filtering works but only if the result only contains one choice, it’s not parsing the comma separated string. Here are the links:

:arrow_right: Live link
:arrow_right: Read-only link

Comfortable solution

:x: A better solution for me would be if the options of the multi-select field where populated from the list, and not from another collection.

Ultimate solution

:x: The very best solution would be an autocomplete field that would generate choices based on the concatenation of all comma separated values.

image
image1108Ă—986 34.4 KB

Thank you very much for your help! :pray:
Cheers,
Joachim

2

OPTION #1 ( Easy )

Store your list of candidates in separate CMS table and build your select. On selection, update a separate hidden text file and trigger a filter event ( bubble the event so it is caught by FS filter ). Filter will treat it as a text entry, and find matching items in the CSV.

If you have overlap issues in your terms, like “red wool” v. “red wool socks”, you can get fancy with some pre-processing scripts but it gets complex fast. In theory you’d want your CSV string to be e.g. |item 1|item 2| and your search to be |bounded| to guarantee an exact match.

OPTION #2 ( Intermediate )

Parse your CSV into discrete matchable items. This needs to happen as they’re loaded, not as they’re displayed, or the filter will miss items 101+.

Dig into the APIs to learn how to do this.

OPTION #3 ( Advanced )

Look deeply into the JS-API capabilities for both CMS filter and CMS load.

The ideal solution is to identify an event handler that fires when CMS load loads additional data ( not displays it, just loads it ). Then you’d have to get creative with updating both your filter UX and also the CMS filter data structures. This would allow you to build your filter list dynamically from the CSV.

The place to ask though, is Finsweet Plus forum. If you’re not a member there yet, join up, because it’s the only place you’ll get the full inside scoop.

1 Like
3

Hi @memetican and thank you for answering!

Could you please elaborate on that?
This is where I am stuck (I am not a dev, I work in legal but I learnt Webflow for my projects)

I will go step by step and dig into the other solutions once I solve the basic one!
Thank you very much :slight_smile:

PS: I posted on the Finsweet forum too!

4

If you’re using my text field filtering approach, setting the input field with script won’t trigger the filter update. You have to fire an event, and it needs to bubble for finsweet’s handler to detect it.

Search the FS forum for examples, you should find a few. I haven’t needed that on any client projects recently so the exact event type and configuration I used isn’t handy, but I think it was likely an input event type, and set to bubble.