Integrating advanced features in Bubble, a no-code tool for creating web applications, can occasionally present challenges. This article illustrates one such challenge, and how JavaScript was leveraged to overcome it, enhancing both the frontend and backend workflows of a Bubble application. The App and Its Features My social networking application allows users to publish posts and leave comments on each other's posts. These features enable dynamic user interaction, keeping the platform engaging and alive. Implementing the Tagger Plugin To enhance user interaction further, I sought to introduce a 'mentions' feature, allowing users to tag their colleagues within their comments. To achieve this, I implemented the Tagger plugin which attaches to any input, enabling users to select and tag their colleagues from a dropdown list. How the comments look before posting: Implementing Frontend JavaScript: Despite implementing the Tagger plugin, Bubble would not save tags as clickable links (without using other plugins such as various editors for RTF. I couldn't do this in my case because I needed a plain input), which was a significant limitation. To tackle this, I came up with a two-step journey to resolve this challenge: Creating a Regex Pattern: The first step was to formulate a Regex pattern capable of identifying all tags in the form "@name". Here's the pattern used: "/(^|(?<=\s))@[a-zA-Z0-9+-]+(?=(\s|$)|[!?:;-=+,.])/g". : To transform the tags into clickable links swiftly and efficiently, I integrated JavaScript code. This step proved crucial as Bubble's native solutions could not execute loops at this moment, and using a backend workflow would pose the risk of user dissatisfaction due to slower comment publishing. Implementing JavaScript HTML Note, this solution was only applicable to new comments: function processText(input) { const regex = /(^|(?<=\s))@[a-zA-Z0-9+-]+(?=(\s|$)|[!?:;-=+,.])/g; return input.replace(regex, function(match) { let username = match.trim().substring(1); // Remove the @ symbol return ﻿@<a href="Website home URL contains version-live:formatted as textprofile/${username}">${username}</a>﻿ ; }); } let processedText = processText('Comment'); bubble_fn_newtextt(processedText); The result looked like this: How the comment looks after publishing it using the JS code to replace tags with links Below see the workflow sequence to replicate the flow: Upgrading Existing Comments using Backend Workflows: To handle thousands of pre-existing comments on the platform, I implemented a recursive backend workflow, deploying the same JavaScript code as a backend script. Here is the JavaScript code I used for the backend: function processText(input) { const regex = /(^|(?<=\s))@[a-zA-Z0-9+-]+(?=(\s|$)|[!?:;-=+,.])/g; return input.replace(regex, function(match) { let username = match.trim().substring(1); // Remove the @ symbol return ﻿@<a href="Website home URL contains version-live:formatted as textprofile/${username}">${username}</a>﻿ ; }); } let processedText = processText('comments:item #i's Text'); processedText; See the backend workflow sequence: Overcoming Challenges The integration of JavaScript into Bubble was not without hurdles. The Toolbox plugin initially ran JS functions parallel to other Bubble workflows, disrupting the sequence. Thanks to the Toolbox plugin's JavascripttoBubble event, I was able to sequence actions, ensuring smooth execution. Benefits of Using JavaScript in Bubble The integration of JavaScript resulted in the swift transformation of tags into clickable links, leveraging Bubble's no-code power, and enhancing the overall user experience. The application now offers seamless tagging functionality and an engaging user interface. Limitations and Risks Despite its advantages, this approach does have its risks. Poorly written code can inadvertently cause server issues, potentially requiring intervention from the Bubble team. Conclusion By judiciously integrating JavaScript with Bubble, we can break free from the limitations of no-code platforms and deliver an enhanced user experience. As developers, it's our endeavor to push boundaries and continue to innovate, even when confronted with challenges. Through a blend of creativity and perseverance, there's no problem that can't be solved. Also published here. The lead image for this article was generated by HackerNoon's AI Image Generator via the prompt "Workflow"

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This story will praise and/or roast a product, company, service, game, or anything else people like to review on the Internet.

Leveraging JavaScript to Enhance Bubble Workflows: A Case Study

Too Long; Didn't Read

Bulat Akhmadeev

STORY’S CREDIBILITY

Guide

Review

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...