Can # tags and @ references be implemented?

[laurence]

Is it possible to implement the equivalent of # tags and @ references similar to LinkedIn, Facebook (and I think other social networking sites)?

Apparently tags that have ever been used in the app are stored in a fast-searchable data store of some type. And starting to type # followed by anything brings up a pick list from which to choose an existing tag. Then, the tag is encoded so it can be clicked to access other posts referring to it.

Similarly, an @ referenced to a person is encoded such that it can be clicked, maybe even floated over, to view or open information about the person referenced.

Can these kinds of things be done in Bubble? If so, what resources should I study to learn how to implement them?

[jgellis]

Short answer, Yes. You can use regex to scan the text and pull out the #tags and @userStuffer then write this to table linked to either the user, topic, entry ect… Then use a indexing API for fast search.

Warning the following is not a No-Code solution, so you may wish this skip this.
Longer answer, one nice feature to add to this solution is to highlight the tags as the user types. I have not implemented this is pure bubble no-code but it is on my to-do list for an app am working on. But, if you are familiar with JS then you can relatively easily create JS or jQuery code to do this. Basically you create two layers (bubble groups with IDs). The back layer mimics the front. As the person types in the front layer (text input) the back layer contain exactly the same text by leveraging a onkeyup event tied to the text input element. When the back layer encounters a tag (using a regex filter) it puts a solid rectangle character in place of the actual letter using the color of choice. The front layer contains the actual text that overlays the solid rectangles giving the illusion that the text is highlighted. If your competent in javascript you can find links to code via Google.

John

[laurence]

Thanks for this, John.

What I knew about JS is 20 years old by now, but I might take this up at some point.

In the short answer, I’m reading it as a workflow that get’s triggered when the whole text field is saved. I don’t think it answers the challenge of showing the user any available tags or user are available from which to choose.

In the longer answer it seems that the user can see that what they’re typing will be made into a tag/reference, but I don’t see that a list of tag/reference options is being shown (kind of a dynamic drop-down pick list.) Can that be incorporated?
Would love to see an example in action. As time permits, I’ll come back to this and study related resources to see what I can figure out.

[jgellis]

Hi @laurence,

Short: Yes you are correct this does not allow for dynamic searching and pop-up info when a user enters a tag easily. However it might be possible to have a When event that tracks the number of characters entered in a custom state (CS) then compares it to the current length (CL).
EG. CS<CL – with a workflow that does some magic such as a lookup and popup when a regex is detected? Not sure how responsive this would be?

Long: The JS could build the lists as the users types and store it variables accessible using the JavaScript to Bubble plugin. (If not a native plugin but rather JS inline).

FYI I actually started playing with a plugin that would do this today because I will need this later this year so will keep you in mind as I move along. Given my current workplan it will likely be a few months since this is a side project when I get bored with other projects on the go.

Have a great day, John

[laurence]

John, I circled back around on this and found an existing plugin that may do what I need. Tagger is the name. Tagger Plugin | Bubble

I’ll be giving it a whirl in the next several days. Have you had experience with it?

[NoCodePete]

Tagger is the way to go! Very popular plugin

[jgellis]

Hi @laurence , thanks for thinking of me. Yes nice plugin however what I am working on for our project is a multi-line text input box that highlights the tags as you type to give feedback to the user. In the background it also dynamically builds two lists - the @ list and the # list that can be directly retrieved as a property of the ML element. Not quite figured out how to set a change trigger that sets an On Input change flag so we can dynamically use it with the bubble When workflow element yet each time a list member is added but will work this out later. Thanks again for thinking of me. Have a great day. John