Individual URL's for users

Hello Bubble

i’m creating a platform for my website. The users can create a profil and so on. Is it possible to make every user-profil have their own individual URL, so that people can share their profil for others to view.

//Jacob :slight_smile:

4 Likes

A good tactic is using their unique ID trimmed down to about 6-7 length and putting it in the URL data. When the page is loaded it shows information based on what is in the URL.

Hi @jacob,

There is actually a way to extract the path from a URL, which lets you go about creating this kind of thing in a few different ways.

You can store a user’s unique path string in a text field under the User type and then append that as a path to the profile page url. For example “myapp.com/profile/john-henry” or “myapp.com/profile/naturalfoodstore”. What you’d be storing is just “john-henry” or “naturalfoodstore”.

So anytime you navigate to the profile page and want to specify a user, you’d use an external link action (or link element) to go to “http://myapp.com/profile/[current user’s path]” … or [current cell’s user’s path] if triggered from a repeating group.

Then, on the profile page, since you’re using the path to identify the user, one way to make the page dynamic is to put everything in the page inside a group. Set the group’s type to User and the source to “Search for Users: first item, constraint: path = get path from page URL”. Then everything within would just be “Parent groups [field]”

“Get data from page URL” has 2 types available - parameter and path. Choose Path.

Search the forum for more on this because this is a great way to create “pretty” custom URLs.


Gaby | Coaching Bubble

12 Likes

Can you make a description for me on how to do this :wink:

//Jacob

1 Like

@jacob i’m not sure what more description you need as @romanmg gave a very detailed description what to do.
Anyway i took the time to create a demo for you. Reading @romanmg’s post and looking at my editor should make it very clear but feel free to ask if you still dont get it.
To get the path from page URL i use “find & replace” with the regex /[^/]*$
This regex means, match any string after the last “/”. Since our profile page url is of the form yoursite.com/profile/username, doing the find & replace with the above regex should return “username”
Demo view: https://userprofiletest.bubbleapps.io/version-test/users
Editor: https://bubble.io/page?type=page&name=users&id=userprofiletest&tab=tabs-1
The editor has two pages, user and profile.

Hope this helps. Happy bubbling :smile:

EDIT: Please note that my implementation assume unique usernames else it will return the first one that matches.In your implementation you can use any field you want as long as they’re unique.

3 Likes

Just interested in why you are using a Regex ?

Hi @NigelG, funny enough i didn’t give that design decision much thought. I had previously done something similar where i needed to use regex to extract some information from the url to be able to use it as a filter for some data source. So i just went with that idea here.

But giving it a second thought now, is there a simpler way to extract data which is not necessarily a parameter from url without using regex?
Here we want to be able to access a user’s profile page directly e.g. i should be able to enter myapp.com/profile/username. So it’s not like i’m getting data (e.g. username) from another page as a url parameter.
I’m still a beginner so happy to hear your thoughts.

HI @NigelG,
Also as you can see from the snapshot below (the users list page), i didnt send any data to the profile page. I used External URL and i customized my destination url to have the clean url.
So on the profile page i didn’t have any url parameter to simply use to pull the user’s data.
What’s the best and cleanest way to do this without involving regex for the sake of users not familiar with regex.

You can just use “path” I think ?

But was interested in what the use case was that meant you needed a regex.

Aha i see. I didn’t know i could simply just use path. Actually i used path but i thought the path returns the the portion of the url after the Website Home Url that is why i was using the regex to get the last string after “/”.
I just read the documentation and you’re right, i could just have ended it at stating path. This is what the documentation says
“If you select path, you can retrieve ‘hello’ in the URL ‘yourdomain.com/yourpage/hello’.”

Thanks @NigelG for this knowledge.

With regards to the use case for using regex. In a previous application i had a custom clean url e.g. myapp.com/some_id/another_id. And i needed to retrieve both “some_id” and “another_id” from the Url.
So i did “This URL : find & replace : my_regex”.

@jacob i’ve updated my demo to simply use path without any regex as Nigel correctly suggested.

2 Likes

Ah, gotcha, that makes sense now :slight_smile:

i can’t figure out how to do it this way…

1 Like

I dont know how to use the regex…

1 Like

I’ve successfully implemented individual, custom URLs for users:

I have a Data Type called “profileid”,which will be the string of characters (path) at the end of the URL for each user. Each User should also have a field called ‘profileid’, which will consist of their profileid.

When the user signs up (or later, when they edit their account), have them specify their ‘profileid’. When it gets saved, do a search for profileids to make sure there isn’t already one that exists the same. If its unique, create a profileid and then make the User’s profileid = the one you just created.

Anything that links to the Profile page should ‘Open external website’ and goto ‘This website’s home URL’+ sub page (without a space)/Current User’s profileid:

Then on the relevant page (in my case, the Therapist Profile page), make its type ‘User’ and its data source ‘Do a search for Users’, with profileids equal to the “path” from the URL.

Hope this helps! Let me know if you have any questions. It works really well and is pretty easy to set up.

EDIT: Ah man, might as well show you an example of it working on my still in construction site: https://calmly.io/version-test/therapists/simonhill

So the fake user, Simon Hill, when signing up made his profileid “simonhill”.

7 Likes

Can the information on the relevant page depend on the URL so you don’t have to define a specific profil ID when “open an external website”? @danp1995mail

You could use a dynamic input where the specific ‘profileid’ is in the external website URL. It could retrieve that path from anywhere, really - be it the existing page’s URL, the current page’s user’s profileid or some other variable.

can you show me in screenshots how to do this ?

Can I clarify what it is you’re after:

1/ Do you want the Page to derive its data from somewhere other than the path of the URL?

2/ Do you want the profileID to be determined by the Current User/Parent Group User/Current Page user?

I’m a bit lost :slight_smile:

1 Like

1/ no
2/ current user

hope it helps understand

1 Like

The workflow I shared above should load whatever profileID is saved to the Current User.

Every user should have an ID attached to them on signup: