How can I load a page from an objects fields through the URL path & slug

Given

  • I have a datatype Location
  • I have a page of type Location
  • Location, has 2 custom fields: NickNames, which is a list of texts & Name, which is a text
  • I have 1 Location object in my appdata: Name = Rotterdam, NickNames = [Rdam, Roffa], Slug = rotterdam

I want to load the Location page when a user navigates to:

  • .../location/rotterdam (which is the easy one, because it’s the slug for the object)
  • .../location/Rotterdam (object’s name)
  • .../location/Roffa (and lowercase ‘roffa’)
  • .../location/Rdam (and lowercase ‘rdam’)

How can I do this?

(btw: I noticed urls are case sensitive in Bubble, can I change this behavior, to be case insensitive?)

I’m not sure about the case sensitivity part but basically what all of those examples of the name and nicknames are consider a path of the URL…the get data from url function provides two ways to access it, the path and paths as a list…paths as a list allows you to signal which item # from that list to refer to.

So you build the page but before building consider having some element that will be the reference element for the data type…a lot of people will build a group element that takes up the entire page and use that as the data type…in this case the group covering the page would have a data type of location and a datasource could be do a search for location with a constraint that ‘any field’ is equal to the url path as a list item #2 (I’m not 100% sure about which item number in the path list it would be, so play around with it — put a text element on the page and dynamic expression the url paths as a list item # and do that for item # 1 through 4 or 5 to figure out which item # your location/nickname is in the list; but I think it would be #2)

now you would have a group that has a datasource searching for a location that any field is equal to the info in the URL path list…then that group would be the parent group of all other elements inside of it and you can reference the parent groups thing to show all the relevant data associated with the location.

Just up to you to figure out how your users will navigate to the page with various choices of using nicknames or names

1 Like

@boston85719 thanks for explaining it to me :ok_hand:, I got stuck, while holding on to the slug.

I will implement it like this, if i’m stuck again, I’ll get back to this thread.

this did the trick,

extra: for find & replace I used regex: [^A-zÀ-ú] (and replaced them with “” (empty string) in order to catch all non-alphanumerics)

Glad it worked out.

Is the reason to remove the non-alphanumerics to make sure it is URL friendly?

it’s the other way around… when a user types eg: r'dam / or r-dam in the URL when only rdam is set as a NickName it will still be able to load the Rotterdam object…

(To be honest, I don’t know if I would actually implement it like that in the final product.)