Tip: Converting simple list output to tag-like element

Tips
1

Tl ;dr. Get a nice looking list output, rather than the normal commas or line breaks.

skill1
skill1964×190 11.4 KB

I was searching around how to make my boring output look a little prettier. It was basically a list of things that outputted like this:

Yacht Ratings Certificate, PWCI, Navigation and Radar (OOW), Master 500gt (yacht), GMDSS (ROC)

I liked the thought of adding each list item to a tag display, but I couldn’t really find what I wanted here in the forum so I created something myself. I thought I would take a little time to jot down how I did this, and who knows, it might help someone else looking for the same thing too.

Initial (boring) list:

skill4

skill2

I knew I needed to insert some <div>'s and <span>'s for styling. Unfortunately, text elements don’t allow for these to be added /replaced. I replaced the text element with an HTML element. Here’s what I managed to output. Much better than the original text element could manage.

HTML element

skill5

skill3

The trick is to:

  • Add a div before the dynamic data
  • Use “join with” on the dynamic data using an end and start span
  • Add a closing div after the dynamic data

By the way, I don’t normally have css on-page - it’s just for this post. Hopefully this helps someone :slight_smile:

FYI, I changed the styling code slightly so it wraps the tags correctly:

.tag-list span {
    padding: 2px 4px;
    border: 1px dotted rgba(1, 176, 187, 0.65);
    border-radius: 5px;
    color: rgba(1, 176, 187, 1);
    font-family: Roboto;
    font-size: 12px;
    margin: 0 5px 10px 0;
    font-weight: 500;
    display: inline-block;
    word-wrap: break-word;
    white-space: normal;
}
24 Likes
2

Great post. Another easier solution is to use this plugin

2 Likes
3

Thanks. I wasn’t aware of that plugin. I like to try and figure these things out myself when I can - making things a little easier to debug and maybe even keeping the app a little lighter.

2 Likes
4

Thanks for sharing this, makes things a lot easier and cheaper to use what is available from bubble directly. I’ve been struggling with this as well and appreciate the post on how to accomplish it. Thanks for the putting in the hard work to get it figured out for all other users.

2 Likes
5

You’re welcome!

1 Like
6

Hi @AliFarahat, I was looking at your plugin to kind of replace bubble’s multidropdown plugin.

From what I see the plugin you offer allows to display a list of elements as beautiful tags, but checking the editor, I didn’t see the feature of multidropdown. meaning, selecting different options from the dropdown that are then diplayed as tags.

Flat & Modern Tags from zerocode seems to offer a similar solution to yours, but neither seem to have the dropdown/select feature. Am I correct ?

Do you have a plugin in store that can mimic multidropdown ?

Many thanks in advance
Thomas

7

Hey @Tomdez1989

Unfortunately no. I had a request earlier to build such a thing but since I can not really determine the demand for it I can’t really commit to making one.

8

Very useful trick indeed! I was looking to do the same thing and ended up using a repeating group displaying a list but each tag would have the same length.

Would you however know how to make these tags clickable? This could be done with the repeating group but with this html element I don’t seem to have the option available.

Thanks a lot!

2 Likes
9

Any idea how you can make these clickable, I want each tag to open a URL and but I don’t want to have an underline on the word

1 Like
10

Hey Ali, having a bit of trouble with your plugin… I’ve sent you a PM a couple days ago… Basically having issues displaying tags coming from a list of text

11

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.

12

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
13

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
14

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
15

me too

16

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
17

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
18

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
19

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?

20

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