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?
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.