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
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.
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.
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
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:
I cannot find the way to have the text width adapting to text lengthâŠ
Also vertical centering seems a real challengeâŠ
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.
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
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
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:
Hope this helped.
Regards,
Cynthia
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
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
Cynthia,
Iâd appreciate your guidance in setting up a database trigger event to enable searching a repeating group of Products with a satellite data type of Tags.
Thanks,
Julian