There’s a good little snippet of code here that should help you (along with some other pointers in the thread that follows):
In case it’s not obvious what this does:
Convert your string to lowercase
Regex 1 replaces spaces with dash
Regex 2 Removes non word characters
etc.
You can do all of this in Bubble equivalents. (As another poster in that thread points out, there are JS functions for trimming, etc. Bubble has a remove whitespace operator.)
I am trying to utilize the plugin for the purpose of slugifying a text field in the database, however I am unable to find any relevant information about how the plugin works.
Any help with this functionality in terms of quick tutorial or walkthrough of how to use the plugin for this purpose would be greatly appreciated.
Cheers
I have played around with the plugin with a test page and test data ( just 3 simple entries )…seems to work fine in that the data gets saved as a slug ( excellent! )
However I get this error messages during the process
What is strange is that despite the error messages the process still works and my slugs are saved to the database
What makes this stranger is that the slugs get saved before the workflow seems to be completed as the blue progress bar never actually goes complete and therefore just remains on the screen requiring the page to be reloaded to get it off
What I noticed is that if I disable the workflow “When ForEach A Execution” I get only one error message and only the first item in the database has the slug saved, and after pressing ok on the error message the blue progress bar actually finishes and the page doesn’t need to be refreshed.
Another odd thing is that when I have the workflows enabled and all three error messages are displayed ( one for each data entry I assume ) is that when I am in the database and delete the slug entries they get repopulated if I leave the app page open while the progress bar remains incomplete and visible.
My main issue is that after testing I decided to attempt it on some actual data in my app that needs to have the slugs. Unfortunately I was not able to get the slugs to be saved and instead of seeing an error message for each data item ( there are 1,715 items ) I see only one error message and the progress bar completes with no slugs saved at all.
Now when I click the button to start the workflow I get no error messages and all three entries have a slug saved correctly and the blue status bar completes ( quickly as well ).
And now I realize that when I was working on adding slugs to a large list of items ( mine was 1715 items ) that it might cause the error due to processing / downloading such large amounts of data as I saw in the inspector.
So to still utilize the plugin I made it work for list items from and until to get a manageable number of items
Yep thanks . Thats the right way of doing it. You can also adjust delay of the execution to make sure the slug is available. But bubble already does that as your using results of step 1. Hence that’s why there are no extra promises in this plug-in
Your welcome, yes it is unfortunately not something i can control as its bubble related. The actual code it self is only a few lines
function slugify(text) {
return text.toString().toLowerCase()
.replace(/\s+/g, '-') // Replace spaces with -
.replace(/[^\w\-]+/g, '') // Remove all non-word chars
.replace(/\-\-+/g, '-') // Replace multiple - with single -
.replace(/^-+/, '') // Trim - from start of text
.replace(/-+$/, ''); // Trim - from end of text
}
return {
slug: slugify(properties.text)
}
This Regex pattern extracts any text or number from the string
The square brackets stands for a character set to match
The + stands for 1 or many occurrences
You don’t have to worry about lowercase, dashes (-) or duplicates. This will be handled by Bubble itself, since the Slug has to match certain criterias.
Test the regex in a regex tester to see how it works:
Do we know the rule (regex?) that Bubble uses with the set a thing's slug? I would like to provide a visual indicator to the user before he actually changes the slug.
. Thats the right way of doing it. You can also adjust delay of the execution to make sure the slug is available. But bubble already does that as your using results of step 1. Hence that’s why there are no extra promises in this plug-in