Need help creating a tab bar to filter a list of card UI components

Hi everyone. This is a mobile-first design.

The tab bar will sit at the bottom of the screen and filter an infinite list of scrollable Card UI components.

The cards to be filtered each have four categories of tags - SITE, RMA, SAFE and SECURE.

Each type of tag has multiple values:

  • SITE has a list of Datacenters.
  • RMA has a list of shipping states, like Delivered and In Transit

The tags are displayed as mutually-exclusive toggles, like Radio Buttons.

As a tab is opened and a tag is selected the tab will close and a tag icon will appear above the list of Card UI components.

The user can repeat this action to select additional tags - one tag for each of the remaining tabs.

As each tag is selected the list of Cards dynamically updates to display a subset.

At some point a free text search input may be added to this tab bar filtering component so it will become quite sophisticated. But for now the filtering is using predefined tags.

It seems as though Webflow was never designed for this level of logic and I very quickly ran into this wall.

However, I was wondering if others have solved this kind of logic problem with custom code. If so, how well did it:

  • integrate with the way Webflow mechanics work?
  • perform in the final product?

And was it easy to implement or was it a pita hack that was always buggy?

Bubble has the UI logic to do this with ease but their visual design builder is utterly horrendous. Bubble also does not build a true Single Page App, in that it hides elements on the page instead of using an efficient JavaScript runtime to rerender the elements in the DOM that change. Lots of negatives there.

In this tab filtering component it is important that the app is working with the tag data directly and not calling back to the database as the user is selecting each filter. So, the filtering is only happening on the client.

Here is a Figma image of the tabs and tags. Thanks!

Here is a Figma image of the Card UI components. When a user taps the Card it will expand downward using an accordion to present more immediate information that can solve questions on the go (used by datacenter technicians who are on their feet in a noisy environment):

Here is the Card expanded in accordion. There will be interactive controls in the space below as well as data so that essential functions can be performed at this level (like requesting server suspension if the Card is marked as being NOT SAFE):

BTW, I’m not a developer and would need good documentation on how to modify the logic in the code. It is a very data and process driven application.

HI @nickwalt you can try Finsweet attributes (eg. CMS combine && CMS filter) as it is well documented. If this will not solve your issues you can always hire a developer to do it for you.