Tip: Converting simple list output to tag-like element

Sorry all, I’ve been away for a while and didn’t notice the notifications. I’ll see if I can mock something up for a clickable style, if that’s even possible.

Ok so I spent a little bit of time on this and have a working solution for clickable elements.

I had to add a new field to hold the URL to the “Skills” dataset as the only way I could iterate over the list and pull in a URL was to add the URL to the dataset itself.

Note I also changed the CSS slightly to make this work for the a href so had to remove span elements for this to display correctly.

Preview and editor here:

5 Likes

With the plugin “Toolbox”, you can add Javascript to Bubble element on the page. Those are invisible but they allow you to create javascript functions that trigger workflows.

You could then call that function and pass the content of the span with:
<span onclick="bubble_fn_myFunction(this.innerHTML)">HELLO WORLD</span>

3 Likes

Also a good solution. I just decided to do it with CSS as personally I don’t need links and don’t really know my way around javascript.

1 Like

me too

Hey Matt

Thanks again for posting this. I have been able to successfully get a tag list put together with the hover effect. I am curious if you have any thoughts on how I could get the ability to click on them to trigger workflows.

My use case is not for links, but for either option sets or perhaps data types to get added and removed from custom state lists. I am hoping to get this put together so in a product search filter a user can click their desired filters (not using the tag element) and then their selected filters will display as a tag element so that they could then click the tags to remove those filters.

Any thoughts on if this would be possible?

2 Likes

I’m on mobile so can’t do any tests, but my first thought is yes, it should work.

Aware this isn’t for your own use case, but wanted to mention here for other users.
For users wanting to use workflows with tag that contain links, I would use a URL router such at Sudsy. That way when clicking a tag that changes a URL, the router should pick up the change and trigger a workflow.

In the case of Sudsy for example, clicking a tag with an href would trigger a workflow when URL changes with a condition of something like when this sudsy page URL:last item = tag_name > do the thing you want.

Unsure how much you know about Sudsy, but you may be thinking that you don’t want to refresh page on click events. You can actually stay on page using this method without a reload. It should work for setting states on the page, and you could also push query strings if using for filtering.

For your specific use case of only showing tags based on the choices or filters a user selects, I don’t see an issue (but haven’t tested).

The tag-list html could simply take the data from a state on the page (rather than the db as per my example). As long as your passing in a list that can use the join method then I think this should work. Wrapping the HTML in a hidden collapsable group until the state is not empty be be useful here too.

2 Likes

Thanks for the reply. I believe at this point I may save this for a later date and not get bogged down on the idea. Something I will probably come back to.

I think in the idea you mention

This would be very useful for blog articles and I will be trying to implement this when I start putting together a blog page. Should be very helpful for such a use case.

1 Like

Hi @AliFarahat

I’m curious about the this plugins conditional capabilities as it relates to tag styling.

I am interested in having the background color change if the tag is hovered, but I can’t seem to find a way to do this.

Is this a feature that is not currently possible? Or is there some workaround that does not make use of the conditional tab on the plugin element dialogue?

This is a great tip for making custom chips / tags. Has anyone come up with a say to “join with” multiple items? I.e. I would like to set each items BG color by specifying an inline style equal to that things stored color.

So for each iteration I need not only the Thing’s title but also another field. Any thoughts?

1 Like

Is it possible to use my custom font that’ve uploaded in bubble.
Atribute font-family doesn’t work

Hi Rob

I saw your post from Jan and thought I’d let you know about a tutorial I put up if you have not yet found a solution to your issue.

I believe after viewing the tutorial you’ll be able to set up the stored color attribution for a chip as the tutorial has content devoted to changing the color to a stored color and to do so in a repeating group so you can have multiple chips of different colors based on option sets.

There is editor access as well so you could optionally copy and paste the feature into your own application.

Learn More

Boston85719 is an expert Bubbler with a decade experience as an educator. Real name Matthew, he has been actively building SaaS apps, marketplace apps, scheduling apps and more for clients, himself and for sale as templates.

As an official Bubble Bootcamp Instructor, he leads Bubble Bootcamps on a regular basis.

Always willing to offer advice via the Bubble Forum, Matthew also offers Private Personal and Group Training Sessions.

Through his site, NoCodeTrainer, Matthew provides a range of tutorials with editor access to help you jumpstart your Bubble development.

Always accessible you can send Matthew a private message via the forum or send an email directly with your requests.

Be sure to checkout the Stripe Integration Course when you are ready to integrate Stripe payments to start monetizing your application via product sales or subscriptions.

Stripe Integration Course

NoCodeTrainer.com

4 Likes

Just a head up, you can pretty easily get this functionality with Bubble RGs and Text Elements. See example below.

I created a sample app to demonstrate:

Here is a link to a demo page: Bubble | No-code apps

Here is a link to the editor: Rg-chips-tags-demo | Bubble Editor

You can do this by following these steps:

  1. Make your RG Full List with 1 row and 1 column.

  2. Deselect “This repeating group has a fixed width” and select “Allow more than one column when stretched”.

  3. Add an ID Attribute to the RG (I’m using “tag_rg” as my id).

  4. Add a text element inside the RG’s one cell that is the same width as the cell. Add your dynamic text content to this text element and style it however you prefer.

  5. Add the following code snippet to your Page HTML Header found at the bottom of your page’s element editor dialog.

<style>

#tag_rg .bubble-r-box, 
#tag_rg .bubble-r-line, 
#tag_rg .group-item, 
#tag_rg .Text {
width: auto !important;
position: relative !important;
}

#tag_rg .group-item {
padding-right: 10px !important;
}

</style>
  1. Tweak padding as desired.

Hope this helps everyone!

4 Likes

Hey @aj11, would it be okay if you expanded on what you put above? In particular about how the tag/chips are styled. A link to a demo editor would be incredible, I just want to experiment with this a bit more. I followed the steps set out above and didn’t get the result I was expecting, everything in the RG was merged into the one cell.

I’ve added links to a demo and editor to my previous post. The CSS also had an incorrect element id, which I’ve now fixed.

1 Like

Whoah, this is brilliant! Thank you @aj11 , I appreciate it. I wonder if you’ve encountered the same height issue below the RG, it pushes everything down by about 200px. I’ll play around with fixing it with css but if you’ve encountered it you may already have a solution! Thanks again!

1 Like

mattb You are a legend. Thank you. I spent 4 hours on it and then luckily came to your post and found the answer. thanks

Yes I don’t think I addressed it as it wasn’t causing problems with my design, but you can put the RG inside of another group and then target the id of that group with #id {height: 26px !important; overflow-y: hidden !important;} Just replace 26 with your ideal height and this should control that.

@aj11 I’ve got a similar problem to @kelsie.murphy but it’s expanding my group by about 500px extra than the content.

I’m not really very familiar with CSS or HTML…I’m wondering are you able to show me exactly how to set this up? Would I put it in the same HTML element as the rg tags? Or would I need a second one for this? I had a quick go at it but it doesn’t seem to work for me…I’m sure it’s just something small in my formatting.

Hi everyone! Excited to announce a new native feature to our repeating group container that will allow you to build this “tag like” list!

1 Like