Forum Academy Marketplace Showcase Pricing Features

Search filtering by tags list

Hi
I am trying to build a search like the one below.

The data types have several tags. The filtering should be done with those tags by clicking on the relative word underneath the search bar.

Thanks for help.

Hi,

One way of going about this would be to set a state corresponding to the tag when it is clicked, and have the result display group to be filtered by the value of the state.

Step 1/ Create a custom state, let’s call it « Search tag », set it to either text or refer to an option set if your tags are stored that way in your data type.

Step 2/ Create an on click workflow
When the button in the horizontal repeating group is clicked, set the Search Tag’s state to that value.

Step 3/ Configure the filter in the repeating group that displays the results.
Data source : do a search for : Data Type : filtered : item’s tag IS current Search Tag state.

:warning: my answer is generic and you may have to make adjustments in function of whether the tag type is text value or option set derived.

:warning: if the results displayed come from a huge list in your database (>200 items for that data type) you should consider creating a satellite data type to display your tag repeating group (the one used to filter). This data type would contain only those tags, this way page loading time is minimised. This can be achieved with a database trigger event. I can go into more detail with respect to this if you think this might be an issue.

Cynthia

1 Like

Thanks a lot!
Maybe you can help me on the layout as well: how can I get rid of that ordered column/row setup?

Not like this:

More something like this:
image

I cannot find the way to have the text width adapting to text length…

Also vertical centering seems a real challenge…
Screenshot 2022-11-21 at 23.12.28

Thanks!

On your repeating group do “Wrapped horizontally” for the layout. Then make sure your text width fits to content, and your group also fits to the text.

1 Like

HI
That makes a lot of sense and that is what I am trying to accomplish (in theory). In practice I cannot find the setting to achieve that view… (My page is still not made with flexbox responsive design).



Thanks for pointing me in the right direction. I am waisting quite some time on that minor issue…

Yea I believe the wrapped horizontal mode is only for the new responsive

1 Like

:roll_eyes:
Well then…

Thanks anyways!!

Hi there again,

Sorry for my late reply and sorry to hear you are struggling with this issue. Bubble can be frustrating sometimes but no worries :slight_smile:

Here is how I would go about our tag situation:

1) Configuration of your repeating group:

a. Layout

b. Row and column configuration

2) Configuring your tags:

At this level, apply generous padding. I typically go for:
Top: 5px
Bottom: 5px
Left: 10px
Right: 10px

In order to get your vertical alignment centered: two things:

  • At the text box level: :white_check_mark: center text vertically
    Capture d’écran 2022-11-22 à 14.22.40
  • Every group within your repeating group should have a centered vertical alignment as follows:
    Capture d’écran 2022-11-22 à 14.24.38

Hope this helped.

Regards,

Cynthia

1 Like

You’re so kind!

The problem is that I need to keep my old responsive mode for the time being. I have a single page app running on 3 platforms (iOS, Android and webapp). Upgrading to flexbox responsive engine would mean adapting to much stuff at the moment… I will have to at some point though!

Oh! I understand. Then to achieve this you will need some HTML.

Here is a video of Gregory John, a renown teacher in the bubble field, that specifically covers your usecase in non-flex mode.

https://www.youtube.com/watch?v=Rvp2WweKv4o&t=2s

Regards,

Cynthia

By the way, if and when you watch the tutorial in the link i posted, here is the html tag:

.tag span { padding: 6px 10px; background: [#D0E8E4] border-radius: 20px; color: [#091747]; font-family: Arial; font-size: 12px; margin: 0 4px 8px 0; font-weight: 500; display: inline-block; word-wrap: break-word; white-space: normal; }

Don’t be scared off by a bit of html, and once you’ve migrated your app to flex you’ll never have to deal with this again :sweat_smile:

1 Like

Thanks a lot Cynthia!!

I will look into it.
On first sight I am not sure if this is applicable to my case. I need every tag spread on each RG field in order to be clickable one by one. This frame is the cause for the strict order…

Am I wrong?

Cheers