I spent a few minutes on this earlier and wanted to share in case anyone had a similar use case. It’s not uncommon to create a URL based on user input (example.com/company-name) but you never know what someone is going to put in that input field— that’s why we have to do some work to make it url-friendly.
This function turns spaces into hyphens, removes whitespace & leading/trailing hyphens, removes illegal characters, & limits to 32 characters.
There are many ways to use the custom code depending on your specific needs. For this scenario, I used an On Change workflow to trigger an Update Variable action on an input element. So basically when someone types in the input box, the code runs and saves the output to a variable that I can use.
Select your input > Add a workflow to it > set it to On Change (if it isn’t by default) > add a “Change a variable value” action > bind the “value” to the custom code
Absolutely this is an option and a good way to accomplish a similar task, but the output isn’t always what you want-- especially for creating the best-looking URLs. My concern wasn’t “what do I need to sanitize” but rather “how can I turn a user input into a URL format that is not only valid but looks nice (or at least how I want URLs in my app to look).”
You can also build validation into the method I chose, remove numbers, limit # of characters, etc.
In my example, you’ll see that the output is creativespark.design/my-cool-company, and the output of encodeURIComponent would be something like creativespark.design/my%20cool%20company
Both options work; they just aren’t fully interchangeable.